學習前端技術棧ServiceWorker，讓你的網頁變快20%

有些人會認為，前端不就是切圖然后展示么，有什么技術含量，學前端不如學習Php，此言差矣，這些年隨著互聯網的發展，前端技術變得越來越重要，生態圈也越來越發達，今天創新互聯來介紹一個前端技術棧，ServiceWorker。

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

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

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

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

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

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

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

標題名稱：學習前端技術棧ServiceWorker，讓你的網頁變快20%
網頁地址：http://m.kartarina.com/news/104070.html

成都網站建設公司_創新互聯，為您提供App設計、服務器托管、軟件開發、網站策劃、網站收錄、網站排名

廣告

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