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前端热更新原理是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!
新闻标题:web前端热更新原理是什么-创新互联
本文地址:http://pwwzsj.com/article/jeesi.html