PRPL 是四个英文单词的首字母缩写,它描述了一种可以提高网页加载速度和交互性的模式
- 推送 (Push)(或预加载)最重要的资源。
- 尽快渲染 (Render) 初始路线。
- 预缓存 (Pre-cache) 剩余资产。
- 延迟加载 (Lazy load) 其他路线和非关键资产。
预加载关键资源
尽快渲染初始路线
找出FP渲染的关键元素,将会阻塞其渲染的 js 和 css 都通过 async 延后加载
另一种改进 First Paint 的方法是在服务器端渲染页面的初始 HTML。SSR
预缓存技术
通过充当代理,服务工作进程可直接从缓存中获取资产,而不用在重复访问时从服务器获取。这不仅可以使用户在离线时使用您的应用程序,而且还可以在重复访问时加快页面的加载速度。
没懂怎么用的
延迟加载
- 对大包进行拆分,预加载关键资源、延迟加载不重要的代码块,具体操作比如 React.lazy 和 vue 的懒加载,css 的话可以使用 js 延迟加载