參考文章：
- https://zh.wikipedia.org/wiki/HTTP/2
- https://zh.nuxtjs.org/guide
- https://nextjs.org/learn/basics/getting-started
- https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
- https://dev.w3.org/html5/pf-summary/offline.html
- https://html.spec.whatwg.org/#applicationcache
- https://github.com/wanbei/Blog/blob/aaf9f07a0d5f91c0274a045c58a24d49bb39fa92/docs/contents/html5-manifest.md
當(dāng)我們做spa項(xiàng)目越做越大的時(shí)候相叁，JS bundle會(huì)越來越大，單頁面不能承載那么多的邏輯辽幌，我們可能會(huì)選擇多個(gè)單頁面（也就是多頁面）增淹。每次加載都會(huì)存在空白加載的情景，雖然性能優(yōu)化上乌企，我們能把這個(gè)時(shí)間減少到很少很少虑润，但是沒法完全把它“干掉”。pwa的service-worker技術(shù)很好地彌補(bǔ)這片“空白”加酵∪鳎“app-shell”也就是web app中的應(yīng)用殼將會(huì)緩存在瀏覽器端哭当，讓它的加載速度更加快速。而可變的內(nèi)容則是異步加載冗澈，這個(gè)技術(shù)細(xì)節(jié)很多钦勘。
第一期我們對主流技術(shù)做評估，設(shè)計(jì)出一套簡單可行的方案(先上圖)亚亲。
1111.jpg
思考
- 有些頁面跳轉(zhuǎn)需要后端返回地址彻采，在和后端請求到跳轉(zhuǎn)無法控制，是否需要有跳轉(zhuǎn)過度頁設(shè)計(jì)捌归。
方案要點(diǎn)
* application cache
* pwa技術(shù)
* 降低io請求
* 使用離線存儲(chǔ)存儲(chǔ)靜態(tài)html
* 合理利用瀏覽器緩存
* 使用預(yù)渲染技術(shù)肛响，實(shí)現(xiàn)對當(dāng)先項(xiàng)目的二級頁面進(jìn)行預(yù)渲染，提升用戶體驗(yàn)
技術(shù)細(xì)節(jié)
此方案為治標(biāo)方案陨溅，治本方案在于為什么慢终惑？所以本方案中本本地存儲(chǔ)中增加了一段前端通用js绍在，主要作用有兩個(gè)门扇。
1、上報(bào)請求過程中的耗時(shí)偿渡，通過數(shù)據(jù)優(yōu)化耗時(shí)的地方臼寄。
2、通用的耗時(shí)過長的頁面處理溜宽，優(yōu)化用戶體驗(yàn)吉拳。
需要使用以下方法去控制離線存錯(cuò)的文件
cache = window . applicationCache
(In a window.) Returns the ApplicationCache object that applies to the active document of that Window.
cache = self . applicationCache
(In a shared worker.) Returns the ApplicationCache object that applies to the current shared worker.
cache . status
Returns the current status of the application cache, as given by the constants defined below.
cache . update()
Invokes the application cache update process.
Throws an INVALID_ACCESS_ERR exception if there is no application cache to update.
cache . swapCache()
Switches to the most recent application cache, if there is a newer one. If there isn't, throws an INVALID_ACCESS_ERR exception.
參考
- 1.1事件摘要
當(dāng)用戶訪問聲明清單的頁面時(shí)，瀏覽器將嘗試更新緩存适揉。它通過獲取清單的副本來實(shí)現(xiàn)這一點(diǎn)留攒，如果自從用戶代理最后一次看到清單就改變了，重新下載它所提到的所有資源并重新緩存它們嫉嘀。
隨著這一過程的進(jìn)行炼邀，許多事件被觸發(fā)以保持腳本更新到緩存更新的狀態(tài)，從而可以適當(dāng)?shù)赝ㄖ脩艏粑辍Ｊ录缦拢?/li>
| Event name | Occasion | Next events |
|---|---|---|
| checking | 用戶代理正在檢查更新拭宁，或者嘗試首次下載清單。 | noupdate, downloading, obsolete, error |
| noupdate | The manifest hadn't changed. | (Last event in sequence.) |
| downloading | 用戶代理已經(jīng)找到更新并正在獲取它瓣俯，或者正在第一次下載清單所列出的資源杰标。 | progress, error, cached, updateread |
| cached | 清單中列出的資源已被下載，應(yīng)用程序現(xiàn)在被緩存彩匕。 | Last event in sequence. |
| updateready | 清單中列出的資源已重新下載腔剂，腳本可以使用。SavaCpCh（）切換到新的緩存驼仪。 | Last event in sequence. |
| obsolete | 發(fā)現(xiàn)清單已成為404或410頁桶蝎，因此正在刪除應(yīng)用程序緩存驻仅。 | Last event in sequence. |
| error | 發(fā)現(xiàn)清單已成為404或410頁，因此正在刪除應(yīng)用程序緩存登渣。清單未更改噪服，但引用清單的頁面未能正確下載. 獲取清單中列出的資源時(shí)發(fā)生致命錯(cuò)誤。.在運(yùn)行更新時(shí)胜茧，清單發(fā)生了更改 | The user agent will try fetching the files again momentarily. |
