Dom操作重建整个DOM结构

时间:2017-07-18 07:02:04

标签: javascript dom

从第二节的下面链接我看到声明:“举个例子,假设你有一个包含十个项目的列表。你检查了第一个项目。大多数JavaScript框架都会重建整个列表。那就是十个时间超过必要的工作!只有一个项目发生了变化,但剩下的九个项目完全重建了之前的状态。重建列表对于网络浏览器来说没什么大不了的,但是现代网站可以使用大量的DOM操作。低效的更新已成为一个严重的问题。“请详细解释一下。如何操纵一个dom元素重建整个父元素?

https://www.codecademy.com/articles/react-virtual-dom

1 个答案:

答案 0 :(得分:0)

假设您按特定顺序拥有元素列表,并且该列表每秒更新一次(例如,商店中销售的最后商品的列表,按受欢迎程度排序)。在每次更新中,任何项目都可以不在列表中,新项目可以在随机位置输入。这使得通过移动,替换或插入元素来更新列表变得困难,因此最简单的方法是在任何更新时重新生成列表。

这种情况是最糟糕的情况,但一般来说这种方法最常见,因为最简单的方法是:忘记旧列表并放置一个新列表,即使没有任何更改。

React及其“虚拟DOM”能够获取新列表,将其与旧列表进行比较,并检测“真实DOM”中所需的更改并应用它们。这是基于这样一个事实,即虚拟DOM的操作速度比实际操作快得多。