【发布时间】：2015-08-27 13:11:42
【问题描述】：
我正在使用 knockout.repeat 绘制具有以下数据的动态列数组：
var columns = ko.observableArray([
new Column(1),
new Column(2),
new Column(3),
new Column(4),
new Column(5)
});
var array = ko.observableArray([1..95]);
通过敲除映射按以下方式分配数据：
mappingConfig = {
create: function (options) {
return new Row(options.data);
}
};
ko.mapping.fromJS(data, mappingCOnfig, array);
通过以下方式：
<div data-bind="repeat: {foreach: array, item: '$row'}">
<div data-bind="repeat: {foreach: column, item: '$col'}">
<input data-bind="value: $row()[$col().Name]"/>
</div>
</div>
我遇到的问题是渲染 95 行 6 列需要将近 30 秒。
- 如何解决性能问题？
- 有什么工具吗？
- 是否有任何指导方针如何在类似的情况下最大限度地提高性能 场景？
Chrome 时间线：
更新：压力很大，所以我用reactjs重写了表格，解决了很多问题，渲染时间只有1.5秒。
【问题讨论】：
-
你用的是什么浏览器？
-
@RoyJ 与
Chrome 43.0.2357.81 m合作 -
我记得遇到过这样的问题。对于约 1500 行数据，添加/删除行集需要几分钟时间。我不记得我做了什么来缓解它，但它认为它最终归结为你必须尽量减少创建 dom 元素所花费的时间。很多时间都花在了杀死它的 GC 上。在我的例子中，很多 dom 元素被重新创建，因为我绑定到它们的数据对象不断地从头开始重建。另外更新需要分批进行，不要单独更新。
-
@JeffMercado 附加的 Chrome 时间线 - 似乎花费最多的时间是在编写脚本而不是渲染和绘画。
-
很遗憾，最后你不得不选择另一个框架/库来解决问题..
标签： javascript performance knockout.js knockout-mapping-plugin knockout-3.0