移动端网页首屏加载卡顿如何排查？检查主线程阻塞时间

识别主线程阻塞的迹象

移动端网页在首屏加载期间出现交互无响应或界面冻结，通常是因为主线程被长时间的任务占用。当主线程被阻塞时，浏览器无法及时响应用户的点击或滚动事件，导致应用看起来像是崩溃或卡死。这种体验问题会直接影响用户对应用的信任度，严重时甚至导致用户卸载应用。

在 Web 应用中，主线程负责执行 JavaScript 代码、处理用户事件以及渲染用户界面。如果启动代码全部在主线程的单个事件处理器中同步运行，就会阻塞整个事件循环。这种阻塞不仅会让页面看起来冻结，还可能让浏览器和设备在启动过程中无法正常工作，给用户带来糟糕的体验。

开发者工具中的 Performance 面板是排查主线程阻塞的有效工具。在移动端网页加载时，打开该面板并开始录制，然后刷新页面或触发启动流程。录制结束后，查看面板中的时间轴，重点关注那些持续时间较长的任务块。这些长任务通常对应着主线程的阻塞时间。

在时间轴视图中，长任务通常显示为占据大量时间的矩形块。通过分析这些块，可以确定哪些 JavaScript 执行导致了主线程阻塞。如果发现某个任务占据了数百毫秒甚至更长的时间，说明该任务过重，阻塞了页面的响应能力。这是排查首屏加载卡顿的关键步骤。

在 Performance 面板中，点击长任务块可以查看其详细的调用堆栈。这有助于定位具体的代码位置，例如是某个复杂的计算、大量的 DOM 操作还是同步的数据处理导致了阻塞。根据堆栈信息，可以判断该任务是否属于启动过程中的关键路径，或者是否可以拆分到后台线程执行。

如果发现启动代码中有大量同步计算或数据处理，应考虑将其重构为异步任务。例如，将纯计算任务放入 Web Worker 中运行，或者将大文件解码（如 JPEG 转换为纹理数据）移至后台线程。这样可以释放主线程，使其能够继续处理用户事件和渲染界面，从而避免页面冻结。

优化主线程阻塞的核心原则是将启动过程中的任务拆分为多个小任务，并分散到事件循环的不同周期中执行。例如，使用 defer 或 async 属性加载脚本，让 HTML 解析器在脚本下载和执行时继续处理文档。此外，应避免在启动阶段加载不必要的脚本或样式表，只保留关键渲染路径所需的资源。

对于无法完全移至后台的任务，应尽量减少其执行时间。例如，使用浏览器内置的解码器处理图片数据，而不是自己编写解码逻辑。通过这些优化措施，可以显著降低主线程的阻塞时间，提升页面的响应速度和用户体验。确保启动过程尽可能异步，是解决首屏加载卡顿的关键。