PRPL 是四个英文单词的首字母缩写,它描述了一种可以提高网页加载速度和交互性的模式

  • 推送 (Push)(或预加载)最重要的资源。
  • 尽快渲染 (Render)  初始路线。
  • 预缓存 (Pre-cache)  剩余资产。
  • 延迟加载 (Lazy load)  其他路线和非关键资产。

预加载关键资源

尽快渲染初始路线

找出FP渲染的关键元素,将会阻塞其渲染的 js 和 css 都通过 async 延后加载

另一种改进 First Paint 的方法是在服务器端渲染页面的初始 HTML。SSR

预缓存技术

通过充当代理,服务工作进程可直接从缓存中获取资产,而不用在重复访问时从服务器获取。这不仅可以使用户在离线时使用您的应用程序,而且还可以在重复访问时加快页面的加载速度。

没懂怎么用的

延迟加载

  • 对大包进行拆分,预加载关键资源、延迟加载不重要的代码块,具体操作比如 React.lazy 和 vue 的懒加载,css 的话可以使用 js 延迟加载