【前端性能优化指南】5 - 静态资源的优化

上一站 - 页面解析与处理

在旅程的上一站中，我们介绍了基本的页面解析机制，通过对资源加载顺序和脚本加载的控制，避免了无谓的阻塞，优化了解析性能。

也正如上一站中所说，这时浏览器除了解析页面 DOM 外，还会对页面包含的静态资源发起请求，请求回来后会执行或使用资源。这一站咱们就来具体看看这个阶段。

首先还是从宏观上来了解一下：

1. 总体原则

这一部分会涉及到各类常见的静态资源：JavaScript 脚本、CSS 样式表、图片、字体等。不同资源的优化措施既有联系又有差别，后续会以各类资源为维度，针对性介绍其优化的关注点和手段。

但咱们还是要先从整体维度上进行一些分析。其实在总体原则上，各类资源的优化思路都是大体类似的，包括但不限于：

• 减少不必要的请求
• 减少包体大小
• 降低应用资源时的消耗
• 利用缓存

为了大家能更好理解各类优化实施策略从何而来，先初步扩展一下以上的思路。

1.1. 减少不必要的请求

核心是希望能够减少请求的数量，因为浏览器对同源请求有并发上限的限制（例如 Chrome 是6），所以在 HTTP/1.1 下，请求过多可能会导致请求被排队了。一个典型场景就是一些图库类型的网站，页面加载后可能需要请求十数张图片。

同时，TCP/IP 的拥塞控制也使其传输有慢启动（slow start）的特点，连接刚建立时包体传输速率较低，后续会渐渐提速。因此，发送过多的“小”请求可能也不是一个很好的做法。

减少不必要的请求主要分为几个维度：

• 对于不需要使用的内容，其实不需要请求，否则相当于做了无用功；
• 对于可以延迟加载的内容，不必要现在就立刻加载，最好就在需要使用之前再加载；
• 对于可以合并的资源，进行资源合并也是一种方法。

1.2. 减少包体大小

包体大小对性能也是有直接影响的。显然同样速率下，包体越小，传输耗时越低，整体页面加载与渲染的性能也会更好。

减少包体大小常用的方式包括了：

• 使用适合当前资源的压缩技术；
• 避免再响应包体里“塞入”一些不需要的内容。

1.3. 降低应用资源时的消耗

以上主要的关注点都在页面资源加载的效率，其实有些时候，浏览器去执行或使用资源的也是有消耗的。例如在 JavaScript 执行了一段 CPU 密集的计算，或者进行频繁的 DOM 操作，这些都会让 JavaScript 的执行变成影响性能的一大问题。虽然今天的像 V8 这样的引擎已经很快了，但是一些不当的操作仍然会带来性能的损耗。

此外，像是 CSS 选择器匹配、图片的解析与处理等，都是要消耗 CPU 和内存的。也许这些不太常成为性能杀手，但是某些特性场合下，了解它们也许会对你有所帮助。

1.4. 利用缓存

还记得咱们这趟旅程从哪出发的么？没错，缓存。

在旅程的第一站，我们介绍了浏览器访问一个 url 时的多级缓存策略。千万不要忘了，这些静态子资源也是网络请求，它们仍然可以利用之前介绍的完整缓存流程。缓存在很多时候会是一个帮你解决性能问题的非常有效的手段。

由于第一站已经对缓存进行了详细介绍，所以缓存这部分，在这一站里只会在针对资源类型再补充一些内容。

2. 针对各类资源的性能优化

以上的原则可以指导我们针对性地优化各类资源。下面我就以资源类型为维度，详细介绍其中涉及到的优化点与优化措施。

如果你一口气读到这里，可能有些累了。不如先伸个懒腰放松下，整理回忆一下之前的内容。

如果准备好了，咱们就继续出发吧

• JavaScript 优化
• CSS 优化
• 图片优化
• 字体优化
• 视频优化

---

「性能优化」系列内容

1. 带你全面掌握前端性能优化

2. 如何利用缓存减少远程请求？

3. 如何加快请求速度？

4. 如何加速页面解析与处理？

5. 静态资源优化的总体思路是什么？(本文)

   5.1. 如何针对 JavaScript 进行性能优化？

   5.2. 如何针对 CSS 进行性能优化？

   5.3. 图片虽好，但也会带来性能问题

   5.4. 字体也需要性能优化么？

   5.5. 如何针对视频进行性能优化？

6. 如何避免运行时的性能问题？

7. 如何通过预加载来提升性能？

8. 尾声

目前内容已全部更新至 ✨ fe-performance-journey ✨ 仓库中，陆续会将内容同步到掘金上。如果希望尽快阅读相关内容，也可以直接去该仓库中浏览。

---