有些人會認(rèn)為，前端不就是切圖然后展示么，有什么技術(shù)含量，學(xué)前端不如學(xué)習(xí)Php，此言差矣，這些年隨著互聯(lián)網(wǎng)的發(fā)展，前端技術(shù)變得越來越重要，生態(tài)圈也越來越發(fā)達(dá)，今天創(chuàng)新互聯(lián)來介紹一個前端技術(shù)棧，ServiceWorker。

學(xué)習(xí)一個東西，我們先了解出現(xiàn)的背景以及解決了什么問題。隨著互聯(lián)網(wǎng)的發(fā)展，前端的頁面越來越豐富。對比一下現(xiàn)在跟10年前的網(wǎng)頁，你會有更深刻的體會。10年前，我們在PC上需要下載很多程序才能夠操作的事情，今天在web端也能輕松完成。隨著這個前端頁面承載的功能越來越豐富，我們對網(wǎng)頁的打開加載速度要求也越來越高，很多人也許會說，要加載快，不就換電腦，加大帶寬就能完成了么？但實際上很多用戶的PC更新?lián)Q代非常慢，而且手機(jī)端的網(wǎng)絡(luò)也并沒有那么穩(wěn)定，所以，我們需要一個技術(shù)，能夠有豐富的離線體驗、定期的后臺同步以及推送通知等通常需要將面向本機(jī)應(yīng)用的功能將引入到網(wǎng)頁應(yīng)用中，ServiceWorker誕生于此，ServiceWorker可以把網(wǎng)頁以及一些靜態(tài)資源緩存與本機(jī)。

ServiceWorker是怎么工作的呢？我們注冊一個ServiceWorker的時候需要配置要緩存哪些資源，當(dāng)我們請求的資源命中了之后，這個請求會被ServiceWorker代理，會先判斷本地有沒有現(xiàn)有的緩存，如果有的話，會直接返回，如果沒有，會從后端服務(wù)器中獲取，保存一份在本地緩存，然后再次返回，后續(xù)的同類型的請求就會命中到該緩存了。

相信有了上面ServiceWorker的背景跟它最核心的工作原理，要來理解ServiceWorker的生命周期并不難。ServiceWorker的生命周期是獨立于網(wǎng)頁本身的。一開始我們需要注冊并安裝ServiceWorker(當(dāng)然不是我們理解的安裝軟件的安裝，而是支持該功能的瀏覽器運行有注冊安裝ServiceWorker的Javascript代碼的時候，自動注冊安裝)。然后我們的ServiceWorker就可以開始工作了，它會劫持用戶配置的相關(guān)資源請求，進(jìn)行處理。最后ServiceWorker也是會被銷毀，結(jié)束他的一生。

最后，我們再來通過源碼，簡單地介紹東西是怎么運行的。

我們先注冊一個ServiceWorker并且配置相關(guān)代理的資源，如圖。我們配置了sw-test目錄下面的部分頁面、圖片、js跟樣式等。要注意的是，如果是被代理文件里面的如果用到外域的資源，也會被代理。

我們在處理請求的時候，如果命中被代理的文件，就會觸發(fā)fetch事件，從而進(jìn)行緩存數(shù)據(jù)替代線上請求。

好了，今天的ServiceWorker我們就簡單介紹到這里，更多詳細(xì)的東西大家可以進(jìn)一步學(xué)習(xí)，有什么疑問可以一起討論，一起學(xué)習(xí)進(jìn)步。

標(biāo)題名稱：學(xué)習(xí)前端技術(shù)棧ServiceWorker，讓你的網(wǎng)頁變快20%
網(wǎng)頁地址：http://jinyejixie.com/news/104070.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、服務(wù)器托管、軟件開發(fā)、網(wǎng)站策劃、網(wǎng)站收錄、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)