Web 性能优化：Preload与Prefetch的使用及在 Chrome 中的优先级

 

 

今天，我们将深入研究Chrome 的网络栈，以明确 web 加载原语(如<link rel= preload > & <link rel= prefetch >) 背后的工作原理，以便你能够更有效地使用它们。

如其他文章所述，preload 是一个声明式 fetch，可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源。

Prefetch 告诉浏览器这个资源将来可能需要，但是什么时间加载这个资源是由浏览器来决定的。

在预加载(perload)之前，网络请求从这里开始，预加载之后，它在解析时从左向右移动

 

 

使用预加载(perload)的一些案例

在详细介绍 预加载(perload) 之前，先来看看一些使用 预加载(perload) 的案例。

http://Housing.com 在对他们的渐进式 Web 应用程序的脚本转用 proload 看到大约缩短了10%的可交互时间。

 

 

Shopify 使用 preload 加载 Web字体后，Chrome 桌面版)的文本绘制时间(1.2秒)提高了50%，这完全解决了他们的文字闪动问题。

 

 

左边：使用 preload，右边：不使用 preload

 

 

使用<link rel="preload"> 加载字体

Treebo，印度最大的旅馆网站之一，在 3G 网络下对其桌面版试验，在对其顶部图片和主要的 Webpack 打包文件使用 preload 之后，在首屏绘制和可交互延迟分别减少了 1s。

 

 

同样的，在对自己的渐进式 Web 应用程序主要打包文件使用 preload 之后，Flipkart 在路由解析之前 节省了大量的主线程空闲时间（在 3G 网络下的低性能手机下）。

 

 

上面：没有使用 proload 加载，下面：使用 preload 加载

Chrome 数据保护程序团队发现，对于那些可以在脚本和 CSS 样式表上使用 preload 的页面，发现页面首次绘制时间获得平均 12% 的速度提升。

对于 prefetch(预读取)，它被广泛使用，在 Google 我们仍用它来预读取一些可