九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

技術(shù)背景

大家都知道H5相比原生應(yīng)用，無論是加載速度和用戶體驗都會差很多,具體原因有如下幾點：

1. 留白時間過長。移動端網(wǎng)絡(luò)非常不穩(wěn)定，經(jīng)常會出現(xiàn)弱網(wǎng)環(huán)境（如：電梯，地鐵，大山里面），這樣會導(dǎo)致資源加載速度非常慢，留白時間相對原生會慢很多。
2. 無法離線訪問。因為資源都在線上服務(wù)器,每次訪問H5的頁面強烈依賴網(wǎng)絡(luò)，原生因為資源都在應(yīng)用包里面,就算斷網(wǎng)也會給一個相對友好的展示界面和用戶提醒。
3. 無法全屏訪問。H5絕大部分都是跟瀏覽打交道，但是各大瀏覽器廠商都會有一個討厭的頭部和一個討厭的尾部，導(dǎo)致用戶的可視區(qū)域大大被壓縮。原生大家都知道可視區(qū)域隨意控制。
4. 無法消息推送。
5. 沒有自己的啟動圖標(biāo)，每次都需要輸入網(wǎng)址或者依靠搜索引擎引流。

這個時候拯救H5的英雄就出現(xiàn)了，他就是PWA。

什么是PWA

PWA全稱是: Progressive Web Apps(漸進式網(wǎng)頁應(yīng)用)。這是 2016 年，Google I/O 大會上提出一個下一代web應(yīng)用的概念。這并不是描述一個技術(shù)，而是一些技術(shù)的合集,能讓你在使用 Web的時候感覺像是在使用 APP。

PWA能干什么

• 消息推送
• 主屏ICON，全屏訪問
• 離線存儲

是不是跟原生就很像了？本文要寫的主要是離線存儲也就是緩存這一塊的內(nèi)容，消息推送和主屏幕ICON以后再講。

pwa緩存的原理

為什么能實現(xiàn)緩存或者叫離線存儲？核心就是利用瀏覽器service-worker另啟一個線程，這個線程負責(zé)去監(jiān)聽所有https請求（注意是https）,當(dāng)發(fā)現(xiàn)某些資源是需要緩存下來的他會把資源拉取到瀏覽器本地，訪問的時候攔截請求，不走網(wǎng)絡(luò)請求，直接讀取本地資源。這樣資源相當(dāng)于都是用戶本地的資源,響應(yīng)速度肯定飛快，還有就是資源都在用戶瀏覽器里面，就算斷了網(wǎng),資源也都是能正常訪問。

pwa緩存到底有多快

下面是現(xiàn)有PLUS會員業(yè)務(wù)中的同一個頁面pwa緩存和非pwa緩存加載資源的對比圖：

下圖是3G網(wǎng)絡(luò)不用PWA緩存的資源請求時間：

下圖是3G網(wǎng)絡(luò)采用PWA緩存的資源請求時間：

下圖是4G網(wǎng)絡(luò)不用PWA緩存的資源請求時間：

下圖是4G網(wǎng)絡(luò)采用PWA緩存的資源請求時間：

采用PWA緩存和不采用PWA緩存數(shù)據(jù)對比:

	3G不用PWA緩存	3G采用PWA緩存	4G不采用PWA緩存	4G采用PWA緩存
頁面加載時間	4.16s	989ms	1.8s	975ms
單個資源 平均加載時間	1s左右	60ms左右	550ms左右	60ms左右

從上面數(shù)據(jù)可以看出來，pwa緩存的提速效果是非常明顯，能保證你的頁面在弱網(wǎng)環(huán)境下秒開，資源大部分都是在50毫秒左右的的響應(yīng)時間。我們在safari瀏覽器測試的響應(yīng)時間更加快速，基本都是在15ms左右!!!

pwa緩存的緩存策略

上面說到某些資源是需要緩存。緩存多長時間？是永遠走緩存還是永遠走網(wǎng)絡(luò)？還是一些特定的緩存策略的？下面介紹常見用的幾種緩存策略：

cache-first

Cache-First策略會在有緩存的時候返回緩存，沒有緩存才會去請求并且把請求結(jié)果緩存。也就是說，第一次頁面加載跟普通頁面加載沒有任何區(qū)別的，第二次訪問的資源是直接走了本地緩存數(shù)據(jù)的。

無緩存加載流程圖

有緩存加載流程圖

這種策略適用于:css,js,背景圖片，這種實時變化頻率比較低的靜態(tài)資源比較適合！這種策略有一種不好的地方就是，緩存可能一只存在你得瀏覽器，如果發(fā)現(xiàn)某些文件需要替換，這個時候就依賴發(fā)版要不緩存就一直存在。有什么好的辦法嗎？配置緩存時間可以避免這種問題，定一個時間更新一次緩存。比如一個小時，或者三個小時，也可以通過緩存某些變動頻率比較低接口的數(shù)據(jù)，這個時間主要看自己的業(yè)務(wù)需求了。（PS：新的版本改成Service-Worker一天會主動拉新一次。）

network-first

network-first 是一個比較復(fù)雜的策略。資源優(yōu)先走網(wǎng)絡(luò)，成功以后會把資源添加到緩存里面，當(dāng)發(fā)現(xiàn)網(wǎng)失敗就會回退讀取緩存。這里面有一個點就是，多長時間算網(wǎng)絡(luò)請求失敗？這時候就需要配置一個超時時間，如果不配置回退緩存的時間就會比較長。這個時間根據(jù)自身項目而定。

這種策略適用于：頻繁更新的資源，比如天氣的數(shù)據(jù)，文章,游戲排行榜的接口資源，正常情況下跟普通網(wǎng)頁沒有任何區(qū)別，當(dāng)出現(xiàn)弱網(wǎng)或者斷網(wǎng)資源響應(yīng)時間比較長用戶體驗比價差的情況下給的一種資源回退策略，這種方式可以提高弱網(wǎng)環(huán)境下的用戶體驗。

stale-while-revalidate

這種策略比較接近cache-first,他們的區(qū)別在于他會先走緩存，走完緩存以后它會發(fā)出請求，請求的結(jié)果會用來更新緩存，也就是說你的下一次訪問的如果時間足夠請求返回的話，你就能拿到最新的數(shù)據(jù)了。

適合于:頻繁更新最新版本并非必需的資源，html,頭像。

cache-only

只會去緩存里拿數(shù)據(jù)，緩存沒有就失敗了。

這種非常簡單應(yīng)用場景可能就是一萬年不變的靜態(tài)頁面可能比較適合。

network-only

network-only 只請求線上，不讀寫緩存。

這種策略的應(yīng)用場景非常少，特殊情況下偶爾能用用吧，當(dāng)發(fā)現(xiàn)線上的緩存失控，在這種緊急情況下全部不走緩存，全部走網(wǎng)絡(luò)一種緊急應(yīng)對情況吧。

以上就是常用的五中緩存策略,不同的場景對應(yīng)不同的緩存策略，如何去編寫這些策略或者如何去生成這些策略會在接下來的文章再去詳解

pwa的未來

現(xiàn)在國內(nèi)的瀏覽器廠商最新的版本都支持PWA的service-worker 緩存這一塊，以前吐槽的IOS不會支持，但是在最新版本的IOS11.3也支持service-worker了。

pwa是一堆技術(shù)的合集，app shell,消息推送，單頁式的應(yīng)用都有包含，緩存只是其中的一部分，還有很多技術(shù)需要我們?nèi)ヌ剿魅嵺`，相信這項技術(shù)會給H5帶來更加好的未來。