浏览器如何渲染Dom结构，在Dom结构发生变化之后，浏览器如何响应

一.浏览器如何渲染 dom 结构

  浏览器渲染dom结构大概可以分为以下一个步骤。
  1.解析html结构，生成dom树
  2.解析css结构，生成css树，此步骤与1步骤几乎是同时的
  3.合并dom树和css树，形成渲染树（render树）
  4.根据render树，绘制页面结构，展现到页面上

- 可以参见下图

 

  DOMContentLoaded事件在初始的HTML文件被完全解析，不需要等待css,js，图片等被加载完成时出发

  Load事件在页面上的 DOM，CSS，JS，图片已经全部加载完毕时触发

  在解析html文件的过程中，只有解析完成css，才会解析JavaScript脚本，而在解析dom结构时，遇到script标签，就会暂停解析dom。因此css会阻塞js的执行，js会阻塞dom结构的解析。

二.dom结构发生变化后，浏览器如何响应

  在具体解释这个问题之前，我们先来了解名词。

  repaint重绘：重新绘制dom树中的某一dom节点。

  reflow回流：重新绘制整个dom树。

  在dom结构发生变化之后，浏览器如何响应呢？那么首先要看dom节点发生了怎么样的变化。如果dom节点的改变不涉及任何排版布局，比如背景颜色改变，那么就会进行重绘repaint。如果dom节点的改变引起了排版布局的改变，换言之，引起了dom树的改变，比如，display:none; 由或者高度宽度改变，就会引起reflow。