【前端性能优化指南】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 ✨ 仓库中，陆续会将内容同步到掘金上。若是但愿尽快阅读相关内容，也能够直接去该仓库中浏览。