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

KnockoutJS: How should I deal with heavy widget initialization code?

本文关键字：小部 代码 初始化 处理 我应该 何处理 KnockoutJS      更新时间：2023-09-26

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

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

我已经实现了这些KnockoutJS性能提示，这是我在不同的网站上发现的:

  • 可观察数组被完整的数据集(调用可观察对象)发布，而不是多次调用push()。
  • 我将模板绑定与foreach选项结合使用，根据多个站点的建议，而不是将两者分开作为单独的绑定。
  • Datepicker和Select2是作为自定义knockout绑定处理程序实现的。
  • ko。applyBindings是直接用table-element作为第二个参数调用的，这样整个DOM就不会被knockout绑定。

但是在我看来，主要的瓶颈似乎是附加小部件的初始化。我测量了Select2小部件的创建过程，耗时约15ms。当然，50行8列的累积速度很快。因此，对可观察数组的一次调用来加载完整的数据集最多需要10秒!在此期间，浏览器处于高负载状态，变得无响应，这是一个不可用的可用性。

这就引出了我的问题:

  • 是否有人经历过类似的情况，是如何处理的?
  • 是否有更好的方法来初始化第三方窗口小部件?
  • 是否有替代方法(使用KnockoutJS)来解决这个问题?

是否有人遇到过类似的情况，是如何处理的?

我的页面上有一个交互式表，我使用HandsOnTable插件来显示它。表有大约15列，我需要显示多达250行。

我将它绑定到observableArray，并且，首先，observableArray只包含可观察对象。

我对旧版本IE的速度不满意，我需要维护(IE8/9，与IE11/最近的Chrome一起工作)，并且决定删除observableArray内的所有可观察对象。

这不符合淘汰赛的精神，我也不为这个解决方案感到骄傲，但它确实工作得快得多。

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

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

我认为你的解决方案的另一个不同之处在于Handsontable只在需要时才转换为编辑模式，因此插件(如datepicker)只在那时加载。

是否有更好的方法来初始化第三方窗口小部件?

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

相关文章：