Web 性能

先测量再优化：加载期与运行期的手段，以及「先优化用户能感知的那一段」的判断原则。

被 0 篇文章引用性能优化869 字2026-10-12全部知识点

Web 性能#

Web 性能衡量两件事：加载有多快（load time）与 跑起来顺不顺（runtime）。

1. 先测量，再优化#

「感觉慢」不是依据。要先拿到数字：

工具看什么
浏览器 DevTools · Performance主线程在忙什么、有没有长任务
DevTools · Network哪个资源最慢、体积多大
Lighthouse综合评分与改进建议
performance.now()代码里埋点，量具体某段耗时

2. 加载期的常见手段#

<!-- 非关键资源延后 -->
<script src="app.js" defer></script>
<link rel="preload" as="font" href="font.woff2" crossorigin>

· 减少体积：压缩、tree-shaking、只加载当前页需要的代码（代码分割）； · 减少请求数：合并小文件、用字体子集； · 利用缓存：给静态资源加内容 hash 的长期缓存头。

3. 运行期的常见手段#

· 别阻塞主线程：长任务拆小块，或用 Web Worker； · 避免布局抖动：不要「读一次布局 → 写一次样式」反复循环； · 动画用 transform / opacity（能走合成层，不触发重排重绘）； · 事件节流 / 防抖：滚动与输入类事件尤其需要。

4. 一个判断原则#

先优化「用户能感知到的那一段」。 用户感知最强的是首屏何时可用， 不是「全部资源何时加载完」—— 后者往往优化了半天，用户毫无感觉。

参考：MDN · Web performance

引用了这个词条的文章

还没有文章提到它。