HOW - 移动端白屏问题优化和监控

VIP文章 @PHARAOH

已于 2024-03-26 00:34:31 修改

阅读量825

点赞数 13

文章标签：前端面试 javascript 性能优化

于 2024-03-25 21:49:28 首次发布

本文链接：https://blog.csdn.net/weixin_58540586/article/details/137024616

版权

一、白屏定义和关注项

移动端白屏（Blank Screen）是指在打开一个移动应用或者网页时，用户看到的是一片空白没有任何内容显示，或者一直处于骨架屏。这些情况可能是由于加载速度慢、网络问题、JavaScript错误或其他因素导致的。

注意，我们将骨架屏也算在白屏范畴内考虑，这对于我们后续方案的设计也是一个重要的考虑因素。

不管是白屏时长太久，或者是错误导致的直接白屏，都是用户不可忍受的问题。

对于移动端白屏，开发者一般需要关注两件事：

做好前置优化工作，尽量减少白屏问题的发生和提升用户体验
白屏监控，即判断是否处于白屏，以及白屏时长统计。这也是今天的重点内容。

二、前置优化工作

以下是一些移动端白屏问题的常见优化方案：

预加载页面内容：在网页或应用启动时，尽可能提前加载页面所需的基本内容，包括HTML、CSS和JavaScript文件。这可以通过使用资源合并、压缩和缓存等技术来实现，从而减少页面加载时间。
优化资源加载顺序：确保页面所需的关键资源（如CSS和JavaScript）优先加载，以确保页面内容能够快速呈现。推迟加载非关键资源或将其异步加载，可以提高页面的渲染速度。
使用加载动画或占位符：在页面加载过程中显示加载动画或骨架屏，让用户知道页面正在加载，从而减少白屏的不良体验。
检测网络状态：在应用或网页中检测网络连接状态，并根据连接质量采取相应的措施。例如，当网络连接较慢时，可以显示适当的提示信息或者加载低分辨率的图片和内容。
优化页面性能：通过优化代码、减少HTTP请求、使用缓存等技术来提高页面的性能，从而减少白屏出现的可能性。
错误监控与处理：使用工具监控页面加载过程中可能出现的错误，及时处理这些错误，避免因为JavaScript错误导致页面白屏。

综合采用以上策略，可以有效地减少移动端白屏问题的发生，提升用户体验。性能优化是老生常谈的事情，这里不过多赘述。

三、白屏监控

概括

白屏监控方案一般需要包括如下能力：

精确检测是否处于白屏
白屏耗时统计，帮助后续优化
确认为白屏状态时，能够上报错误信息，帮助定位白屏原因

方案一：First Paint

“首次绘制”（First Paint）是指浏览器首次将像素渲染到屏幕上的时间点。

现代浏览器的渲染引擎致力于尽快在屏幕上显示内容，而不是等待所有 HTML 解析完成后再开始构建和布局渲染树。这意味着即使在 HTML 解析过程尚未完成时（如 DOMContentLoaded 事件被触发），浏览器也会尝试渲染部分内容，以尽快显示页面的一部分，从而减少用户感知到的白屏时间。

即浏览器能够在解析不完整的 DOM 树和 CSSOM 的情况下进行渲染，这种策略有助于尽快向用户呈现页面，提高用户体验。

以前我们经常听说“将js文件放在body之后”，这是因为如果将 JavaScript 放置在页面的头部，它可能会阻塞 DOM 的解析过程，因为浏览器必须等待 JavaScript 文件下载和执行完成后才能继续构建 DOM 树和 CSSOM，进而显示页面内容。这种情况会导致 First Paint 的延迟，因为页面的显示将等待 JavaScript 的执行。

那在通常情况下，First Paint 它可以用来表示用户首次看到页面内容的时间点，利用“首次绘制”可以辅助判断页面是否结束白屏状态。

一种常见的方法是通过浏览器提供的性能API来获取“首次绘制”的时间，并结合其他指标来判断页面是否结束白屏。以下是一种可能的实现方式：

// 监听页面加载事件
window.addEventListener('load', function() {
   
    // 使用性能API获取首次绘制时间
    var firstPaintTime = performance.getEntriesByType('paint')[0].startTime;
    
    // 获取当前时间
    var currentTime = performance.now();

    // 计算首次绘制到当前时间的时间差
    var timeDiff = currentTime - firstPaintTime;

    // 设置一个阈值，判断页面是否结束白屏
    var whiteScreenThreshold = 1000; // 例如设置为1秒

    // 如果时间差超过阈值，则认为页面已经结束白屏
    if (timeDiff > whiteScreenThreshold) {
   
        console.log('页面已结束白屏');
        // 在这里可以执行相应的操作，如显示内容等
    } else {
   
        console.log('页面仍处于白屏状态');
        // 在这里可以执行相应的操作，如显示加载动画等
    }
});

在上面的代码中，我们使用性能API的 getEntriesByType('paint') 方法获取首次绘制的时间，然后计算当前时间与首次绘制时间的时间差。如果时间差超过了设定的阈值，就可以认为页面已经结束白屏。

需要注意的是，由于浏览器的差异以及其他因素的影响，对于某些情况下，仅仅依靠“首次绘制”来判断是否结束白屏可能并不十分准确，因此可以结合其他指标一起使用，例如页面的可见性、资源加载状态等。

方案二：滚动条件判断

我们可以通过定时比较 scrollHeight 和 offsetHeight 或 clientHeight 来判断页面是否可以进行滚动来判断是否白屏结束。

因为通常情况下，对于移动端场景，当页面正常加载时，页面内容会填充整个屏幕，并且用户可以通过滚动页面来查看内容。而当页面出现白屏时，即页面内容无法正确加载或者显示，通常情况下用户无法进行正常的滚动操作。

判断逻辑可以按照以下步骤进行：

获取元素信息：首先，获取页面中需要进行滚动的元素（通常是 <body> 或者包含内容的特定 <div> 元素）的相关信息，包括 scrollHeight 和 offsetHeight 或 clientHeight。
定时比较：使用 JavaScript 中的 setInterval() 函数设置一个定时器，定期执行比较操作。
比较操作：在定时器的回调函数中，比较 scrollHeight 和 offsetHeight 或 clientHeight 的值。如果 scrollHeight 大于 offsetHeight 或 clientHeight，则说明页面内容高度已经超出了视口高度，页面可以进行垂直滚动；否则，页面不需要滚动。

下面是一个简单的示例代码：

// 获取需要滚动的元素（这里以 body 元素为例）
var scrollElement = document.body;

// 设置定时器，每隔一段时间检查一次页面是否可以滚动
var scrollCheckInterval = setInterval(function() {
   
    // 获取滚动元素的 scrollHeight、offsetHeight 和 clientHeight
    var scrollHeight = scrollElement

最低0.47元/天解锁文章

@PHARAOH

关注

13
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
HOW - 移动端白屏问题优化和监控

到的是一片空白没有任何内容显示，或者一直处于骨架屏。这些情况可能是由于`加载速度慢`、`网络问题`、`JavaScript错误`或其他因素导致的。注意，我们将`骨架屏`也算在白屏范畴内考虑，这对于我们后续方案的设计也是一个重要的考虑因素。不管是白屏时长太久，或者是错误导致的直接白屏，都是用户不可忍受的问题。
复制链接

扫一扫