性能文章>使用 PRPL 模式实现即时加载>

使用 PRPL 模式实现即时加载转载

9月前
264201

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

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

本指南介绍了解每种技术的组合使用方式,以及它们依然可以独立使用来取得想要的性能结果。

使用 Lighthouse 审计页面 #

运行 Lighthouse 来识别与 PRPL 技术一致的改进机会:

  1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  2. Click the Lighthouse tab.

  3. 选中 PerformanceProgressive Web App 复选框。

  4. 单击 Run Audits 来生成报告。

有关更多信息,请参阅《使用 Lighthouse 发现性能机会》一文。

预加载关键资源 #

如果某个资源被解析和延迟获取,Lighthouse 会显示以下失败的审计:

Lighthouse:预加载关键请求审计

Preload 是一个声明性的获取请求,它会告诉浏览器尽快请求资源。通过在 HTML 文档头部添加带有 rel="preload"<link> 标签来预加载关键资源:

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

 

尽快渲染初始路线 #

如果存在延迟首次绘制(First Paint,即网站将像素呈现到屏幕的那一刻)的资源,Lighthouse 会发出警告:

Lighthouse: 消除渲染阻塞资源审计

为了改进 First Paint,Lighthouse 建议内联关键 JavaScript 并使用 async 推迟其余部分,以及内联首屏使用的关键 CSS。这样可以消除到服务器的往返,从而获取阻塞渲染的资产,提高性能。但是从开发的角度来看,内联代码更难维护,并且无法被浏览器单独缓存。

另一种改进 First Paint 的方法是在服务器端渲染页面的初始 HTML。这会在仍在获取、解析和执行脚本时立即向用户显示内容。但是,这会显着增加 HTML 文件的有效负载,可能会损害 Time to Interactive ,或者影响到应用程序变得可交互并可以响应用户输入所需的时间。

降低应用程序中的 First Paint 并没有固定的单一解决方案。只有在对应用程序利大于弊的情况下,您才应该考虑使用内联样式和服务器端渲染。您可以通过以下资源了解有关这两个概念的更多信息。

  • 优化 CSS 交付
  • 什么是服务器端渲染?
带服务工作进程的请求/响应

预缓存资产 #

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

使用第三方库来简化生成服务工程进程的过程,除非这些库所无法满足您那些更复杂的缓存需求。例如, Workbox 提供了一组工具,可以让您创建和维护服务工作进程来缓存资产。有关服务工作进程和离线可靠性的更多信息,请参阅可靠性学习路径中的服务工作进程指南。

延迟加载 #

如果您通过网络发送的数据太多,Lighthouse 会显示审计失败。

Lighthouse:网络有效负载过大的审计

这包括所有资产类型,但由于浏览器解析和编译大型 JavaScript 有效负载需要时间,因此尤其消耗尤其严重。 Lighthouse 还会在适当的时候为此提供警告。

Lighthouse:JavaScript 启动时间审计

要发送仅包含用户最初加载应用程序所需代码的较小 JavaScript 有效负载,请根据需要拆分整个包并延迟加载代码块。

一旦成功拆分数据包,请预加载更重要的代码块(请参阅预加载关键资产指南)。预加载可确保浏览器更快地获取和下载更重要的资源。

除了按需拆分和加载不同的 JavaScript 代码块外,Lighthouse 还提供对延迟加载非关键图像的审计。

Lighthouse:延迟加载屏幕外图像审计

如果您在网页上使用了许多图像,请在加载页面时延迟加载所有位于首屏下方或设备视区之外的图像(请参阅使用 lazysizes 来延迟加载图像)。

接下来的步骤 #

现在您了解了 PRPL 模式背后的一些基本概念,请继续阅读本节中的下一个指南以了解更多信息。重要的是要记住,并非要一次性使用所有的技术。对以下任何一项所做的任何努力都将提供显著的性能改进。

  • 推送(或预加载)关键资源。
  • 尽快渲染初始路线。
  • 预缓存剩余资产。
  • 延迟加载其他路线和非关键资产。
 
点赞收藏
分类:标签:
风之石
请先登录,感受更多精彩内容
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

字节跳动 DanceCC 工具链系列之Xcode LLDB耗时监控统计方案

字节跳动 DanceCC 工具链系列之Xcode LLDB耗时监控统计方案

关于对前端稳定性建设的一些总结

关于对前端稳定性建设的一些总结

一次有趣的 DNS 导致 Node 服务故障问题分析实录

一次有趣的 DNS 导致 Node 服务故障问题分析实录

字节前端监控SDK体积与性能优化实践

字节前端监控SDK体积与性能优化实践

W3C规范成熟不同阶段的Web性能API参考

W3C规范成熟不同阶段的Web性能API参考

优先级反转那些事儿

优先级反转那些事儿

1
0