我们现在知道更改 dom (“更改 HTML”) 的最简单方法是更改元素中的 innerHTML 属性。这种修改 html 的方法在 DOM 重绘中表现不佳(“更新用户看到的内容”)。这是因为 innerHTML 需要从字符串中解析 DOM 节点,预处理并附加它。如果网页上的 HTML 更改过多,则会出现性能问题。
那么性能问题是如何解决的呢?
此问题已通过创建虚拟 DOM 得到解决。虚拟 DOM 是存储在内存中的真实 DOM 的副本。当用户与 Web 页面交互并且 Web 页面的状态更新时,将在内存中创建一个新的虚拟 DOM。将这个新的虚拟 DOM 与以前的虚拟 DOM 进行比较以识别更改,并将这些更改应用于真实的 DOM 以向用户显示。
这是您使用的现代库的工作逻辑,并使用 dif 算法进行比较。它们都使用虚拟 DOM。但是,尽管虚拟 DOM 方法很快,但对于性能,仍有一些要点需要考虑。虚拟域中的更改将呈现整个网页库具有用于性能优化的钩子