0

I'm currently developing a rather large analytic program with a Django/Python backend and am using jQuery.

Let's say that all of my statistics are based on the concept of a "Person". After viewing overview statistics, someone may want to open up an individual Person and look at their statistics.

Currently I send an AJAX request back to my server, Django fetches the person, renders an entire DOM Tree for them, and returns it. jQuery takes the returned <div> and adds it to the documents DOM tree along side any other opened people.

So every Person has their own div with all of the same elements, just with their information. The current person you're viewing is display:block; while I display:none; any other people. Any elements (such as a button to view more detailed information) that need to go back to the server to fetch more detailed information are coded with Django's templating system and given an onlick of something like getMoreInformation('myUUID');. I would also like to note that I find myself using UUID's in element IDs frequently so AJAX can find and modify the right person's information if need be.

I recently discovered Knockout.js and am wondering if it would be better for me to use it in this situation, and have some concerns about speed, etc.

It seems like Knockout.js would be "the right thing to do" as it provides a better 1-to-1 relationship between data on the backend and how it is represented in the Javascript (models to models) instead of individual DOM elements with ids passed for any functions. Not to mention it would drastically reduce the amount of elements in the DOM tree.

However, my primary audience is IE8, and I have concerns on Knockout.js having performance problems. While currently I just hide and show the divs related to the people you're investigating, Knockout.js would have to go through all of the data-bind's and use Javascript to replace their content.

What are the performance concerns for using Knockout.js in a situation like this? Or would they be so minimal as to not matter? Hard a hard time finding any benchmarks, has anyone experienced slower UI when moving to Knockout.js? (Less DOM Elements + Knockout.js vs. More DOM Elements w/o Knockout.js in a "real world" application is kind of what I'm looking for here.)

4

2 回答 2

1

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

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

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

于 2013-01-11T19:47:35.453 回答
0

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

优化数据可视化 Web 应用程序的性能

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

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

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

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

结果非常快（我很惊讶）；

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

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

于 2013-01-11T19:51:18.927 回答