浏览器渲染HTML页面的过程

友情链接：http://www.tuicool.com/articles/vmu2Uvn

浏览器渲染过程

1. 浏览器接收到html代码，即自上而下解析：构建DOM树+构建CSSOM =>渲染树（解析——构建对象模型Object Model）
2. 遇到script文件和CSS文件都会另起线程去下载；内嵌的script标签和style标签，会直接执行，分别阻塞DOM树和CSS规则树
3. 无论内嵌的script脚本、外链的script脚本下载完都会阻塞构建DOM树； CSS文件执行和内嵌的style标签阻塞CSSOM
4. 直到DOM树和CSSOM规则生成完毕后，浏览器结合两者生成渲染树RenderTree，浏览器将渲染树绘制到页面上，也就是首次显示页面
5. 最后，body底部的JS脚本下载完成后通过DOM API修改DOM， 通过CSSOM API修改样式，每次修改都会造成渲染树RenderTree的重新布局和重绘， 也就是Reflow。（而修改颜色的话，只会Repaint 不会Reflow

注意：

1. 把js放在body之后，是为了预防外部js文件过多时，浏览器呈现页面出现延迟，延迟期间浏览器的窗口一片空白。

2. 当遇到script文件加载／执行会阻塞后面dom树的构建（因为javascript可能会改变dom树）；而遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建（除非遇到script标签并且css文件依旧未加载完成），但不会渲染绘制到页面上。而无论哪个阻塞，该加载的文件还是会加载，例如html文档中的其他css／js／图片文件。

3. js脚本放在head和body 有什么区别，分别是在什么情况下 总结：
   head中的脚本会在页面加载之前解析，可以保证脚本在任何调用之前被加载
   body中会在页面加载完成之后读取，放在body部分的脚本通常被用来生成页面的内容。
   因为加载js脚本会阻塞页面的加载，为了用户体验也为了脚本可以操作dom，一般放在body中，
   浏览器解析html是从上到下的。
   如果把js放在head里的话，则先被解析,但这时候body还没有解析，所以会返回空值。一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码：
   windows.οnlοad=function(){ }

总结

内嵌和外链的js脚本，都会阻塞DOM树的构建；
style标签和css文件，都会阻塞CSSOM的构建；

script脚本的async和defer属性

async，立即下载，异步操作，即和加载和渲染后续文档元素的过程并行进行，也就是异步，一起操作
defer，立即下载，延迟解析，可以延迟到文档完全被解析和显示之后再执行