js阻塞和css阻塞

60 0

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
  • 本文分类:JavaScript
  • 本文标签:js阻塞css阻塞
  • 流行热度:已超过 60 人围观了本文
  • 发布日期:2019年05月14日 - 8时51分40秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码