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