PRPL模式
PRPL 是四个英文单词的首字母缩写，它描述了一种可以提高网页加载速度和交互性的模式
- Preload：高优先级加载关键资源。
- Render：关键资源下载完后尽快渲染。
- Pre-cache：预缓存非关键资源。
- Lazy load：延迟加载非关键资源。
Preload
通过在<head>中添加以下<link>标签来预加载资源
html
<link rel="preload" as="fetch" href="url/to/preload">浏览器会缓存预加载的资源，在不推迟 window.onload 事件的情况下尽快下载它，以便在需要时立即可用。
as取值参考：MDN
as省略或使用无效值，可能导致某些资源（例如脚本）被获取两次。
预加载适用于浏览器较晚发现的资源，例如在style中的font、image，在js中fetch的文件。
Render
JS会阻塞DOM解析，CSS会阻塞DOM渲染、JS执行。通过内联关键的JS、CSS来减少白屏时间。
缺点是内联的JS、CSS不会被浏览器缓存。
另一种方法是服务端渲染（SSR），先展示内容，再加载JS。
缺点是会增加HTML的大小；内容渲染后仍要等JS执行，用户才可以交互。
如果页面首屏是静态的，还可以省略服务端，仅做客户端预渲染（骨架屏），同样是先展示内容，再加载JS。
由于每种方案都有利弊，没有最优解。最终方案需要考虑应用的特征，权衡利弊，选择恰当的方案。
Pre-cache
除了浏览器根据HTTP协议头Cache-Control、Expires进行特定条件下的静态资源缓存控制，现代浏览器可以通过Service Worker+Cache等API 实现前端可编程的缓存控制，不仅是缓存，还能实现离线访问，明显提高页面性能。
Lazy load
无论上述优化做到什么程度，过多的内容渲染、JS执行都会造成浏览器性能表现缓慢。
懒加载（延迟加载）是这个问题的解决办法：
- CSS、JS文件拆分后，按需加载
- 图片懒加载：延迟屏幕外的图片加载
随着开发经验的增长，实践中还会遇到一些特定情景下的问题及相关概念：
- DOM节点过多，使用虚拟列表
- 应用功能足够复杂，使用微前端