阅读 350

【前端性能优化指南】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. 针对各类资源的性能优化 🚀

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

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

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


「性能优化」系列内容

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

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

  3. 如何加快请求速度?

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

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

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

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

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

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

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

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

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

  8. 尾声

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


关注下面的标签,发现更多相似文章
评论