在学习 React 之初，在它的官方文档上，很容易会看到 Virtual DOM，并且文档中也会写着，React 不推荐操作真实 DOM。那么，你有想过这是为什么吗？

最开始，查了很多关于 React 的资料，了解了Virtual DOM 和DOM，然而并未能真正解答为什么 React 不推荐操作DOM？

最近偶然看到这样一句话，DOM 操作会引起浏览器对网页进行重新布局，重新绘制。

那么，浏览器的渲染机制又是什么呢？

如上图，浏览器的渲染机制可以归纳为四个步骤：

  • 解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树种的HTML标签或js生成的标签到DOM节点，它被称为——内容树。
  • 构建渲染树：解析CSS（包括外部CSS文件和样式元素以及js生成的样式），根据CSS选择器计算出节点的样式，创建另一个树——渲染树。
  • 布局渲染树：从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
  • 绘制渲染树：遍历渲染树，每个节点将使用UI后端层来绘制。

从图中可以看出 Repaint 和 Reflow 分别出现在了第三步和第四步。而在我们操作DOM的时候，就有可能引起页面结构或者页面展示的变化；页面结构的变化会触发 Reflow，页面展示的变化会触发 Repaint。

关于Reflow和Repaint，简单讲，你在操作DOM前截一次屏，操作之后再截一次屏，如果你两次截屏每个坐标上的东西一样，那么久不需要 Reflow；Repaint 发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变 outline，visibility，background color，不会影响DOM结构。

什么会引起Repaint？

  • Change Visibility : hidden to visible
  • Change background , border-color , color
  • Elements skin changes visibility , but do not affect it’s layout

什么会引起Reflow？

  • Resizing the window
  • Changing the font
  • Adding or removing a stylesheet
  • Content changes, such as a user typing text in an input box
  • Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)
  • Manipulating the class attribute
  • A script manipulating the DOM
  • Calculating offsetWidth and offsetHeight
  • Setting a property of the style attribute

Reflow 都会引起 Repaint。