1. 为什么弃用 onload？首屏采集的底层机制#

在现代 Vue/React 单页应用中，window.onload 或 DOMContentLoaded 无法真实反映“核心业务数据渲染完毕”的时刻。真实体感首屏的采集，需利用 **JavaScript 事件循环（Event Loop）与宏任务（Macro Task）**的特性：

• 机制剖析：维护一份动态的“资源观测清单”（包含 Fetch 请求、长任务等）。在加载早期启动一个 setTimeout 宏任务轮询（如每 50ms 检查一次）。
• 为什么是 setTimeout：Vue 的 DOM 渲染（nextTick）依赖微任务。当 setTimeout 的回调被推入调用栈且资源清单为空时，意味着上一轮的微任务已全部清空，且浏览器的 Paint（绘制）阶段已完成，主线程真正处于空闲状态。此时记录的时间才是准确的首屏时间。

2. 诊断三板斧#

• 网络面板 (Network)：寻找大于 500KB 的“巨石包”（阻塞下载），或者小于 1KB 的碎片包（浪费 HTTP 请求头开销）。
• 性能面板 (Performance)：寻找红色的“长任务”（执行超 50ms），分析调用栈，揪出阻塞主线程的元凶。
• 覆盖率面板 (Coverage)：找出已被下载但未执行的标红代码，精准定位未能正确“按需加载”的组件。

1. Webpack 分包与 Tree-shaking 的真相#

• 拆包甜点区间：利用 optimization.splitChunks，将 Chunk 体积控制在 20KB ~ 500KB 之间。用 maxSize 防御下载阻塞，用 minSize 防御请求碎片化。
• maxSize** 的软约束陷阱**：Webpack 无法物理劈开一个不可分割的单一模块（如重达 1MB 的旧版全量图标库）。遇到这种情况，必须在业务层接入按需编译（如 unplugin-icons 将图标编译为 Vue 单文件组件）来替代全量引入。
• 按需加载防线：弹窗、抽屉等非首屏组件，必须通过 defineAsyncComponent(() => import('...')) 进行隔离拆包。

2. 打赢“缓存保卫战”：Hash 稳固三步曲#

为了让静态资源在客户端长久生效，必须锁定构建产物的 Hash，避免“改了一行代码，全站缓存失效”：

1. 摒弃自增 ID：开启 moduleIds: 'deterministic' 和 chunkIds: 'deterministic'，用基于文件路径的确定性哈希代替脆弱的数字序号。
2. 剥离运行时：配置 runtimeChunk: 'single'，将维护模块映射关系的运行时代码单独抽离，防止深层异步路由的修改牵连入口主包。
3. 拥抱内容哈希：输出文件名强制使用 [contenthash]，确保内容不变，Hash 永不变。

3. Nginx 动静分离双层缓存策略#

在构建端锁死 Hash 后，配合 Nginx 释放最激进的缓存威力：

• 针对 index.html（入口调度员）：绝对不缓存。设置 Cache-Control: no-cache, no-store, must-revalidate，确保每次访问都能拉取到最新的 JS 资源 Hash 路径。
• 针对带 Hash 的静态资源：极致强缓存。设置 Cache-Control: public, max-age=31536000, immutable，让浏览器在一年内死死咬住本地磁盘缓存，二次访问耗时趋近于 0ms。

1. 破解主线程卡顿：长任务（Long Task）切片#

遇到无法避免的海量数据同步处理，必须学会向主线程“让步”（Yielding），避免页面冻结：

• 编写让步函数：const yieldToMain = () => new Promise(resolve => setTimeout(resolve, 0))。
• 将 10 万次循环切分为每批 1000 次，批次之间 await yieldToMain()，让浏览器有机会在间隙中响应用户交互和执行渲染。

2. Vue 响应式陷阱与渲染优化#

