提高淘汰赛的表现？答案

【问题标题】：Improving performance of knockout foreach?提高淘汰赛的表现？
【发布时间】：2013-12-16 22:44:52
【问题描述】：

我有一个包含 50 个项目的列表，每个项目都有几个像这样的块：

<!-- ko if: replyCount() == 1 -->
    <p class="reply-count-label">reply</p>
<!-- /ko -->
<!-- ko if: replyCount() != 1 -->
    <p class="reply-count-label">replies</p>
<!-- /ko -->

这是在一个虚拟的foreach 循环中。

即使只有 50 个元素，页面也需要大约 1 秒的时间来呈现，因此用户体验非常糟糕，因为它们在呈现时会四处移动。这些 observables 没有被更新或任何东西——只是初始加载时间很慢。

加载时我唯一要做的就是地图：

 self.posts = ko.mapping.fromJS(model.questions);

我正在寻找优化此功能的方法。这里的罪魁祸首是我使用ko.mapping，还是使用虚拟元素，或if + foreach 绑定，或组合？

【问题讨论】：

你需要做一些计时实验。尝试暂时删除这些条件部分，看看它是否有明显的不同。如果不是，他们不是问题。在调用fromJS 之前和之后将当前时间输出到控制台。没有什么可以代替实际测量您的程序花费时间的地方。我们开发人员因猜测和错误而臭名昭著。
另外我会尝试将上面的所有代码更改为：<p class="reply-count-label" data-bind = "text : replyCount()==1 ? 'replies' : 'reply'"></p>
我在 PC 上“一眨眼”就渲染了数百个复杂的嵌套元素。方法或 KO 绑定本身并没有什么慢 - 尝试隔离 actual 慢位。（另外，我可能会使用 text 和计算的 observable 编写上述内容..）
速度缓慢可能是由很多原因造成的，包括复杂的 CSS 规则。尝试将 CSS 注释掉，看看是否有影响。

标签： knockout.js

【解决方案1】：

这里绝对值得一试 -

<ul data-bind="foreach: { data: replyCounts, as: 'replyCount' }">
    <li data-bind="replyCount === 1">Show me</li>
</ul>

这样您就不必每次都访问函数来访问值，因为它已经被解析了。我无法测试这会给你带来的结果，因为我无法使用小提琴或任何东西来复制问题，所以我看不到差异所以如果这不能提供价值，那么请随时让我知道，我可以删除它。

【讨论】：