web前端熱更新原理是什么

這篇文章主要講解了“web前端熱更新原理是什么”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“web前端熱更新原理是什么”吧！

　　在h6推出之前，瀏覽器應(yīng)用跟服務(wù)器端通信的機(jī)制只有http協(xié)議，http是一種無(wú)狀態(tài)的網(wǎng)絡(luò)協(xié)議，前端向服務(wù)器發(fā)起一個(gè)請(qǐng)求，服務(wù)器給出一次應(yīng)答，服務(wù)器無(wú)法主動(dòng)向客戶端發(fā)起通信，這種設(shè)計(jì)主要是為了節(jié)省帶寬資源，客戶端和服務(wù)器端不需要維持長(zhǎng)連接

　　websocket熱更新簡(jiǎn)介

　　早期要實(shí)現(xiàn)一個(gè)瀏覽器即使通信工具（如webqq），由于服務(wù)器端不能主動(dòng)向客戶端發(fā)起通信，只能客戶端設(shè)置一個(gè)定時(shí)器，定時(shí)向服務(wù)器端發(fā)起請(qǐng)求拉取消息，很顯然，這種輪詢的方式對(duì)性能來(lái)說(shuō)是一把殺豬刀

　　h6很應(yīng)景的推出了websocket，這給了web開(kāi)發(fā)者另一種選擇去應(yīng)付紛繁復(fù)雜的場(chǎng)景。WebSocket是一個(gè)獨(dú)立的基于TCP的協(xié)議，前端和服務(wù)器端可以建立起一個(gè)長(zhǎng)連接，客戶端可以向服務(wù)器端推送消息，服務(wù)器也可以主動(dòng)向客戶端推送消息

　　本文不對(duì)websocket做太深入的說(shuō)明，有興趣可留下你的評(píng)論

　　熱更新原理

　　瀏覽器的網(wǎng)頁(yè)通過(guò)websocket協(xié)議與服務(wù)器建立起一個(gè)長(zhǎng)連接，當(dāng)服務(wù)器的css/js/html進(jìn)行了修改的時(shí)候，服務(wù)器會(huì)向前端發(fā)送一個(gè)更新的消息，如果是css或者h(yuǎn)tml發(fā)生了改變，網(wǎng)頁(yè)執(zhí)行js直接操作dom，局部刷新，如果是js發(fā)生了改變，只好刷新整個(gè)頁(yè)面

　　js發(fā)生改變的時(shí)候，不太可能判斷出對(duì)dom的局部影響，只能全局刷新

　　為何沒(méi)有提到圖片的更新，如果是在html或者css里修改了圖片路徑，那么更新html和css，只要圖片路徑?jīng)]有錯(cuò)，那么就已經(jīng)達(dá)到了更新圖片的路徑。如果是相同路徑的圖片進(jìn)行了替換，這往往需要重啟下服務(wù)

　　在簡(jiǎn)單的網(wǎng)頁(yè)應(yīng)用中，這一個(gè)過(guò)程可能僅僅是節(jié)省了手動(dòng)刷新瀏覽器的繁瑣，但是在負(fù)責(zé)的應(yīng)用中，如果你在調(diào)試的部分需要從頁(yè)面入口操作好幾步才到達(dá)，例如：登錄->列表->詳情->彈出窗口，那么局部刷新將大大提高調(diào)試效率

　　實(shí)例剖析

　　如果你使用gulp構(gòu)建的前端開(kāi)發(fā)工作環(huán)境，想必對(duì)browserSync不會(huì)陌生，你明白它的工作方式么？

　　browserSync易于使用：

　　varbs=browserSync({

　　port:5000,//服務(wù)端口

　　notify:false,

　　logPrefix:'PSK',

　　server:{

　　baseDir:'_dev',//服務(wù)路徑，也就是頁(yè)面資源存放的路徑

　　directory:true

　　},

　　open:false//需不需要自動(dòng)打開(kāi)瀏覽器

　　},function(){

　　//啟動(dòng)后的回調(diào)

　　});

感謝各位的閱讀，以上就是“web前端熱更新原理是什么”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)web前端熱更新原理是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！