PRPL模式加快Web應用加載

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"PRPL是一種用於結構化和交付Web應用程序和漸進式Web應用（PWA）的模式，重點在於改進應用的交付和啓動性能。這個模式包含一組步驟，以實現快速、可靠、高效的加載："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Push"},{"type":"text","text":"，推送初始路由所需的所有資源，並且只推送這些資源，以確保它們儘早可用。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Render"},{"type":"text","text":"，在加載其他資源之前，渲染初始路由並使其具備交互能力。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Pre-cache"},{"type":"text","text":"，預緩存用戶可能訪問的其他路由的資源，從而在惡劣的網絡條件下儘可能提高對後續請求的響應能力和彈性。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Lazy-load"},{"type":"text","text":"，當用戶請求時，按需延遲加載路由；關鍵路由的資源應立即從緩存中加載，而相對不常用的資源可以根據請求從網絡獲取。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"注意：PRPL模式是由Polymer團隊於2016年首次引入的，但已被證明適用於其他許多技術棧。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/8c\/60\/8c40e7da3c6411c8356fed064d460e60.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":true,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"PRPL模式加載順序"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"服務器和服務Worker一起爲非活動路由預緩存資源。當用戶切換路由時，應用會延遲加載尚未緩存的所有必需資源，並創建所需的視圖。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Twitter.com自2017年以來就在生產中使用PRPL模式了。下面我們可以看到，他們對關鍵腳本使用了粒度代碼拆分，並使用推送腳本以儘快讓腳本可用："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/cb\/05\/cb8557bb4d9c81e2e5126e41edfc1005.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":true,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"PRPL模式：預加載關鍵腳本"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其他路由會按需延遲加載。Twitter在整個用戶體驗部分中會按需提供40多個塊。Twitter還使用服務Workers對其他路由進行（離線）資產預緩存，以提高對後續導航操作的響應能力："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/95\/74\/95092ba7a75550e3a7f189091aa71074.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":true,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"PRPL模式：離線緩存資源"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"他們的應用程序外殼程序（骨架UI）也是離線緩存的，就算用戶通過緩慢或不穩定的網絡連接加載站點，也會立即加載它們："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/1f\/50\/1fb22dd665140b1e8e1d7621c9329250.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":true,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"PRPL模式：應用程序外殼"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"爲什麼選擇PRPL？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"應用使用PRPL構建是爲了達到可靠、快速和引人入勝的目的。除了這些基本目標，PRPL還旨在："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"改善應用的交互就緒水平"},{"type":"text","text":"。爲了做到這一點，在第一個視圖渲染並具備交互能力之前，不會向瀏覽器發送多餘的資源。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"提高應用的緩存效率，尤其是長期緩存效率"},{"type":"text","text":"。爲了做到這一點，資源會以很細的粒度向瀏覽器發送。當資源被解綁或鬆散地打包時，對代碼的每次更改給緩存的負面影響也會減少。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"降低開發和部署的複雜性"},{"type":"text","text":"。爲了做到這一點，這種模式使用應用的隱式依賴圖將每個入口點精確映射到所需的資源集，從而減少或消除了手動管理打包和交付的需求。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}