Javascript React.js如何使用虚拟DOM加速渲染

引用这篇文章

简而言之，DOM并不慢。添加和删除DOM 节点是一些指针交换，只不过是在上设置一个属性 JS对象

DOM瓶颈是否只是那些导致重画的因素？如果是这样的话，那么React的虚拟DOM中的一个渲染不应该与重画整个组件（当然是在一个浏览器API调用中）具有相同的性能吗？我认为浏览器执行的算法只会尝试重新绘制从一个状态到另一个状态的差异（比如git？）。这意味着浏览器自己维护一个虚拟DOM。那么，拥有虚拟DOM有什么意义呢

---

另外，添加一个

display

style属性设置为

none

的元素是否应该不会严重影响性能？我自己会对此进行分析，但我不知道该从何处着手，因为我最近才开始javascript编程。

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

但是，布局很慢…
[…]
更糟糕的是，通过访问某些属性同步触发布局…
[…]
因此，许多Angular和JQuery代码的速度都非常慢
[…]
React无助于加快布局速度

react的虚拟DOM所做的是计算DOM的一个状态和下一个状态之间的差异，以非常智能的方式最小化DOM更新

因此：

• DOM本身并不慢
• 但是布局很慢
• 几乎所有的DOM更新都需要布局更新
• 因此，DOM更新越少，速度就越快

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

有关什么是虚拟DOM及其优点的更多信息，例如..

---

Q:“DOM瓶颈是否只是导致重画的因素？”

---

A: 重画依赖于GPU。与ODDOM更新的速度无关。DOM更新几乎是即时的。 一切都取决于影响文档流的更改。如果某个DOM或DHTML更改影响文档流。受影响的元素离文档元素的根越近，对文档回流的影响就越大

无需更改DOM内容即可导致文档回流。对给定参数的简单样式属性更改可能会推动流的元素更改位置，从而导致文档回流

因此，不，固定大小元素上的DOM更改不会导致文档回流，而显示的更新实际上是即时的。将仅应用于局部受影响的区域，大部分时间在小于300 x 200平方像素的帧中；在速度非常慢的GPU上，可以以超过120fps的速度重新绘制的区域大小。但这比在电影院看《复仇者》要流畅5倍

（流对齐内容中任何空间上的非等效更改都会导致回流。因此，我们必须注意影响浮动元素大小和位置的更改，以及另一个内联元素的长流中内联元素的更改等。）

"

---

Q:“添加“显示样式”属性设置为“无”的元素是否应该不会严重影响性能？”

---

A: 没错。向DOM中添加style.display为“none”的元素不会改变文档的现有呈现方式，因此不会触发文档回流，自然不会产生任何影响；i、 例如：将与向JavaScript对象添加新属性一样快

---

关于。

如果你只画一次，没有什么是慢的。这就是我想问的，如果你用虚拟DOM（$（）.prepend或者也许$.append（））渲染

n次，而不是
n
浏览器API调用，那么差异应该很大吗？需要时它的prepend或者append，只要更改属性或者只更改它的一个后代，所有这些都是基于数据的变化和diff算法的。如果chrome能做到这一点，那将是一个大新闻。@你说得对！如果是为了你的公司，我可能没必要看它！我只是好奇。谢谢你！是的！我明白，但是如果说我有一个
div
，它包含了页面的所有html，然后我会完全更新这个div。这也是一个更新。如果react运行并计算差异本身。这也只是一个更新。是什么阻止浏览器计算新旧状态之间的差异？通常，
包含一个非常复杂的HTML树，其中包含许多元素。如果替换整个树，那么1个更新实际上会解压为数千个子更新。react只做必要的子更新。如果替换整个树，并且每个子组件也不同，则react的差异引擎没有效果。但在现实生活中，这种情况几乎从未发生过。AFAIK浏览器不像react那样进行差异处理。我想，“阻止”它们的是浏览器开发团队开发优先级的问题。