KnockoutJS：我应该如何处理繁重的小部件初始化代码？

Question

我目前正在尝试优化使用 KnockoutJS 进行视图绑定和呈现的应用程序。我们在以下场景中发现了一个巨大的瓶颈，即数据集大小不断增长：

• 数据集 (observableArray) 显示在 html 表格中。
• 同时显示50行。
• 行模型中的每个字段都是可观察的，因为数据是内联可编辑的（输入、选择、...）
• 每行存在 8 个使用 Select2 小部件 (http://ivaynberg.github.io/select2) 和 jQuery 日期选择器初始化的选择。

我已经实现了这些 KnockoutJS 性能提示，我在不同的网站上找到了这些提示：

• observable 数组与完整的数据集（observable 的调用）一起发布，而不是与多个 push() 调用一起发布。
• 按照多个站点的建议，我将模板绑定与 foreach 选项结合使用，而不是将两者拆分为单独的绑定。
• Datepicker 和 Select2 被实现为自定义剔除绑定处理程序。
• ko.applyBindings 直接以 table-element 作为第二个参数调用，因此不是整个 DOM 都被敲除绑定。

但在我看来，主要瓶颈似乎是附加小部件的初始化。我测量了 Select2 小部件的创建过程，大约需要 15 毫秒。当然，这很快就会累积成 50 行和 8 列。因此，对 observable 数组的一次调用以加载完整的数据集最多需要 10 秒！在此期间，浏览器负载过重且无​​响应，这在可用性方面是不可取的。

这引出了我的问题：

• 有人遇到过类似情况吗？是如何处理的？
• 有没有更好的方法来初始化带有敲除的第三方小部件？
• 是否有替代方法（使用 KnockoutJS）来解决此问题？

Answer 1

有人遇到过类似的情况吗？是如何处理的？

我的页面上有一个交互式表格，我使用 HandsOnTable plugin 显示该表格。该表大约有 15 列，我需要显示最多 250 行。

我将它绑定到一个observableArray，并且，起初，observableArray 只包含可观察对象。

我对它在我需要维护的旧版本 IE 中的速度不满意（IE8/9，在 IE11/最近的 Chrome 上运行良好），决定删除 @ 中的所有可观察对象987654324@.

这并不是真正的淘汰赛精神，我对这个解决方案并不感到骄傲，但它确实工作得更快。

Handsontable 让您可以处理一些事件，其中我像常规数组一样更新observableArray，然后运行valueHasMutated 函数来通知数组的变化。

同样，我的自定义绑定处理程序监视整个 observableArray 的变化并根据需要更新表。

我认为您的解决方案的另一个区别是 Handsontable 仅在需要时才进入编辑模式，因此插件（如 datepicker）仅在那时加载。

有没有更好的方法来初始化带有敲除的第三方小部件？

也许您只有在选择行/单元格时才能进入编辑模式。然后，您可以使用 if 绑定来初始化并仅显示您的小部件。