共计 1460 个字符，预计需要花费 4 分钟才能阅读完成。
PRPL 是一种让网页加载变得可交互、更疾速的模式，蕴含以下四个:
- Push (或者 preload): 给用户推送最重要的资源
- Render: 尽快的渲染最初始的路由
- Pre-cache: 提前缓存残余的资源
- Lazy load: 懒加载其余路由或者主要资源
本文咱们将学习这些技术的综合使用，当然也能够独自应用。
预加载重要资源 (Preload)
Preload 是一个申明性质的 fetch request，告知浏览器要尽可能快的申请到该资源。能够通过以下形式预加载重要资源，应用 <link> 标签，带上 rel="preload" 的属性，放在 <head> 标签中。
<link rel="preload" as="style" href="css/style.css"> 浏览器会给这个资源分配更高的优先级，而且不影响 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…
