[JavaScript知识库]前端性能：PRPL模式

PRPL模式

概念

• PRPL模式是一种让网页加载变得可交互、更快速的模式。
• Push或Preload：给用户推送最重要的资源；
• Render：尽快渲染最初始的路由，使网页有交互能力；
• Pre-cache：提前缓存剩余的资源；
• Lazy-load：懒加载其他的路由或者次要的资源。

Preload

• Preload是一个声明性质的fetch request，告诉浏览器尽快请求该资源。

  <link rel="preload" as="style" href="css/style.css">
  

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

Render

• 如果资源加载的时间过长而影响到首屏渲染时，LightHouse会提供警告。

• 有两种方法可以减少首屏渲染时间：

  1. 重要资源使用inline方式去获取，其他可以采用async的方式异步加载，减少与服务器交互的次数，避免渲染被阻塞。

     缺点：这些代码无法被单独缓存，不利于开发维护。

  2. 服务端渲染储实路由，可以给用户立马展现内容，其他资源继续下载解析执行。

     缺点：加大HTML文件的有效负载（payload），因为用户只能看到页面底饿内容展示，css和js还在后来加载执行，需要等待load完成后才能进行交互。

Pre-cache

• 通过service-worker来优先从缓存中获取资源。
• 第三方库workbox来将service-worker集成到项目中。

Lazy-load

• 当网站加载了太多资源，如大量JavaScript文件，会消耗浏览器很多的时间去解析和执行。
• 为了加快首屏速度，可以将bundle拆分，将首屏的bundle优先加载，然后按需加载其他bundle。
• 可以给重要的chunk加上preload，这样浏览器又会提高优先级。
• 除此之外，如果有大量屏幕外的图片，可以考虑延后加载这些图片。

适用场景（哪类文件适用

• 每个路由的入口文件。如按下导航栏的切换按钮再请求。
• 文件的大小很小。因为它将由不同的URL提供，因此会被多次缓存。
• 延迟加载的应用片段。
• 代表特定视图的代码。例如，主应用的某些部分再第一次绘制不重要，直到用户交互才出现。如菜单。