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

6）更新行内样式中的背景图

文章插图
图12

文章插图
图13
document.querySelectorAll(`[style*=${selector}]`)可以获取拥有style属性的dom，然后通过dom对象的style属性可以获取style属性包含的样式，再通过具体的css样式属性就可以获取具体的样式的值，最后通过正则将背景图匹配出来并加上版本号。

文章插图
图14
7）更新内嵌和外链样式中的背景图

文章插图
图15

文章插图
图16
document.styleSheets可以获取所有的内嵌和外链样式，再通过cssRules和style属性可以获取一组样式表，剩下的处理就和图13一致了。
注意：如果遇到了import或者媒体查询media，需要做递归获取样式表，这里就不再嗷述了。
8）更新外链样式（不包含import）

文章插图
图17
document.getElementsByTagName(&39;link&39;)可以获取所有的外链css，通过path和href的对比可以过滤出本次修改的css文件，然后将外链css的href加上版本号并重新生成一个link标签插在之前外链样式之后，待新css资源加载完成就可以删除之前的css资源了。
8）更新外链中import中的样式

文章插图
图18
document.querySelectorAll(&39;link&39;)[i].sheet.cssRules[i].href 这样的写法可以获取到import进来的css的url 。

文章插图
图20
总结浏览器自动刷新功能需要服务端和浏览器端配合实现，服务端的实现比较简单，最大的难点在于浏览器端对css的操作。如果每次只是暴力的刷新整个页面，不考虑对精准资源的刷新，可能无法保持页面中已存在的一些状态。
现在有条件的公司一般都会给程序员配备一台mac加一个大屏显示器，就像下面这样。

文章插图
图21
一个屏幕打开编辑器，另外一个屏幕打开浏览器，保存代码后只要转一下头就能看见页面刷新，不用再在一个屏幕上切来切去，开发效率直线上升。
自动刷新的原理也是一个面试题，如果你理解了上面的实现原理，以后再碰见这道题，肯定so easy！
喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！