如何在html中写js顺序,CSS和JS在网页中的放置顺序

JS、CSS渲染机制

解析html构建DOM树

解析CSS构建CSSOM树

把DOM和CSSOM组合成渲染树(Render Tree)

在渲染树的基础上进行布局，计算每个节点的几何结构(Layout Tree)

把每个节点绘制到屏幕上(Painting)

当浏览器从服务器接收到了html文档，并把html在内存中转换成DOM树，在转换过程中如果发现某个节点上引用了CSS或者image，就会再发一个request去请求CSS或image，然后继续执行下面的转换，而不需要等待request的返回，当request返回后，只需要把返回的内容放入到DOM树中对应的位置就可以了。但当引用了JS的时候，浏览器发送一个JS request就会一直等待该request的返回。

CSS应该放在页面顶部的head标签中

由于Render Tree是由DOM树和CSSOM树组合成的，html页面需要等到CSS解析完后才能完成渲染，所以CSS应放在head标签内，优先下载解析，以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。

JS应该放在body的底部

因为浏览器需要一个稳定的dom树结构，而且js中很有可能有代码直接改变了dom树结构，浏览器为了防止出现js修改dom树，需要重新构建dom树的情况，所以就会阻塞其他的下载和呈现。

将JavaScript放在head内和body底部的区别也在于此，放在head里面，由于浏览器发现head里面有JavaScript标签就会暂时停止其他渲染行为，等待JavaScript下载并执行完成才能接着往下渲染，而这个时候由于在head里面这个时候页面是白的；如果将JavaScript放在页面底部，render Tree已经完成大部分，所以此时页面有内容呈现，即使遇到JavaScript阻塞渲染，也不会有白屏出现

如果CSS和JS都在head标签内，则应将JS放在所有CSS的前面

JS的执行有可能依赖最新样式。比如，可能会有var width=$('#id').width，这意味着，JS代码在执行前，浏览器必须保证在此JS之前的所有CSS(无论外链还是内嵌)都已下载和解析完成。

而嵌入的JS会阻塞后面的资源加载，所以当head中js放在CSS后面时，就会出现CSS阻塞下载的情况。

把JS放在CSS后会导致页面阻塞，去等待CSS的下载。

另外如果要在head引入JS尽量将JS内嵌。

async和defer也可以达到不阻塞渲染的效果

带有 defer 属性的

但是

defer 属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持，所以它不是一个理想的跨浏览器解决方案。在其他浏览器中，defer属性会被直接忽略，因此

async的作用和 defer一样，能够异步地加载和执行脚本，不因为加载脚本而阻塞页面的加载。

但是

在有 async 的情况下，JavaScript 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用 async 就很有可能出现错误。

本文版权属吴天乔所有，转载务必注明出处。

如有错误，欢迎指出。