页面加载性能之PRPL模式

PRPL是一种让网页加载变得可交互、更快速的模式，包含以下四个:

• Push (或者 preload): 给用户推送最重要的资源
• Render: 尽快的渲染最初始的路由
• Pre-cache: 提前缓存剩余的资源
• Lazy load: 懒加载其他路由或者次要资源

本文我们将学习这些技术的综合运用，当然也可以单独使用。

预加载重要资源 (Preload)

Preload 是一个声明性质的fetch request，告知浏览器要尽可能快的请求到该资源。可以通过以下方式预加载重要资源，使用 标签，带上 rel="preload" 的属性，放在 标签中。

浏览器会给这个资源分配更高的优先级，而且不影响 window.onload 的事件执行。

尽可能快的渲染初始路由 (Render)

如果你的资源影响了你的 First Paint，Lighthouse会给你一个警告。

Lighthouse建议，使用重要的资源使用inline的内嵌的方式，而其他资源可以采用 async 的方式异步加载。这样可以有效地减少与服务器的交互次数，避免渲染被阻塞，不过也有个缺点，就是这些代码无法被单独缓存，也不利于开发维护。

另一种方式提升首屏的速度就是服务端渲染 (server-side render) 你的初始路由。这样可以给你的用户立马展现内容，其他资源也依然会下载、解析并执行。但这样会大大的加大HTML文件的有效负载 (payload)，影响页面可交互的时间 (Time to Interactive)，因为用户看到的页面只是内容的展示，等js和css全部执行完，load事件回调完毕，页面才可以交互。

没有一个单一的正确的答案来减少首屏时间，选择内联资源或者是服务端渲染，还是看对你的网页带来的收益与缺点的一个权衡。

提前缓存资源 (Pre-cache)

通过激活一个代理，service worker 可以帮你优先从缓存中获取资源，这不仅仅是应用在离线上，用户第二次访问的速度也能大大提升。

可以使用google提供的三方库 workbox 来将 service worker 集成到你的项目中。想要了解更多相关的，可以参考：https://web.dev/service-worke... 。

懒加载 (Lazy load)

如果你的网站加载了太多的资源，Lighthouse会提示你:

这包括所有类型的资源，但特别大的 JavaScript 会消耗浏览器很多时间去解析和执行，Lighthouse会有另一种提示:

为了首次加载更小的JavaScript，可以尝试拆分bundle，按需加载剩下的资源。

如果你成功的拆分了bundle，给重要的chunk加上preload，浏览器会提高下载的优先级。

在js都拆分了之后，懒加载也都加上了，你可能还会遇到下面的问题:

如果你的网页上有很多图片，请把屏幕之外的图片都延后加载。详情可以参考：https://web.dev/use-lazysizes...

总结

你应该已经对PRPL的模式有了一定的了解，要记住的是并非所有技术都要去实施，以下任何方面的优化对性能都有显著的提升:

• Push (或者 preload): 给用户推送最重要的资源
• Render: 尽快的渲染最初始的路由
• Pre-cache: 提前缓存剩余的资源
• Lazy load: 懒加载其他路由或者次要资源

参考

• https://developers.google.com...
• https://web.dev/apply-instant...