浏览器渲染机制之DOM树

浏览器渲染机制的第一步是DOM树的构建，DOM树的构建过程：一般为
bytes–>characters–>tokens–>nodes–>object modal。
（1）当服务器返回一个html文件给浏览器的时候，其实浏览器接收到的是一些字节数据。
（2）浏览器根据http响应中的编码方式一般为utf-8，进行对这些字节解析成字符。如果这时候的解析编码与文件的编码方式不一样，会导致出现乱码。这也是为什么要在html文件中设置meta的原因。meta用于高速浏览器页面使用的是哪种编码格式。
（3）接下来浏览器要将解析出来的字符语义化，这就要根据页面设置的DTD中对标签的定义。DTD是W3C的一个文件，该文件中定义了哪些字符串是有意义的，哪些是没有意义的。一般设置在html页面第一行，分为过渡、严格、框架三种。每种对标签的定义都不一样，这也是为什么运用不同的DTD布局会不一样。
（4）浏览器再将语义块进行创建对象，形成一个个节点
（5）此时html解析器就开始运行了，一个个遍历节点，并加入到DOM树中，html解析器这种遍历是深层次的遍历，即要等该节点以及其子节点甚至孙子节点全部遍历完毕才会继续遍历同级节点。直至到遍历到最后一个节点，DOM树就会构建完成。然后触发domcontentloaded事件。
（6）在html解析器解析时，解析到css。图片和js时，也会并行发起请求。对于css和图片，在下载时会继续浏览器解析，。当加载结束进行应用样式时也不会停止解析，因为样式不会改变DOM树结构。
但是对于js文件，一旦浏览器解析到script标签时会立即停止渲染并执行js脚本。若是外部文件，则必须等到js脚本文件下载完成，并执行完毕js脚本才继续渲染。因为js脚本有可能会对dom元素进行操作并改变了原有的dom树，进行再次的reflow和repaint，这就浪费了这次解析。如果js脚本下载或执行过久，就会导致html解析阻塞。这也是为什么js脚本要放在body后面