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

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

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

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

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

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

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

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

本文名稱：學習前端技術(shù)棧ServiceWorker，讓你的網(wǎng)頁變快20%
文章網(wǎng)址：http://chinadenli.net/news20/104070.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、網(wǎng)頁設(shè)計公司、網(wǎng)站建設(shè)、云服務器、外貿(mào)建站、靜態(tài)網(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)