在改代码前先分析一次客户旅程
选择一个重要的路由和交互,例如打开导航、筛选结果或提交表单。在 Chrome DevTools 的 Performance 面板中以干净的浏览器状态录制一次操作。重复该动作并捕获受限 CPU(throttled-CPU)运行和开发机器运行两种追踪;桌面追踪可能会隐藏在低功耗手机上会造成干扰的工作。
使用追踪来验证一个窄范围假设,而不是用 bundle 报告来责怪某个组件。在 Main 火焰图(Main flame chart)中,越宽的条表示耗时越长,堆叠条表示调用栈。任务上的红色三角标识潜在长任务;选中它并跟随发起代码链接。保存前后追踪以证明有意义的改进。
在动作之前开始录制,并在可见结果出现后停止。
保持路由、账号状态和动作顺序一致。
把每个主要成本分配给能够修改它的团队或供应商。
把追踪当作工作队列来阅读
长任务是一个调查阈值,而不是完整诊断。W3C 的 Long Tasks 规范将持续 50 毫秒或以上的任务报告为长任务。深入查看一个任务下的 JavaScript 求值、事件处理器、样式重算、布局或绘制。调用栈指明从哪里开始;时间信息显示问题是代码、渲染,还是第三方 iframe 导致的。
优先处理在有价值的交互中反复出现的成本。短的处理器仍可能因为触发布局或排在之前的工作后面而感觉缓慢。追踪是实验室测量,因此要在代表性设备上并在可用时结合注重隐私的现场遥测来确认修复效果。
启动时的解析需要与点击后处理的不同修复策略。
在重构前找到重复的写样式/读布局模式。
把追踪、场景和主要成本附到工作项里。
在关键时刻交付更少代码
按路由和用途清点脚本。移除未使用的包、重复项、已下线的实验和已结束功能的代码。然后把路由特定或很少使用的功能拆分开,让它们在需要时加载,而不是在初始路径中加载。动态加载可减少启动工作,但在用户立即需要功能时可能产生可见延迟。
问问自己一个组件是否真的需要完整的客户端框架、一个工具库是否重复了已有能力,以及静态 HTML 加少量增强是否足够。测试延迟模块的回退状态。页面应优雅地推迟可选能力,而不是显示一个失效的控制项。
记录每个路由允许加载的脚本及其原因。
对可选编辑器、地图、播放器或报告视图考虑此做法。
测试认证、无障碍、支付和表单完成;在控件受影响时寻求合格评审。
把工作拆分,使浏览器能响应
把小函数命名并不会在同步运行时创建多个浏览器任务。对于长循环,要把工作分批、先更新用户可见的立即状态,然后在继续之前让出(yield)。这允许浏览器在批次间处理输入和渲染。
在支持的环境下,scheduler.yield() 可以让出主线程并在稍后继续工作;要进行特性检测并为不支持的浏览器提供回退方案。不要在每个微小操作后都让出:这有开销,可能会增加完成时间。从测量中选择合适的边界,保留取消能力,并避免过时结果覆盖更新状态。
在不可见的后续工作前先显示接受或进度反馈。
在测得工作即将变长前让出,而不是每项后都让出。
当前 web.dev 指南不建议基于 isInputPending() 的新策略。
把计算移动到 worker,但别移动界面逻辑
Web Worker 在与主执行线程分离的后台线程上运行脚本。它适合耗费 CPU 的解析、数据转换、搜索索引和其他不需要直接访问界面的计算。传入定义的输入,返回定义的结果,并把渲染和可见状态变更保留在主线程上。
Workers 并非全能。它们不能直接操作 DOM 或使用 Window,且通用消息通信会复制数据。Worker 的创建、数据移动和错误协调可能会超过一次小型计算的开销。测量完整交互、终止不再需要的 worker,并在 worker 失败时设计回退方案。
从输入和输出可以序列化并可测试的计算开始。
丢弃为较旧的过滤器、路由或动作产生的结果。
通过正常界面传达有意义的进度信息。
把第三方 JavaScript 当作生产依赖来治理
分析、广告、实验、社交嵌入、视频播放器和客服小组件都会增加请求、JavaScript 求值、iframe 和依赖项。供应商脚本可能必不可少,但不在应用团队的直接控制范围内,并可能影响性能、隐私、安全与业务连续性。清点其用途、适用路由、加载条件、审批人、同意要求和负责移除的人员。
在条件与合同允许的情况下,对比代表性页面在有无某个第三方源时的表现。性能工具可以暴露昂贵的求值、负载和长任务归因。仅当文档化的价值能证明经过测量的成本时,保留轻量或延迟集成。可选依赖变慢或缺失时,确认核心内容和主要事务仍能正常工作。
仅在需要的路由和条件下加载标签。
把标签管理器的更改纳入性能、隐私、安全和回滚评审。
记录并测试如何禁用非关键集成。
把响应性当作发布保护点
把成功的追踪做成对重要路径的小型回归校验。定义覆盖的交互、设备或 CPU 约束、预期响应和评审者。把它与 bundle 和第三方清单复核配对,防止新包或标签悄然重新引入主线程工作。
Status Is UP 使用这些证据进行主动优化和安全修复,而不是替代在线可用性监控。在高风险变更前,准备回滚并在发布后验证关键流程。结果会随设备、网络、浏览器、内容和账号状态不同;把阈值当作护栏(guardrails),而非保证。
对共享导航、结账、搜索或大型 bundle 要求提交前后追踪。
了解能恢复到已知良好行为的功能标志、标签设置或部署版本。
在重大发布、供应商变更或设备组合变化后重新分析。
