React.js如何加速虚拟DOM的渲染

Question

引用此（https://news.ycombinator.com/item?id=9155564）文章

  

简短的回答是DOM并不慢。添加＆amp;删除DOM   node是一些指针交换，只不过是设置一个属性   JS对象。

DOM的瓶颈只是导致重绘的东西吗？如果是这样，那么React的虚拟DOM中的渲染不应该像重绘整个组件一样（当然是在一个浏览器API调用中）吗？我认为浏览器执行的算法只会尝试将差异从一个状态重绘为另一个状态（比如git可能？）。暗示浏览器自己维护虚拟DOM。那么拥有虚拟DOM有什么意义呢？

还应该添加一个display样式属性设置为none的元素不会严重影响性能吗？我自己会对此进行分析，但我不知道到底在哪里转向，因为我最近才开始使用javascript编程。

Answer 1

对于SO来说，这个问题可能有点宽泛，但作为一般性答案，同一篇文章中的其他引用也非常相关：

  

然而，布局很慢......
  [...]
  更糟糕的是，通过访问某些属性来同步触发布局...
  [...]
  因此，很多Angular和JQuery代码都很愚蠢   [...]
  React无助于加快布局......

虚拟DOM的作用是，计算DOM的一个状态与下一个状态之间的差异，以非常智能的方式最小化DOM更新。

所以：

• DOM本身并不慢
• 但布局很慢
• 几乎所有DOM更新都需要布局更新
• 所以更少的DOM更新更快

反应引擎就是这样（与其他几个带有虚拟DOM的工具/库相同）。

有关虚拟DOM的更多信息及其优势，例如： here

Answer 2

问： ＆＃34; DOM是否只会导致重绘的内容？＆＃34;

答 重绘依赖于GPU。与DOM更新的速度无关。 DOM更新几乎是即时的。 一切都取决于影响文档流程的变化。如果某个DOM或DHTML更改影响文档流。受影响的元素越接近文档元素的根，对文档重排的影响就越大。

您不需要更改DOM内容以导致文档重排。对给定参数的简单样式属性更改可能会推送流的元素以更改位置，从而导致文档重排。

因此不，固定大小的DOM更改元素不会导致文档重排，而显示的更新几乎是即时的。将仅应用于局部受影响的区域，大多数时间在一个可能小于300 x 200像素的帧中;在非常慢的GPU上可以重新绘制超过120fps的区域大小。但这比在电影院观看复仇者联盟要轻松5倍。

（流对齐内容中的任何空间非等效变化都会导致重排。所以我们必须注意影响浮动元素大小和位置的变化，内部元素在另一个内联元素的长流内的变化等等等等）

＆＃39;

问： ＆＃34;是否应该将显示样式属性设置为none的元素添加为不会严重影响性能？＆＃34;

答 这是对的。使用 style.display：＆＃34; none＆＃34; 向DOM添加元素将不会更改文档的现有呈现，因此，不会触发文档重排，并且自然会，根本没有影响;即：将与向JavaScript对象添加新属性一样快。

问候。