PRPL 模式加快 Web 应用加载
source link: https://www.infoq.cn/article/e0aAVUQKTmqDIhdeUHAo
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
PRPL 是一种用于结构化和交付 Web 应用程序和渐进式 Web 应用（PWA）的模式，重点在于改进应用的交付和启动性能。这个模式包含一组步骤，以实现快速、可靠、高效的加载：
-
Push，推送初始路由所需的所有资源，并且只推送这些资源，以确保它们尽早可用。
-
Render，在加载其他资源之前，渲染初始路由并使其具备交互能力。
-
Pre-cache，预缓存用户可能访问的其他路由的资源，从而在恶劣的网络条件下尽可能提高对后续请求的响应能力和弹性。
-
Lazy-load，当用户请求时，按需延迟加载路由；关键路由的资源应立即从缓存中加载，而相对不常用的资源可以根据请求从网络获取。
注意：PRPL模式是由Polymer团队于2016年首次引入的，但已被证明适用于其他许多技术栈。
PRPL 模式加载顺序
服务器和服务 Worker 一起为非活动路由预缓存资源。当用户切换路由时，应用会延迟加载尚未缓存的所有必需资源，并创建所需的视图。
Twitter.com 自 2017 年以来就在生产中使用 PRPL 模式了。下面我们可以看到，他们对关键脚本使用了粒度代码拆分，并使用<linkrel=preload>推送脚本以尽快让脚本可用：
PRPL 模式：预加载关键脚本
其他路由会按需延迟加载。Twitter 在整个用户体验部分中会按需提供 40 多个块。Twitter 还使用服务 Workers 对其他路由进行（离线）资产预缓存，以提高对后续导航操作的响应能力：
PRPL 模式：离线缓存资源
他们的应用程序外壳程序（骨架 UI）也是离线缓存的，就算用户通过缓慢或不稳定的网络连接加载站点，也会立即加载它们：
PRPL 模式：应用程序外壳
为什么选择 PRPL？
应用使用 PRPL 构建是为了达到可靠、快速和引人入胜的目的。除了这些基本目标，PRPL 还旨在：
-
改善应用的交互就绪水平。为了做到这一点，在第一个视图渲染并具备交互能力之前，不会向浏览器发送多余的资源。
-
提高应用的缓存效率，尤其是长期缓存效率。为了做到这一点，资源会以很细的粒度向浏览器发送。当资源被解绑或松散地打包时，对代码的每次更改给缓存的负面影响也会减少。
-
降低开发和部署的复杂性。为了做到这一点，这种模式使用应用的隐式依赖图将每个入口点精确映射到所需的资源集，从而减少或消除了手动管理打包和交付的需求。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK