技术标签： 面试 性能优化 前端 javascript
移动端白屏（Blank Screen）是指在打开一个移动应用或者网页时，用户看到的是一片空白没有任何内容显示，或者一直处于骨架屏。这些情况可能是由于加载速度慢、网络问题、JavaScript错误或其他因素导致的。
注意，我们将骨架屏也算在白屏范畴内考虑，这对于我们后续方案的设计也是一个重要的考虑因素。
不管是白屏时长太久，或者是错误导致的直接白屏，都是用户不可忍受的问题。
对于移动端白屏，开发者一般需要关注两件事：
以下是一些移动端白屏问题的常见优化方案：
预加载页面内容：在网页或应用启动时，尽可能提前加载页面所需的基本内容，包括HTML、CSS和JavaScript文件。这可以通过使用资源合并、压缩和缓存等技术来实现，从而减少页面加载时间。
优化资源加载顺序：确保页面所需的关键资源（如CSS和JavaScript）优先加载，以确保页面内容能够快速呈现。推迟加载非关键资源或将其异步加载，可以提高页面的渲染速度。
使用加载动画或占位符：在页面加载过程中显示加载动画或骨架屏，让用户知道页面正在加载，从而减少白屏的不良体验。
检测网络状态：在应用或网页中检测网络连接状态，并根据连接质量采取相应的措施。例如，当网络连接较慢时，可以显示适当的提示信息或者加载低分辨率的图片和内容。
优化页面性能：通过优化代码、减少HTTP请求、使用缓存等技术来提高页面的性能，从而减少白屏出现的可能性。
错误监控与处理：使用工具监控页面加载过程中可能出现的错误，及时处理这些错误，避免因为JavaScript错误导致页面白屏。
综合采用以上策略，可以有效地减少移动端白屏问题的发生，提升用户体验。性能优化是老生常谈的事情，这里不过多赘述。
白屏监控方案一般需要包括如下能力：
“首次绘制”（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文章浏览阅读86次。首发地址：https://yq.aliyun.com/articles/221708谈到机器学习，相信很多除学者都是通过斯坦福大学吴恩达老师的公开课《Machine Learning》开始具体的接触机器学习这个领域，但是学完之后又不知道自己的掌握情况，缺少一些实际的项目操作。对于机器学习的相关竞赛挑战，有些项目的门槛有些高，参加后难以具体的实现，因此造..._scrath五子棋下载
文章浏览阅读83次。原标题：Oracle 12c新特性系列专题-安徽Oracle授权认证中心 随着Oracle database 12c的普及，数据库管理员 (DBA) 的角色也随之发生了转变。 Oracle 12c数据库对 DBA 而言是下一代数据管理。它让 DBA 可以摆脱单调的日常管理任务，能够专注于如何从数据中获取更多价值。未来我们会推出基于Oracle12c的技术文章，帮助DBA尽快掌握新一代数据库的新特性..._ilm add policy row store compress advanced row after
文章浏览阅读150次。问题及代码：*Copyright(c)2016,烟台大学计算机与控制工程学院 *All right reserved. *文件名称：负数把正数赶出队列.cpp *作者：张冰 *完成日期；2016年10月09日 *版本号；v1.0 * *问题描述： 设从键盘输入一整数序列a1，a2，…an，试编程实现： 当ai>0时，ai进队，当ai<0时，将队首元素出队，当ai
文章浏览阅读376次。贪心+构造
文章浏览阅读150次。本文讲的是Linux命名空间学习教程（二） IPC，【编者的话】Docker核心解决的问题是利用LXC来实现类似VM的功能，从而利用更加节省的硬件资源提供给用户更多的计算资源。而 LXC所实现的隔离性主要是来自内核的命名空间, 其中pid、net、ipc、mnt、uts 等命名空间将容器的进程、网络、消息、文件系统和hostname 隔离开。本文是Li..._主机的 ipc 命名空间
文章浏览阅读2w次，点赞5次，收藏7次。在设备上强制安装apk。在app已有的情况下使用-r参数在app版本低于现有版本使用-d参数命令adb install -r -d xxx.apk_adb绕过安装程序强制安装app
文章浏览阅读290次。如果是越界进入硬件错误中断，MSP 或者 PSP 保存错误地址，跳转前会保存上一次执行的地址，lr 寄存器会保存子函数的地址，所以如果在 HardFault_CallBack 中直接调用 C 语言函数接口会间接修改了 lr，为了解决这个问题，直接绕过 lr 的 C 语言代码，用汇编语言提取 lr 寄存器再决定后面的操作。由于 STM32 加入了 FreeRTOS 操作系统，可能导致无法准确定位，仅供参考（日常编程需要考虑程序的健壮性，特别是对数组的访问，非常容易出现越界的情况）。_stm32flash地址越界怎么解决
文章浏览阅读1.8k次。学到了一种操作，说实话，我从来没想过还能这样正常情况下，为了管理方便，许多管理员都会开放MySQL数据库的secure_file_priv，这时就可以导入或者导出数据当我如图输入时，就会在D盘创建一个名为123456.php，内容为<?php phpinfo();?>的文件我们可以利用这一点运用到SQL注入中，从拿下数据库到拿下目标的服务器比如我们在使用联合查询注入，正常是这样的语句http://xxx?id=-1 union select 1,'你想知道的字段的内容或查询语句',
文章浏览阅读2.9w次，点赞12次，收藏63次。感谢原文：https://blog.csdn.net/abc5382334/article/details/24260817感谢原文：https://blog.csdn.net/jiaqingge/article/details/52564348Html CSS的三种链接方式css文本的链接方式有三种：分别是内联定义、链入内部css、和链入外部css1.代码为：<html>..._html链接css代码
文章浏览阅读625次。近几年，蓝牙耳机市场发展迅速，越来越多的消费者希望抛弃线缆，更自由地听音乐，对于运动人士来说，蓝牙耳机的便携性显得尤为重要。但目前市面上的大多数蓝牙耳机实际上都是“有线”的，运动过程中产生的听诊器效应会严重影响听歌的感受。而在“真无线”耳机领域，除了苹果的AirPods外，可供选择的产品并不多，而AirPods又不是为运动场景打造的，防水能力非常差。那么对于喜欢运动又想要“自由”的朋友来说，有没有一款产品能够满足他们的需求呢？下面这十款小编专门为大家搜罗的蓝牙耳机或许就能找到适合的！网红击音F1_适合游戏与运动的高音质蓝牙耳机
文章浏览阅读1k次，点赞6次，收藏7次。在本篇博文中，我们在 iOS 17 beta 4（SwiftUI 5.0）测试版中发现了 SwiftUI 视图首次显示时状态的改变会导致动画“副作用”的问题，并提出多种解决方案。
文章浏览阅读1.9k次。 在 上篇文章–Flutter 实现支持上拉加载和下拉刷新的 ListView 中，我们最终实现的效果是在 listView 上面留下了一段空白，本意是用来加载轮播图的，于是今天就开发了一下，希望能给各位灵感。一 、效果如下说一下大体思路 其实图片展示是用的 PageView ，然后，下面的指示器 是用的 TabPageSelector ，当然整体是用 Stack 包裹起来的。1、..._flutter pageview轮播图 site:csdn.net