解读前端热更新原理

时间: 2017-11-23阅读: 1496标签: 前端

猿类创造的原始动力多来源于偷懒
前端的同学们在搭建自己的开发环境的时候,为了避免手动刷新浏览器的繁复,使用起了热更新工具
browserSync 和 webpack-dev-server是其中的代表作品

一、websocket简介

在h5推出之前,浏览器应用跟服务器端通信的机制只有http协议,http是一种无状态的网络协议,前端向服务器发起一个请求,服务器给出一次应答,服务器无法主动向客户端发起通信,这种设计主要是为了节省带宽资源,客户端和服务器端不需要维持长连接

早期要实现一个浏览器即使通信工具(如webqq),由于服务器端不能主动向客户端发起通信,只能客户端设置一个定时器,定时向服务器端发起请求拉取消息,很显然,这种轮询的方式对性能来说是一把杀猪刀

h5很应景的推出了websocket,这给了web开发者另一种选择去应付纷繁复杂的场景。WebSocket 是一个独立的基于TCP的协议,前端和服务器端可以建立起一个长连接,客户端可以向服务器端推送消息,服务器也可以主动向客户端推送消息

本文不对websocket做太深入的说明,有兴趣可留下你的评论

二、热更新原理


热更新

浏览器的网页通过websocket协议与服务器建立起一个长连接,当服务器的css/js/html进行了修改的时候,服务器会向前端发送一个更新的消息,如果是css或者html发生了改变,网页执行js直接操作dom,局部刷新,如果是js发生了改变,只好刷新整个页面

js发生改变的时候,不太可能判断出对dom的局部影响,只能全局刷新
为何没有提到图片的更新,如果是在html或者css里修改了图片路径,那么更新html和css,只要图片路径没有错,那么就已经达到了更新图片的路径。如果是相同路径的图片进行了替换,这往往需要重启下服务

在简单的网页应用中,这一个过程可能仅仅是节省了手动刷新浏览器的繁琐,但是在负责的应用中,如果你在调试的部分需要从页面入口操作好几步才到达,例如:登录->列表->详情->弹出窗口,那么局部刷新将大大提高调试效率

三、实例剖析

如果你使用gulp构建的前端开发工作环境,想必对browserSync不会陌生,你明白它的工作方式么?

browserSync易于使用:

    var bs = browserSync({
        port: 5000, //服务端口
        notify: false,
        logPrefix: 'PSK',
        
        server: {
            baseDir: '_dev', //服务路径,也就是页面资源存放的路径
            directory: true
        },
        open: false //需不需要自动打开浏览器
    }, function() {
        //启动后的回调
    });

很容易想到,这开启了一个http服务,在浏览器输入localhost:5000/path就可以访问到页面,不知道有没有细心的观众在查看页面源码的时候发现多了点什么不是你写的东西


browserSync

没错,browser-sync-client.2.9.6.js并不是你引入的,这个是browserSync在创建的时候,为你的html自动注入的(baseDir目录下),部分代码:

    .........
    ___browserSync___.io = window.io;
    window.io = window.___browserSync___oldSocketIo;
    window.___browserSync___oldSocketIo=undefined;
    ___browserSync___.socketConfig = {"reconnectionAttempts":50,"path":"/browser-sync/socket.io"};
    ___browserSync___.socket = ___browserSync___.io('' + location.host + '/browser-sync', ___browserSync___.socketConfig);
    "use strict";
    (function (window, document, bs, undefined) {
        var socket = bs.socket;

        var uiOptions = {
            bs: {}
        };
    ..........

原谅我并未仔细研读过次文件代码,因为实在太多太凌乱,但是从上面这几行代码,以及文件名,就基本可以确定这是websocket-client的代码

读过的同学求抱大腿

下面再来做一个实验来确认下,control+c 把服务器关闭,再来看看刚才那网页的控制台:


browserSync-error

控制台一直在报错,why? 因为服务器关闭了之后,连接断开,客户端一直在尝试对服务器发起重连

再来看看webpack是怎么做的,webpack可以使用webpack-dev-server来搭建热跟新的开发环境,webpack-dev-server是基于express的轻量级服务器,作用有点类似于上述的browserSync,你需要在webpack.config.js中的entry配置里增加的点东西

    var config = {
      entry: ['webpack/hot/dev-server', './app/main.js'], 
      output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
      },
      module: {
        loaders: [{
          test: /\.js$/,

          // Use the property "loaders" instead of "loader" and 
          // add "react-hot" in front of your existing "jsx" loader
          // 使用 "loaders" 属性代替 "loader"
          // 然后在 "jsx" 加载器之前添加 "react-hot" 
          loaders: ['react-hot', 'babel']
        }]
      }
    };

配置中增加了webpack/hot/dev-server实体,跟main.js一起打包成bundle.js,这个就可以类比到上面的browser-sync-client.2.9.6.js

如果自己搭建express,还可以使用webpack的热跟新中间件

四、总结

知其然并知其所以然是很重要的,不要求搞清楚每一个细节,但要懂得实现原理

原文链接:www.jianshu.com  
吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

链接: http://www.fly63.com/article/detial/156

自学WEB前端的详细路线

学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理。没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间、精力、金钱。废话不多说直接上干货

如何从零基础成为优秀的Web前端开发人员?

你想成为一名Web开发人员,有一个问题,在技术行业还没有经验。你可能上了很多课程并且也写了很多个人项目,但是简历上经验一栏却始终和你没有什么关系。转型到一个新的领域并不是那么容易,你想知道你是否已经准备好了

如何在前端中使用protobuf?

由于目前公司采用了ProtoBuf做前后端数据交互,进公司以来一直用的是公司大神写好的基础库,完全不了解底层是如何解析的,一旦报错只能求人,作为一只还算有钻研精神的猿,应该去了解一下底层的实现

想要成为一个优秀的WEB前端工程,到底该怎么做呢?

互联网已成为当下最火热的行业,互联网的发展带来了巨大的社会变革,从工作到生活,改变着方方面面。 随着互联网的快速发展,IT技术人才缺口开始出现并不断扩大。WEB前端开发工程师作为IT领域中的最热门岗位之一

Web前端需要会哪些?

Web前端开发行业学习门槛也较低,很多转行的小白通过扎实的学习成为了大咖,技术过硬的前端工程师也通过夯实基础,找到了更好的工作,更有从后端转入前端的工程师,因为掌握后端技术而更加有优势,在前端开发行业取得很大成功。

现在学web前端还来得及吗?

前端是个最近几年火起来的工种,而且持续火热中,有个词叫水涨船高,来的人多了,竞争多了,标准也就提高了。现在对前端工程师的要求跟当年前已经不能同日而语了。

零基础转行web前端,要学习多久?需要掌握些什么?

如果你还处于迷茫阶段或者是一个小白,那你不要着急着手开始学习,因为没有目的和方法的学习,只会走弯路。这时候,建议你先深入了解有关前端方面的所有资讯,包括前景、就业、行业发展、技术囊括、职业等等,这样才能有目的和方向的学习

Web前端开发的思考与感悟

最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等。遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备自学前端半个月然后要去找前端工作

Web前端发展史

前端其实是个很大的范畴。我这里只针对 web 开发的前端而言(下文统称前端)。简单点说,针对浏览器的开发,浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染

Web前端开发怎么入门?

Web前端开发怎么入门,主要都有哪些要素组成?Web前端开发是由网页制作演变而来的,主要由HTML、CSS、JavaScript三大要素组成。专业的Web前端开发入门知识也一定会包含这些内容,下面就给大家简单介绍一下。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全