KnockoutJS foreach 阻塞主线程

Question

当我的 viewModel 中有一个大型数据集并且我使用 foreach 循环对象数组以将每个对象渲染为表中的一行时，KnockoutJS 将阻塞主线程，直到它可以渲染为止。有时需要几分钟（！）。

这是一个 jsFiddle 示例，使用包含 2000 个对象的数据集，其中包含 url 和 code。在某些情况下，真实数据将具有更长的 URL 和其他 4 列（本例中只有 2 列）。我还添加了一些简单的样式，因为添加样式似乎也会在此过程中减慢速度。

警告：您的浏览器可能崩溃

http://jsfiddle.net/DESC3/7/< /a>

Answer 1

我建议如果您有如此大的数据集，请尝试替代解决方案。例如，slickGrid 通过仅为数据生成 HTML 元素，以更有效的方式呈现大型数据集。实际上可见。我们已将其用于大型数据集，并且表现良好。

Answer 2

像这样的事情怎么样？比如说，您想要渲染 viewModel.items = ko.observableArray() 。

1. 拥有一个包含所有数据的单独的不可观察数组：var itemsToRender = functionThatReturnsLargeArray()。
2. 将 itemsToRender 中的部分数据放入可观察数组中。假设只有 50 个元素。
3. 在 setTimeout 回调中不断将元素添加到可观察数组中。

---

注意1：您可以在 setTimeout 回调中添加一些时间跟踪，并增加/减少每次迭代时添加的项目数量。您的目标是将每次回调时间保持在 50-100 毫秒以下，以便您的应用程序仍然具有响应能力。

var batchSize = 50; // default number of items rendered per iteration
var batchOffset = 0;
function render(items, itemsToRender, done) {
    setTimeout(function () {
        var startTime = new Date().getTime();
        items.pushAll(itemsToRender.slice(batchOffset, batchSize));
        batchOffset += batchSize;
        // at this point Knockout rendered next batchSize items from itemsToRender
        var endTime = new Date().getTime();
        // update batchSize for next iteration
        batchSize = batchSize * 50 / (endTime - startTime); // 50 milliseconds
        batchSize = Math.min(itemsToRender.length, batchOffset + batchSize);
        if (batchSize > 0) render() else done(); // callback if you need one
    }, 0);
}
/* I haven't actually tested the code */

另一种批量大小更新策略可以基于目标 FPS。假设您希望达到 60 fps 的更新速率，因此每 1000 毫秒调用 setTimeout 60 次。处理整个集合需要更长的时间。您还可以使用 requestAnimationFrame 代替 setTimeout 并查看效果如何。

编辑：构建-in throttting 已添加到 Knockout JS 中1.3（目前处于测试阶段，但看起来相当稳定）。

---

注意2：如果视图上的某些其他数据依赖于viewModel.items，您仍然可以将其映射到原始数组itemsToRender。例如，假设您想要显示集合中的项目数。如果您使用 viewModel.items().length，您最终会在 UI 中更改大小值，同时更多项目会被渲染。为了避免这种情况，您可以首先将大小绑定定义为基于 itemsToRender 的 dependentObservable，而不是 viewModel.items。渲染完所有项目后，如果您认为合适，可以将其重新映射到 viewModel.items 上。