木灵鱼儿

博客
正在进入:首页

更新于

js阻塞和css阻塞

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

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事件中,减少一开始就全部运行导致页面阻塞的问题。
Info
Site Info

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了185篇文章

目录树
Archive
Article Archive
Weather
Weather

湿度
设置
配色方案

宽度

现在购买