js怎么刷新页面 js刷新当前页面 js刷新页面只刷新一次 _当前

作为一名前端，开发web页面是我们的本职工作。在完成一个页面开发的过程中，保存代码然后手动刷新页面查看效果，这样的动作需要重复无数次，虽然一次这样的动作可能只要花费几秒钟的时间，但是次数多了也挺浪费时间的。
社区有一款工具可以帮助前端在每次保存完代码后自动刷新浏览器页面——livereload 。
自动刷新工具目前有很多的工具都内置了自动刷新功能，以下列举几个常见的。
浏览器插件liveReloadwebpack的webpack-dev-server模块gulp的gulp-livereload模块grunt的grunt-livereload模块全局模块puer这样的工具有很多，个人觉得最方便的要数puer，只要全局安装并在工程根目录下运行即可，效果如下。

文章插图
图1
自动刷新原理社区里大多数的自动刷新工具都是使用livereload实现的，下面我们就分析一下它的内部原理是什么？
阅读本节需要先了解服务器推送和文件修改监听，如果你还没有学习，可以先看看以下文章。
详解前端如何搭建一个websocket服务器前端如何实时监听本地代码文件的修改变动？——chokidar模块详解场景：当在编辑器中修改文件内容并保存时，浏览器自动刷新页面；
分析：监听文件的修改，并且把修改的动作通知浏览器。监听操作可以用chokidar模块完成，通知操作可以用websocket来做。
根据以上的分析，我们要搭建一个小服务器，这个服务器可以访问被修改的文件、监听文件修改以及与浏览器通信。
浏览器这边通过websocket接收服务器传来的指令来刷新页面内容，页面刷新的逻辑可以封装在livereload.js中，这是一个单独的js文件，可以由html文件引入。
整个流程如下图。

文章插图
图2
自动刷新实现1、服务端代码实现
1）搭建服务器

文章插图
图3
启动图3中的服务，通过localhost:3000可以访问图左侧html和css两个文件，这两个文件代表需要开发的代码。
【js怎么刷新页面 js刷新当前页面 js刷新页面只刷新一次】2）再搭建一个服务器，用于页面访问livereload.js

文章插图
图4
此处用于图7中html引入livereload.js 。
3）搭建websocket服务器
本文搭建websocket服务器不再一步步手写，而是直接采用ws模块，如下：

文章插图
图5
图5中封装了一个send方法，用于向页面发送刷新通知。
4）监听代码文件的变化

文章插图
图6
chokidar模块监听代码文件的变化，其监听的目录和参数配置可以自定义。filterRefresh调用了图5中定义的send函数，用于发送指令，指令的数据格式也可以自定义，只要页面能解析出来即可。
2、浏览器端代码实现
1）开发页面中引入livereload.js

文章插图
图7
这一步在webpack、fis3等构建工具中都是自动化插入的，无需手动操作。
2）livereload.js中实现websocket连接

文章插图
图8
此处页面接收来自服务器的指令，然后把它解析出来执行即可。核心指令当然是reload，但是不同的资源刷新的方式有所不同，下面会详细介绍。
3）直接刷新页面

文章插图
图9
4）刷新chrome插件

文章插图
图10
5）更新img标签中的图片

文章插图
图11
document.images可以获取文档中所有图片的dom对象，将每个图片地址加一个版本号即可刷新。
这里获取的图片可能不是本次修改的，那么如何获取当前被修改的文件呢？
如果图片是自动刷新服务的资源，那么它的src应该是localhost:3000/图片的路径/图片名称。
图6中websocket传给页面的数据中包含了文件在代码目录下的路径，如果被监听的目录下的图片被修改，那么它的路径（/home/用户名/图片的路径/图片名称）和src会有一段重合的部分，反之，就不会有重合的部分。这里就用这个小技巧来排除不需要更新的图片。