性能优化小册 - 让页面更早的渲染:使用 preload 提升资源加载优先级

preload 是一个新的 Web 标准,旨在提高性能以及提供给 web 开发者更多的细粒度加载控制。它可以使开发者自定义加载逻辑而避免以 script 标签加载资源所带来的性能损耗。

preload 可以指明哪些资源在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。

preload 提供的好处主要是:

  • 将加载和执行分离,可不阻塞渲染和 documentonload 事件。
  • 提前加载指定资源,不再出现依赖的 font 字体隔了一段时间才刷出。
  • 可以去更早地加载晚出现的资源。

哪些类型的资源可以使用 preload?

  • vaudio: 音频文件。
  • document: 一个将要被嵌入到