HTML渲染过程

前言

HTML的渲染原理，作为前端开发的必须知道的问题。这里对HTML渲染做了一个整理，在网上参考了很多相关博客的资料，这里算是给自己做个笔记。

HTML渲染过程

这里的过程从服务器返回HTML文档开始，浏览器请求服务器的过程不多做介绍。

• 解析HTML
• 构建DOM(DOMTree)树
• DOM树和CSS样式附着，构建呈现树（RenderTree）
• 布局(涉及到回流)
• 绘制(涉及到重绘)

解析HTML和构建DOM树

解析HTML和构建DOM是同时执行的，当浏览器收到HTML文档时，浏览器通过HTML解释器解析HTML和构建DOM树。浏览器采用的是自上而下解析。所以在构建DOM树时两个标签会阻塞解析，就是会涉及到外部资源的link和script标签。例如:当解析到link标签加载这个link标签的外部资源，加载完构建好link以后才会继续往下解析。默认为同步阻塞，link标签有个async属性，例如当加了async属性，外部资源的加载和构建DOM就是异步，这时候没有阻塞(这里是通过个人Chrome测试得出，可能和其他结果有些出入，望指正)。

DOM树和CSS样式附着，构建呈现树(RenderTree)

DOM树已经构建完成，构建呈现树（RenderTree）将CSS样式附着到DOM树上，浏览器的CSS解释器解释CSS样式表，计算大小和位置信息等，但这时这些信息并没有实际应用，相当于计算好后的信息放在内存并没有使用。

布局

将计算后的大小和位置信息实装到DOM节点中，但是这时候并没有完成所有的工作。这里会涉及到回流和重绘。

绘制

布局完成后，就是将呈现树显示到浏览器上，就是绘制，比如背景颜色，字体颜色等。

回流(reflow)和重绘(repaint)

回流

当RenderTree的某部分或者全部的几何属性(width,height,margin…)或位置信息需要改变，重新构建时会发生回流。

重绘

当元素的某个属性需要发生变化(比如backgrou-color,color)重新渲染时会发生重绘。

回流和重绘发生场景

• 什么时候发生回流？什么时候放生重绘？
  
  • 回流的发生和定义所说的一样，当RenderTree几何属性发生改变需要重建构建时，比如某个元素的width或者height，还比如删除和增加节点，因为删除和增加节点改变了Render的整个结构。
  • 重绘则是在属性发生变化时会触发，比如background-color发生改变，color发生改变，当然这里特别要注意的是background-color发生改变并没有触发回流只是触发了重绘，但如果width发生改变的话不仅触发了回流而且触发了重绘，这里用一段表示。

            var style = document.body.style;
            style.margin = "2px"; // 回流和重绘
            style.padding = "1px"; //回流和重绘
            style.color = "blue"; // 再一次重绘
            style.backgroundColor = "#ccc"; //重绘

            var div=document.createElement("div");
            div.innerText="如果有一天我成了罪人";
            // 添加node回流+重绘
            document.body.appendChild(div);

总结

这次对HTML的渲染的过程做了一个总结，但有很多不足的地方，比如如何优化HTML等，这里就不多介绍，因为参考很多相关博客，如有雷同还请见谅，有错误的地方请指正。