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

Question

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

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

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

• 可观察数组使用完整数据集（observable调用）发布，而不是多次push（）调用。
• 我将模板绑定与foreach选项结合使用，如多个站点所建议的那样，而不是将它们分开作为单独的绑定。
• Datepicker和Select2实现为自定义knockout bindingHandlers。
直接使用table-element作为第二个参数调用
• ko.applyBindings，这样整个DOM就不会被knockout绑定。

但我认为主要的瓶颈似乎是其他小部件的初始化。我测量了Select2小部件的创建，大约需要15ms。当然，这会快速累积50行和8列。因此，对可观察数组进行单次调用以加载完整数据集最多需要10秒！在此期间，浏览器处于高负荷状态并且没有响应，这是一种不可行的可用性。

这引出了我的问题：

• 是否有人遇到类似的情况以及如何处理？
• 是否有更好的方法可以使用knockout初始化第三方小部件？
• 是否有替代方法（使用KnockoutJS）来解决这个问题？

Answer 1

是否有人经历过类似的情况以及如何处理？

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

我将其绑定到observableArray，首先，observableArray仅包含可观察数据。

我对旧版本的IE的速度感到不满意我需要维护（IE8 / 9，IE11 /最近的Chrome工作正常），并且决定删除{内部的所有observables {1}}

这并不是真正的淘汰精神，我对这个解决方案并不感到自豪，但它的确运作得更快。

Handsontable允许您处理一些事件，我在其中更新observableArray就像常规数组一样，然后运行observableArray函数来通知数组的更改。

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

我认为你的解决方案的另一个不同之处是Handsontable仅在需要时才会进入编辑模式，因此插件（如datepicker）只会加载。

是否有更好的方法来使用knockout初始化第三方小部件？

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