作為一名前端，開發web頁面是我們的本職工作。在完成一個頁面開發的過程中，保存代碼然后手動刷新頁面查看效果，這樣的動作需要重復無數次，雖然一次這樣的動作可能只要花費幾秒鐘的時間，但是次數多了也挺浪費時間的。

社區有一款工具可以幫助前端在每次保存完代碼后自動刷新瀏覽器頁面——livereload。

自動刷新工具

目前有很多的工具都內置了自動刷新功能，以下列舉幾個常見的。

1. 瀏覽器插件liveReload
2. webpack的webpack-dev-server模塊
3. gulp的gulp-livereload模塊
4. grunt的grunt-livereload模塊
5. 全局模塊puer

這樣的工具有很多，個人覺得最方便的要數puer，只要全局安裝并在工程根目錄下運行即可，效果如下。 

圖1

自動刷新原理

社區里大多數的自動刷新工具都是使用livereload實現的，下面我們就分析一下它的內部原理是什么？

場景：當在編輯器中修改文件內容并保存時，瀏覽器自動刷新頁面；

分析：監聽文件的修改，并且把修改的動作通知瀏覽器。監聽操作可以用chokidar模塊完成，通知操作可以用websocket來做。

根據以上的分析，我們要搭建一個小服務器，這個服務器可以訪問被修改的文件、監聽文件修改以及與瀏覽器通信。

瀏覽器這邊通過websocket接收服務器傳來的指令來刷新頁面內容，頁面刷新的邏輯可以封裝在livereload.js中，這是一個單獨的js文件，可以由html文件引入。

整個流程如下圖。

自動刷新實現

1、服務端代碼實現

1）搭建服務器

啟動圖3中的服務，通過localhost:3000可以訪問圖左側html和css兩個文件，這兩個文件代表需要開發的代碼。

2）再搭建一個服務器，用于頁面訪問livereload.js

此處用于圖7中html引入livereload.js。

3）搭建websocket服務器

本文搭建websocket服務器不再一步步手寫，而是直接采用ws模塊，如下：

圖5中封裝了一個send方法，用于向頁面發送刷新通知。

4）監聽代碼文件的變化

chokidar模塊監聽代碼文件的變化，其監聽的目錄和參數配置可以自定義。filterRefresh調用了圖5中定義的send函數，用于發送指令，指令的數據格式也可以自定義，只要頁面能解析出來即可。

2、瀏覽器端代碼實現

1）開發頁面中引入livereload.js

這一步在webpack、fis3等構建工具中都是自動化插入的，無需手動操作。

2）livereload.js中實現websocket連接

此處頁面接收來自服務器的指令，然后把它解析出來執行即可。核心指令當然是reload，但是不同的資源刷新的方式有所不同，下面會詳細介紹。

3）直接刷新頁面

4）刷新chrome插件

5）更新img標簽中的圖片

document.images可以獲取文檔中所有圖片的dom對象，將每個圖片地址加一個版本號即可刷新。

這里獲取的圖片可能不是本次修改的，那么如何獲取當前被修改的文件呢？

如果圖片是自動刷新服務的資源，那么它的src應該是localhost:3000/圖片的路徑/圖片名稱。

圖6中websocket傳給頁面的數據中包含了文件在代碼目錄下的路徑，如果被監聽的目錄下的圖片被修改，那么它的路徑（/home/用戶名/圖片的路徑/圖片名稱）和src會有一段重合的部分，反之，就不會有重合的部分。這里就用這個小技巧來排除不需要更新的圖片。

6）更新行內樣式中的背景圖

document.querySelectorAll(`[style*=${selector}]`)可以獲取擁有style屬性的dom，然后通過dom對象的style屬性可以獲取style屬性包含的樣式，再通過具體的css樣式屬性就可以獲取具體的樣式的值，最后通過正則將背景圖匹配出來并加上版本號。

7）更新內嵌和外鏈樣式中的背景圖

document.styleSheets可以獲取所有的內嵌和外鏈樣式，再通過cssRules和style屬性可以獲取一組樣式表，剩下的處理就和圖13一致了。

注意：如果遇到了import或者媒體查詢media，需要做遞歸獲取樣式表，這里就不再嗷述了。

8）更新外鏈樣式（不包含import）

document.getElementsByTagName('link')可以獲取所有的外鏈css，通過path和href的對比可以過濾出本次修改的css文件，然后將外鏈css的href加上版本號并重新生成一個link標簽插在之前外鏈樣式之后，待新css資源加載完成就可以刪除之前的css資源了。

8）更新外鏈中import中的樣式

document.querySelectorAll('link')[i].sheet.cssRules[i].href 這樣的寫法可以獲取到import進來的css的url。

總結

瀏覽器自動刷新功能需要服務端和瀏覽器端配合實現，服務端的實現比較簡單，最大的難點在于瀏覽器端對css的操作。如果每次只是暴力的刷新整個頁面，不考慮對精準資源的刷新，可能無法保持頁面中已存在的一些狀態。

現在有條件的公司一般都會給程序員配備一臺mac加一個大屏顯示器，就像下面這樣。

一個屏幕打開編輯器，另外一個屏幕打開瀏覽器，保存代碼后只要轉一下頭就能看見頁面刷新，不用再在一個屏幕上切來切去，開發效率直線上升。

自動刷新的原理也是一個面試題，如果你理解了上面的實現原理，以后再碰見這道題，肯定so easy！