为什么React的Virtual DOM概念被认为比脏模型检查更具性能？

本文翻译自：Why is React's concept of Virtual DOM said to be more performant than dirty model checking?

I saw a React dev talk at ( Pete Hunt: React: Rethinking best practices -- JSConf EU 2013 ) and the speaker mentioned that dirty-checking of the model can be slow. 我在（ Pete Hunt：React：重新思考最佳实践 - JSConf EU 2013 ）中看到了React dev的演讲，并且发言人提到模型的脏检查可能很慢。 But isn't calculating the diff between virtual DOMs actually even less performant since the virtual DOM, in most of the cases, should be bigger than model? 但是，由于虚拟DOM在大多数情况下应该比模型更大，所以虚拟DOM之间的差异实际上并不是很差。

I really like the potential power of the Virtual DOM (especially server-side rendering) but I would like to know all the pros and cons. 我非常喜欢Virtual DOM的潜在力量（特别是服务器端渲染），但我想知道所有的优点和缺点。

---

#1楼

参考：https://stackoom.com/question/1QZVZ/为什么React的Virtual-DOM概念被认为比脏模型检查更具性能

---

#2楼

I recently read a detailed article about React's diff algorithm here: http://calendar.perfplanet.com/2013/diff/ . 我最近在这里阅读了一篇关于React的diff算法的详细文章： http ： //calendar.perfplanet.com/2013/diff/ 。 From what I understand, what makes React fast is: 根据我的理解，React的快速之处在于：

• Batched DOM read/write operations. 批量DOM读/写操作。
• Efficient update of sub-tree only. 仅有效地更新子树。

Compared to dirty-check, the key differences IMO are: 与脏检查相比，IMO的主要区别是：

1. Model dirty-checking : React component is explicitly set as dirty whenever setState is called, so there's no comparison (of the data) needed here. 模型脏检查 ：每当调用setState时，React组件都显式设置为脏，因此这里不需要比较（数据）。 For dirty-checking, the comparison (of the models) always happen each digest loop. 对于脏检查，（每个模型）的比较总是发生在每个摘要循环中。

2. DOM updating : DOM operations are very expensive because modifying the DOM will also apply and calculate CSS styles, layouts. DOM更新 ：DOM操作非常昂贵，因为修改DOM也会应用和计算CSS样式，布局。 The sav