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

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

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

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

最后，我們?cè)賮?lái)通過(guò)源碼，簡(jiǎn)單地介紹東西是怎么運(yùn)行的。

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

我們?cè)谔幚碚?qǐng)求的時(shí)候，如果命中被代理的文件，就會(huì)觸發(fā)fetch事件，從而進(jìn)行緩存數(shù)據(jù)替代線(xiàn)上請(qǐng)求。

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

本文名稱(chēng)：學(xué)習(xí)前端技術(shù)棧ServiceWorker，讓你的網(wǎng)頁(yè)變快20%
文章網(wǎng)址：http://jinyejixie.com/news20/104070.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站建設(shè)、云服務(wù)器、外貿(mào)建站、靜態(tài)網(wǎng)站

廣告

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