2021-03-04 分類: 網(wǎng)站建設(shè)
有些人會(huì)認(rèn)為,前端不就是切圖然后展示么,有什么技術(shù)含量,學(xué)前端不如學(xué)習(xí)Php,此言差矣,這些年隨著互聯(lián)網(wǎng)的發(fā)展,前端技術(shù)變得越來越重要,生態(tài)圈也越來越發(fā)達(dá),今天創(chuàng)新互聯(lián)來介紹一個(gè)前端技術(shù)棧,ServiceWorker。
學(xué)習(xí)一個(gè)東西,我們先了解出現(xiàn)的背景以及解決了什么問題。隨著互聯(lián)網(wǎng)的發(fā)展,前端的頁面越來越豐富。對(duì)比一下現(xiàn)在跟10年前的網(wǎng)頁,你會(huì)有更深刻的體會(huì)。10年前,我們?cè)赑C上需要下載很多程序才能夠操作的事情,今天在web端也能輕松完成。隨著這個(gè)前端頁面承載的功能越來越豐富,我們對(duì)網(wǎng)頁的打開加載速度要求也越來越高,很多人也許會(huì)說,要加載快,不就換電腦,加大帶寬就能完成了么?但實(shí)際上很多用戶的PC更新?lián)Q代非常慢,而且手機(jī)端的網(wǎng)絡(luò)也并沒有那么穩(wěn)定,所以,我們需要一個(gè)技術(shù),能夠有豐富的離線體驗(yàn)、定期的后臺(tái)同步以及推送通知等通常需要將面向本機(jī)應(yīng)用的功能將引入到網(wǎng)頁應(yīng)用中,ServiceWorker誕生于此,ServiceWorker可以把網(wǎng)頁以及一些靜態(tài)資源緩存與本機(jī)。
ServiceWorker是怎么工作的呢?我們注冊(cè)一個(gè)ServiceWorker的時(shí)候需要配置要緩存哪些資源,當(dāng)我們請(qǐng)求的資源命中了之后,這個(gè)請(qǐng)求會(huì)被ServiceWorker代理,會(huì)先判斷本地有沒有現(xiàn)有的緩存,如果有的話,會(huì)直接返回,如果沒有,會(huì)從后端服務(wù)器中獲取,保存一份在本地緩存,然后再次返回,后續(xù)的同類型的請(qǐng)求就會(huì)命中到該緩存了。
相信有了上面ServiceWorker的背景跟它最核心的工作原理,要來理解ServiceWorker的生命周期并不難。ServiceWorker的生命周期是獨(dú)立于網(wǎng)頁本身的。一開始我們需要注冊(cè)并安裝ServiceWorker(當(dāng)然不是我們理解的安裝軟件的安裝,而是支持該功能的瀏覽器運(yùn)行有注冊(cè)安裝ServiceWorker的Javascript代碼的時(shí)候,自動(dòng)注冊(cè)安裝)。然后我們的ServiceWorker就可以開始工作了,它會(huì)劫持用戶配置的相關(guān)資源請(qǐng)求,進(jìn)行處理。最后ServiceWorker也是會(huì)被銷毀,結(jié)束他的一生。
最后,我們?cè)賮硗ㄟ^源碼,簡(jiǎn)單地介紹東西是怎么運(yùn)行的。
我們先注冊(cè)一個(gè)ServiceWorker并且配置相關(guān)代理的資源,如圖。我們配置了sw-test目錄下面的部分頁面、圖片、js跟樣式等。要注意的是,如果是被代理文件里面的如果用到外域的資源,也會(huì)被代理。
我們?cè)谔幚碚?qǐng)求的時(shí)候,如果命中被代理的文件,就會(huì)觸發(fā)fetch事件,從而進(jìn)行緩存數(shù)據(jù)替代線上請(qǐng)求。
好了,今天的ServiceWorker我們就簡(jiǎn)單介紹到這里,更多詳細(xì)的東西大家可以進(jìn)一步學(xué)習(xí),有什么疑問可以一起討論,一起學(xué)習(xí)進(jìn)步。
標(biāo)題名稱:學(xué)習(xí)前端技術(shù)棧ServiceWorker,讓你的網(wǎng)頁變快20%
網(wǎng)頁地址:http://www.rwnh.cn/news/104070.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、服務(wù)器托管、軟件開發(fā)、網(wǎng)站策劃、網(wǎng)站收錄、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容