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前端热更新原理是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！