web前端熱更新原理是什么

這篇文章主要講解了“web前端熱更新原理是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“web前端熱更新原理是什么”吧！

　　在h6推出之前，瀏覽器應用跟服務器端通信的機制只有http協議，http是一種無狀態的網絡協議，前端向服務器發起一個請求，服務器給出一次應答，服務器無法主動向客戶端發起通信，這種設計主要是為了節省帶寬資源，客戶端和服務器端不需要維持長連接

　　websocket熱更新簡介

　　早期要實現一個瀏覽器即使通信工具（如webqq），由于服務器端不能主動向客戶端發起通信，只能客戶端設置一個定時器，定時向服務器端發起請求拉取消息，很顯然，這種輪詢的方式對性能來說是一把殺豬刀

　　h6很應景的推出了websocket，這給了web開發者另一種選擇去應付紛繁復雜的場景。WebSocket是一個獨立的基于TCP的協議，前端和服務器端可以建立起一個長連接，客戶端可以向服務器端推送消息，服務器也可以主動向客戶端推送消息

　　本文不對websocket做太深入的說明，有興趣可留下你的評論

　　熱更新原理

　　瀏覽器的網頁通過websocket協議與服務器建立起一個長連接，當服務器的css/js/html進行了修改的時候，服務器會向前端發送一個更新的消息，如果是css或者html發生了改變，網頁執行js直接操作dom，局部刷新，如果是js發生了改變，只好刷新整個頁面

　　js發生改變的時候，不太可能判斷出對dom的局部影響，只能全局刷新

　　為何沒有提到圖片的更新，如果是在html或者css里修改了圖片路徑，那么更新html和css，只要圖片路徑沒有錯，那么就已經達到了更新圖片的路徑。如果是相同路徑的圖片進行了替換，這往往需要重啟下服務

　　在簡單的網頁應用中，這一個過程可能僅僅是節省了手動刷新瀏覽器的繁瑣，但是在負責的應用中，如果你在調試的部分需要從頁面入口操作好幾步才到達，例如：登錄->列表->詳情->彈出窗口，那么局部刷新將大大提高調試效率

　　實例剖析

　　如果你使用gulp構建的前端開發工作環境，想必對browserSync不會陌生，你明白它的工作方式么？

　　browserSync易于使用：

　　varbs=browserSync({

　　port:5000,//服務端口

　　notify:false,

　　logPrefix:'PSK',

　　server:{

　　baseDir:'_dev',//服務路徑，也就是頁面資源存放的路徑

　　directory:true

　　},

　　open:false//需不需要自動打開瀏覽器

　　},function(){

　　//啟動后的回調

　　});

感謝各位的閱讀，以上就是“web前端熱更新原理是什么”的內容了，經過本文的學習后，相信大家對web前端熱更新原理是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！