网页是怎样绘制的

DOM树的构建

  网页在绘制页面时首先解析页面中的所有标签（若有加载资源的标签会异步执行），根据深度优先的原则构建一个树形结构——dom树(domTree)。

CSS树的构建

   当dom树构建完成以后，加载css文件，解析css代码。构建出另一个树形结构——css树（cssTree）。

渲染树

  当页面的dom树和css树都绘制完成以后，总合两棵树。生成一棵新的树——渲染树（randerTree），根据节点和样式计算并构建页面。

domTree + cssTree = randerTre

重排/重构（reflow）

  指的是整个页面重头开始重新绘制，domTree,cssTree,randerTree都重新构建。
  触发重排的条件：dom节点的增删改，dom节点宽高、位置等变化，js实时获取标签样式（offsetWidth,getComputedStyle…）。

重绘（repaint）

  页面绘制一部分，比如改变字体、背景的颜色。这里重新绘制了cssTree、reanderTree。这就是重绘

ps:1.不管是重构还是重绘都会重新生成randerTree.
2.减少dom操作，是dom优化的重点。