作为前端，开发网页是我们的工作。在完成一个页面开发的过程中，保存代码然后手动刷新页面查看效果。这个动作需要重复无数次。虽然这样的动作一次可能只需要几秒，但是次数太多也是浪费时间。社区有一个工具可以帮助前端每次保存代码后自动刷新浏览器页面——livereload。自动刷新工具目前很多工具都内置了自动刷新功能，下面列举几个常用的。浏览器插件liveReloadwebpack的webpack-dev-server模块gulp的gulp-livereload模块grunt的grunt-livereload模块globalmodulepuer等工具很多，个人觉得puer最方便，只要全局安装即可在项目的根目录下运行即可，效果如下。图1自动刷新原理社区中大部分的自动刷新工具都是使用livereload实现的。下面分析一下它的内部原理。场景：在编辑器中修改文件内容并保存后，浏览器自动刷新页面；分析：监听文件的修改，将修改动作通知浏览器。监听操作可以用chokidar模块来完成，通知操作可以用websocket来完成。根据上面的分析，我们需要搭建一个小型服务器，可以访问被修改的文件，监控文件的修改，并与浏览器进行通信。浏览器通过websocket接收服务器的指令，刷新页面内容。页面刷新的逻辑可以封装在livereload.js中，它是一个单独的js文件，可以由html文件导入。整个过程如下图所示。图2自动刷新实现1.服务器代码实现1)搭建服务器图3启动图3中的服务，可以通过localhost:3000访问图中左侧的html和css两个文件。这两个文件代表要开发的代码。2）另外搭建一个服务器，用于页面访问livereload.js这里使用图4将livereload.js导入到图7的html中。3）搭建websocket服务器本文搭建websocket服务器不再是一步步手写，但是直接使用了ws模块，如下：图5图5封装了一个发送刷新通知给页面的send方法。4）监控代码文件变化图6chokidar模块监控代码文件变化，其监控目录和参数配置可以自定义。filterRefresh调用图5定义的send函数发送指令，指令的数据格式也可以自定义，只要能解析页面即可。2、浏览器端代码实现1）在开发页面引入livereload.js图7这一步在webpack、fis3等构建工具中自动插入，无需手动操作。2）在livereload.js中实现websocket连接图8这里页面从服务器接收指令，然后解析出来执行。核心命令当然是reload，但是不同的资源刷新方式不同，下面会详细介绍。3）直接刷新页面图94）刷新chrome插件图105）更新img标签中的图片图11document.images可以获取文档中所有图片的dom对象，并为每个图片地址添加版本号刷新。这里获取到的图片本次可能不会被修改，那么如何获取当前修改的文件呢？如果图片是自动刷新服务的资源，则其src为localhost:3000/图片路径/图片名称。在图6中，websocket发送给页面的数据中包含代码目录下文件的路径。如果监控目录下的图片被修改，其路径（/home/用户名/图片路径/图片名称）和src会有重叠部分，否则没有重叠部分。这里使用这个小技巧来排除不需要更新的图片。6)更新内联样式中的背景图图12图13document.querySelectorAll(`[style*=${selector}]`)可以得到带有style属性的dom，然后可以得到style属性中包含的样式通过dom对象的style属性，然后通过具体的css样式属性可以得到具体样式的值，最后通过正则模式匹配背景图片，加上版本号。图147）更新嵌入和外部链接样式中的背景图图15图16document.styleSheets可以得到所有的嵌入和外部链接样式，然后通过cssRules和style属性可以得到一组样式表，剩下的处理过程与图13一致。注意：如果遇到import或者mediaquery媒体，需要递归获取样式表，这里不再赘述。8）更新外链样式（不包括import）图17document.getElementsByTagName('link')可以获取所有的外链css，可以通过比较path和href过滤掉修改后的css文件，然后外链css将版本号添加到href中，并重新生成一个链接标签插入到之前的外部链接样式之后。加载新的css资源后，可以删除之前的css资源。8）在外部链接中更新import中的stylemap18document.querySelectorAll('link')[i].sheet.cssRules[i].href这种写法可以得到导入css的url。图20总结了浏览器的自动刷新功能需要服务器和浏览器的配合。服务端的实现比较简单，最大的难点在于浏览器对css的操作。如果每次都只是暴力刷新整个页面，而不考虑精确资源的刷新，可能无法保持页面上的一些已有状态。现在有条件的公司一般都会给程序员配备一台mac和一台大屏显示器，如下图。图21在一个屏幕上打开编辑器，在另一个屏幕上打开浏览器。保存代码后，只需要转头就可以看到页面刷新了。无需在一屏来回切换，开发效率直线上升。自动刷新原理也是一道面试题。如果你明白了上面的实现原理，以后再遇到这道题，一定是soeasy！
