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

How React.js speeds up rendering with a virtual DOM

本文关键字：加速 DOM 虚拟 js 何使用 React 更新时间：2023-09-26

引用(https://news.ycombinator.com/item?id=9155564)文章

简单的回答是DOM并不慢。添加&删除DOM节点是一些指针交换，只不过是在上设置一个属性JS对象。

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

此外，添加一个display样式属性设置为none的元素是否应该不会严重影响性能？我会自己描述这一点，但我不知道该从哪里开始，因为我最近才开始javascript编程。

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

但是，布局很慢
[…]
更糟糕的是，布局是通过访问某些属性来同步触发的
[…]
正因为如此，许多Angular和JQuery代码都慢得离谱
[…]
React无助于加快布局。。。

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

因此：

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

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

关于什么是虚拟DOM及其优势的更多信息，例如，在这里。

Q: "DOM瓶颈只是那些导致重绘的东西吗？"

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

您不需要为了引起文档回流而更改DOM内容。对给定参数进行简单的样式属性更改可能会促使流中的元素更改位置，从而迫使文档回流。

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

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

'

Q: "添加一个显示样式属性设置为none的元素是否会严重影响性能？"

A:这是正确的。将style.display:"none"的元素添加到DOM中不会对文档的现有呈现产生任何更改，因此不会触发文档回流，自然也不会产生任何影响；即：将与向JavaScript对象添加新属性一样快。

谨致问候。