0%

js阻塞和css阻塞

发布于 / 分类: JavaScript / 暂无评论 / 阅读量 375

最后更新于 2019年05月14日

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事件中,减少一开始就全部运行导致页面阻塞的问题。
JavaScript里面继承是怎样实现的?如何避免原型链上的对象被共享? js深度克隆
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao