在这种情况下使用 Knockout.js 会更好吗？ [关闭]答案

【问题标题】：Would it be better to use Knockout.js in this situation? [closed]在这种情况下使用 Knockout.js 会更好吗？ [关闭]
【发布时间】：2013-01-11 19:36:09
【问题描述】：

我目前正在开发一个带有 Django/Python 后端的相当大的分析程序，并且正在使用 jQuery。

假设我所有的统计数据都基于“Person”的概念。查看概览统计信息后，有人可能想打开个人Person 并查看他们的统计信息。

目前我将 AJAX 请求发送回我的服务器，Django 获取此人，为他们呈现整个 DOM 树，然后返回它。 jQuery 获取返回的 <div> 并将其添加到文档 DOM 树中，并与任何其他打开的人一起。

所以每个Person 都有自己的 div，其中包含所有相同的元素，只是包含他们的信息。您正在查看的当前人是 display:block; 而我是 display:none; 任何其他人。任何需要返回服务器以获取更详细信息的元素（例如查看更详细信息的按钮）都使用 Django 的模板系统进行编码，并提供类似getMoreInformation('myUUID'); 的链接。我还想指出，我发现自己经常在元素 ID 中使用 UUID，因此 AJAX 可以在需要时找到并修改正确的人的信息。

我最近发现了 Knockout.js，我想知道在这种情况下使用它是否会更好，并且对速度等有一些担忧。

Knockout.js 似乎是“正确的做法”，因为它在后端数据与它在 Javascript 中的表示方式（模型到模型）而不是单个数据之间提供了更好的一对一关系具有为任何函数传递的 id 的 DOM 元素。更不用说它会大大减少 DOM 树中的元素数量。

但是，我的主要受众是 IE8，我担心 Knockout.js 存在性能问题。虽然目前我只是隐藏和显示与您正在调查的人相关的 div，但 Knockout.js 必须遍历所有 data-bind 并使用 Javascript 替换它们的内容。

在这种情况下使用 Knockout.js 有哪些性能问题？或者它们会很小以至于无关紧要吗？很难找到任何基准，是否有人在迁移到 Knockout.js 时遇到过较慢的 UI？（在“现实世界”应用程序中，更少的 DOM 元素 + Knockout.js 与更多的没有 Knockout.js 的 DOM 元素是我在这里寻找的。）

【问题讨论】：

knockout.js 比...什么更好？没有什么可比的。
@KevinB 会不会比我现在做的更好（前4段）？

标签： jquery ajax django dom knockout.js

【解决方案1】：

我认为淘汰赛对此非常有用，请记住，您可以使用可见绑定来设置display: none，这样还不错。此外，就性能而言，它的表现可能与 jQuery 一样好或更好，因为绑定可以直接访问元素并且不需要查询 DOM。

但是，如果您的服务器返回 html，则可能会涉及到相当多的工作。相反，您希望它以 JSON 格式返回数据并在浏览器中构建 UI。此外，除非您希望在将单个值加载到视图中后对其进行更新，否则您甚至可能不需要单个数据位是可观察的。

我不明白为什么您认为切换到淘汰赛会产生更多或更少的 DOM 元素。 Knockout 使用在渲染之前不需要在 DOM 中的模板。您当前的实现是将大块 html 插入到 DOM 中，并且在其他条件相同的情况下它们应该是相同的。

【讨论】：

是的，绑定具有作为局部变量绑定到的元素
目前每个人都有一个完整的 DOM 树。据我了解，我会有一段 HTML 链接到 currentPerson，它是 People 数组的成员？因此，如果我只是将 currentPerson 设置为另一个人，则 HTML 会更新以反映该人的信息。您仍然会使用模板并为每个人拥有一整棵树（而不是 currentPerson 方法）？有趣的是，您提到绑定不需要查询 DOM，我没有意识到这一点。谢谢！
@MatthewKremer：您只有当前时间显示的 dom 元素。您所有的“人”都存储在 javascript 中，然后只有当您在显示他们信息的绑定中使用他们时，才会为每个人创建 html。除非您想一次显示所有人，否则您不会为每个人存储一个 dom 树。
@wired_in 正确，我在质疑这个答案的最后一段。我同意你的看法。让 Knockout.js 必须通过一个 dom 树并用当前人员信息替换比拥有 5、10、20 多个不同的 dom 树要慢，我只是在这些树之间切换是我想要达到的。跨度>
如果构建人员节点有很多逻辑，它可能比将现成的 html 拍成 div 慢，但我认为这不会引起注意。还要考虑您正在将处理负担卸载到浏览器而不是服务器。

【解决方案2】：

我想评论，但评论太长，所以这里是一个答案

Optimizing performance of data visualisation web application

有类似想法后，我换了一个数据可视化工具；

它过去在每次交互时都会调用很多服务器，

现在服务器发送大量数据，剩下的由 js 完成；

我在接收数据时设置索引（最多 170kb 未压缩），然后根据用户交互修改 dom（不显示：到处都没有，内容被更改或分离；数据存储在 javascript 数组中而不是 html元素）

结果出奇的快（我很惊讶）；

您必须小心将元素附加到 DOM 的方式，以创建结构良好的对象以访问最少的 DOM；

不知道淘汰赛，但 imo 如果它是大的和特定的，并且你寻找性能，你最好自己做算法（这并不难，只需将你的数据处理成索引数组，当事件触发时将按原样使用 - 即接待处一个循环，不再）

【讨论】：

感谢您的链接，我们过去在客户端做的更多，但是我们分析了大量的数据，所以我们确定只发送需要的数据效率更高。不过肯定会看看这个问题，谢谢！
您的 js/jquery 可能没有优化或设计良好，并且您说您将数据保存在 dom / bad 中。发送这么多请求是没有效率的。（我们在这个项目中处理了 5mb+ 的原始数据，并通过将大部分工作从服务器转移到客户端来提高效率——之前的想法和你一样，我错了！）