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

Posted 2023-05-07

【中文标题】KnockoutJS：我应该如何处理繁重的小部件初始化代码？

【英文标题】：KnockoutJS: How should I deal with heavy widget initialization code?

【发布时间】：2014-08-15 18:08:13

【问题描述】：

我目前正在尝试优化使用 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）来解决此问题？

【问题讨论】：

是否始终需要您的插件（select2 和 datepicker）？或者你可以进入“编辑模式”然后才初始化它们吗？

【参考方案1】：

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

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

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

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

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

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

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

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

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

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