- 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属性的<script>标签可以放置在文档的任何位置。对应的 JavaScript 文件将在页面解析到<script>标签时开始下载，但不会执行，直到 DOM 加载完成，即onload事件触发前才会被执行。当一个带有defer属性的 JavaScript 文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起并行下载。
但是
- 带有
defer属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持，所以它不是一个理想的跨浏览器解决方案。在其他浏览器中，defer属性会被直接忽略，因此<script>标签会以默认的方式处理，也就是说会造成阻塞。然而，如果您的目标浏览器支持的话，这仍然是个有用的解决方案。
-
async的作用和defer一样，能够异步地加载和执行脚本，不因为加载脚本而阻塞页面的加载。
但是
在有
async的情况下，JavaScript 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用async就很有可能出现错误。
参考：
网页性能之HTML,CSS,JavaScript
http://www.zhihu.com/question/20357435/answer/14878543
JavaScript 的性能优化：加载和执行
浏览器工作原理：How browsers work
前端文摘：深入解析浏览器的幕后工作原理
本文版权属吴天乔所有，转载务必注明出处。
如有错误，欢迎指出。