• 斩断深层响应式：遇到庞大且无需修改的只读数据（如省市区字典），在 Vue 2 中使用 Object.freeze()，在 Vue 3 中使用 shallowRef，避免劫持引发的 CPU 灾难。
• DOM 爆炸陷阱：废弃全局 SVG <use> symbol 引用（它会克隆庞大的 Shadow DOM 树并引发强制同步布局），改用内联 SVG 组件或 CSS Masking。
• 按需挂载：对于重型弹窗，结合 v-if（控制首次懒挂载）与 v-show（控制二次复用），避免反复销毁重建的开销。

3. 极端环境的降维打击：假虚拟滚动#

在老旧机器面对海量表格（如 100 行 ×40 列）时，传统虚拟滚动的 scroll 事件和原生滚动条合成依然会造成闪烁撕裂。

• 妥协方案（模拟滚动）：容器 overflow: hidden 封死原生滚动。内部永远只渲染固定 15 行的 DOM。
• 数据驱动：监听 wheel 滚轮事件拦截并阻止默认行为，仅通过修改 startIndex，利用 slice 切割出对应的 15 条数据交给 Vue 响应式替换文本。
• 视觉欺骗：通过计算 pageSize / totalLength 得出滑块高度，通过 startIndex / maxIndex 得出滑块位移，手工用 div 绘制一条假滚动条。

1. 自动化流水线（CI/CD）拦截#

• 包体积红线（Bundle Size）：在 CI 中集成 size-limit，规定 chunk-vendors.js 不超过 500KB，主入口不超过 200KB。一旦超标，立刻抛出 Exit Code 1 阻断代码合并。
• 跑分红线（Lighthouse CI）：在测试环境部署后触发无头浏览器跑分，锁定 LCP 和 TBT 等核心 Web Vitals 指标阈值。

2. AI Code Review 前置兜底#

提取典型的性能“反模式”，编写专属的 Cursor/GitLab AI 审查提示词（Prompt）：

• 拦截串行：审查 mounted 中的多个 await fetch，强制建议改为 Promise.all 并行。
• 拦截全量引入：审查路由和主页面，若发现同步 import 弹窗或重型库，强制建议改为 defineAsyncComponent。
• 拦截昂贵 CSS：审查新增的 filter: blur() 或大面积阴影，要求提供降级方案。

💡 结语：前端性能优化是一场综合了计算机网络、浏览器渲染引擎与框架底层的全栈博弈。不盲目追求实验室跑分，而是基于真实用户环境，在“加载的快”、“运行的流畅”与“业务的可用性”之间寻找最优雅的平衡。

优化流程与具体操作总结：

基础设施层（快与省）#

• 协议升级：启用 HTTP/2，利用多路复用减少连接开销。
• 传输优化：开启 Brotli 压缩（优于 Gzip）；静态资源全量接入 CDN。
• 缓存策略：除 HTML 和配置外，静态资源统一使用强缓存。
• 图片优化：格式全面迁移至 WebP。

资源体积与加载策略（精细拆分）#

• 代码分割：确保所有路由使用 import() 动态加载；控制单个 Chunk 大小在合理区间（避免过大或过小）。

• 微前端治理：在模块联邦（Module Federation）中，仅加载必要的子应用 remoteEntry。

• 瘦身减负：

  • Tree-shaking：排查并替换不支持按需引入的 NPM 包。
  • 图标审计：将 966 个字体图标删减至 574 个，并移除昂贵的 SVG symbol 重用机制。

脚本执行与主线程（释放算力）#

• 长任务拆解：通过 Performance 面板定位耗时超过 50ms 的函数，将其异步化或分批处理。
• 延迟初始化：将首屏非必须的全局配置或初始化逻辑改为懒加载执行。

渲染与业务逻辑（体验优化）#

• 视觉降级：移除昂贵的 CPU 消耗项，如 SVG 路径动画 和 CSS 高斯模糊 (filter: blur)。
• 大数据处理：引入虚拟滚动表格；在极端性能环境下，采用「数据切换」模拟滚动以彻底减少 DOM 压力。
• 串行转并行：排查业务代码，将无依赖关系的 await 接口请求改为并行触发，减少链路总耗时。