引用这篇（https://news.ycombinator.com/item?id=9155564）文章
简短的回答是 DOM 并不慢。添加和删除 DOM 节点是一些指针交换，只不过是在 JS 对象上设置一个属性。
DOM 瓶颈只是那些导致重绘的东西吗？如果是这样，那么来自 React 的虚拟 DOM 的渲染是否应该摊销到与重绘整个组件相同的性能（当然是在一个浏览器 API 调用中）？我认为浏览器执行的算法只会尝试重新绘制从一种状态到另一种状态的差异（可能像 git？）。暗示浏览器自己维护一个虚拟 DOM。那么拥有虚拟 DOM 的意义何在？
还应该添加一个将displaystyle 属性设置为none不会严重影响性能的元素吗？我会自己对此进行分析，但我不知道该转向哪里，因为我最近才开始使用 JavaScript 编程。
这个问题对于 SO 来说可能有点宽泛，但作为一般性答案，同一篇文章中的一些其他引述也非常相关：
然而，布局很慢...
[...]
更糟糕的是，通过访问某些属性来同步触发布局...
[...]
正因为如此，很多 Angular 和 JQuery 代码都非常缓慢
[...]
React 无助于加快布局...
react 的虚拟 DOM 所做的是计算 DOM 的一个状态和下一个状态之间的差异，并以一种非常聪明的方式最小化 DOM 更新。
所以：
React 引擎就是这样做的（与其他几个具有虚拟 DOM 的工具/库相同）。
关于什么是虚拟 DOM 及其优点的更多信息，例如这里。
问： “DOM 瓶颈是否只是导致重绘的那些东西？”
答： 重绘取决于 GPU。与 DOM 更新的速度无关。DOM 更新几乎是即时的。一切都取决于影响文档流的更改。如果某个 DOM 或 DHTML 更改影响文档流。受影响的元素离文档元素的根越近，对文档回流的影响就越大。
您无需更改 DOM 内容即可导致文档重排。给定参数的简单样式属性更改可能会推动流的元素更改位置，从而导致强制文档重排。
因此不，固定大小元素上的 DOM 更改不会导致文档回流，而显示的更新实际上是即时的。将仅应用于局部受影响的区域，大部分时间在可能小于 300 x 200 像素正方形的帧中；可以在非常慢的 GPU 上以超过 120fps 的速度重绘的区域大小。但这比在电影院观看复仇者联盟要流畅 5 倍。
（流对齐内容的任何空间不等价的变化都会导致回流。所以我们必须注意影响浮动元素的大小和位置的变化，另一个内联元素的长流内的内联元素的变化，等等。 )
'
问： “添加一个显示样式属性设置为 none 的元素应该不会严重影响性能吗？”
答： 没错。在 DOM 中添加style.display: "none"元素不会改变文档的现有渲染，因此不会触发文档回流，自然不会有任何影响；即：将与向 JavaScript 对象添加新属性一样快。
问候。