DOM 可以有差异地更新吗？

Question

首先，我已经对此进行了广泛的研究，使用了我认为可以应用的不同名称，例如“Javascript 差异模板”、“Javascript 更新 DOM 而无需重新解析”、“Javascript 使用增量渲染 UI”和其他变体.如果我错过了涵盖我的问题的现有线程，请原谅我。

本质上，我首先想知道浏览器中的大多数 DOM 解析器是否已经执行以下操作，即使我很确定答案是否定的：它们是否以不同方式更新 DOM（即只有在自上次更新以来的同一棵树）何时修改节点？就像我说的，我认为答案是否定的，他们实际上会重新解析并重新渲染更新的节点及其树中的所有内容。

这让我想到了我的问题：是否有任何 Javascript 库可以管理对数据模型和 DOM 的差异更新？

我意识到我可能对此不太清楚，所以我将提供一些代码来解释我的意思：http://jsfiddle.net/btZ3e/6/

在该示例中，我有一个“事件队列”（实际上是一个时间线），其中包含事件。 UserEvents 都有一个唯一的 ID。它现在的工作方式是 UserEvents 可以执行（）和撤消（），在前者他们修改内存中的数据（myAppManager.dataModel）并在 DOM 中附加一个

，而在后者他们撤消这些更改。 （每个 UserEvent 的 undo() 都在同一个 UserEvent 的 execute() 中定义，以提供更大的灵活性，可以考虑独立移动事件）

然后，有 myAppManager.render() ：

 var myAppManager = new function () {
     this.dataModel = {
         someValue: 0,
         disableButton: false
     };

     this.render = function () {
         $('#displaysomevalue').text(this.dataModel.someValue);
         $('#go').prop('disabled', this.dataModel.disableButton)
     }
 }

myAppManager.render() 怎么可能（真的吗？）只更新自上次更新以来发生的变化？我认为这意味着我的数据模型中也必须有某种差异化系统。最终我想知道这一点，因为我将通过 websockets 每秒接收多个新的 UserEvents（假设最坏的情况是每秒 20-30 个？），我想知道我是否需要为每一个新的部分重新渲染我的整个 UI我得到的数据。我调查了 Javascript 模板，看看他们是如何做到的，似乎他们都走这条路：

document.getElementById('someTemplateContainer').innerHTML = someTemplateEngine.getHtmlOutput();

但我怀疑它们是否需要在某些情况下像我需要的那样经常刷新。有这方面的前期工作吗？我错过了什么吗？非常感谢！

Answer 1

例如，Backbone.js 这样做的方式是模型（基本上是名称：值对）由视图/模板支持，并且模型具有与它们相关联的事件，例如 change。假设您有一个 <ul>，其中每个 <li> 是一个 Backbone 视图，由一个模型支持。

您可以绑定每个模型的 change 事件以重新渲染它自己的视图（并且只渲染它自己的视图）。因此，当第 5 个<li> 更改名称时，它将仅重新渲染该<li> 的内容，而<ul> 的其余部分则不受干扰。

这仅允许新的或更新的模型对其 DOM 节点进行触摸和更新。

不同之处在于您不需要知道“整个<ul> 的哪些部分发生了变化，只需渲染这些部分”，因为您实际上已将问题分解为一系列较小的问题，每个问题都是负责自己的渲染和更新逻辑。 （我相信其他框架也有类似的模式，你也可以在 vanilla JS 中做到这一点）