木灵鱼儿

木灵鱼儿

阅读:596

最后更新:2019/05/14/ 8:51:40

js阻塞和css阻塞

js阻塞

js阻塞其实浏览器的一个很好的机制,浏览器必须在js文件或者代码运行完毕后才会继续其他的工作,比如一个js文件被script元素引用,该元素在head标签中。

那么当浏览器加载到head时,会先加载并运行这个js文件,此时,这个script后面的内容都不会做任何处理,只有加载运行完浏览器才会接着加载后面的内容并解析渲染。

为什么会这样?

原因是因为浏览他并不知道你的js文件做什么,如果他对dom里面的内容做了操作,改变了dom树,那么如果dom树已经完成加载了,js改变后那不是又要重绘一次,那么用户打开网页,页面会先加载完然后闪烁或者发生其他的改变,这对于浏览器来说并不是一个好的方式,所以它会等待js文件运行完在继续加载后面的内容。

那我把js文件放在body元素的最下面不就好了吗?

答案是:NO!

即便你放在最后面,他还是会阻塞,他阻塞的是dom的解析,并不会阻塞内容的下载,不过体验还是很差,并不会有很大的提升。

当然,阻塞的前提是你的js运行计算时间太长,或者加载过慢导致的。

css阻塞

css一般来说是并发式的,并不会有什么阻塞,但是还是有,他会阻塞dom渲染,情况如下:

当css文件在scrip元素上面,而这个css文件加载时间过长,浏览器又因为防止js可能会获取css的样式,所以会让css先加载并渲染完成才去加载script元素,这就造成了阻塞。

实际体验上其实很少遇到的,css如果地址错误浏览器很快就会做出反应,根本感觉不到,而如果你通过服务器端修改文件的响应时间就会有感觉了。

如何解决这个问题?

css阻塞一般来说,如果head标签中有link也有script的话,建议是script在link的上面,不过现在网速都很好,这种问题其实并不是问题,主要是js的阻塞。

js阻塞有一下几种办法:

  1. defer和aysnc属性,目前新版浏览器全面支持这两个属性。
  2. 动态加载script元素
  3. 使用ajax获取然后插入
  4. 将大部分的代码丢入onload事件中,减少一开始就全部运行导致页面阻塞的问题。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 596

相关文章