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阻塞下载的情况。

参考:
http://www.haorooms.com/post/web_xnyh_jscss

把JS放在CSS后会导致页面阻塞，去等待CSS的下载。
另外如果要在head引入JS尽量将JS内嵌。

• async和defer也可以达到不阻塞渲染的效果
  • 带有 defer 属性的