javascript - 在ui-grid中，具有10行的100+列渲染性能是最差的

如果我有1000列以上的行，其中包含10到30列，则可以正常运行，
但是如果我有10行200列以上，则渲染需要2到3分钟。

一段时间后，水平滚动时看不到数据。
最终，页面变得无响应。

代码在这里：

$http.post($scope.url + "/getPagingRecordImportedTable", {
    dbname : $stateParams.dbname,
    tableName : tablename,
    pageNumber : 1
}).success(function(response) {
    $scope.names = response.records;
    $scope.mdata = response.metadata;
    $scope.gridOptions.data = response.records;
    var columnsize = 0;
    for (var obj in $scope.mdata) {
        if ($scope.mdata[obj]['columnsize'] > 20) {
            columnsize = 20;
        } else {
            columnsize = $scope.mdata[obj]['columnsize'];
        }
        $scope.columns.push({
            field : $scope.mdata[obj]['columnname'],
            width : columnsize
        });
    }
    console.log("-----------Data received");
})

触发http请求后，会立即打印-------------Data received日志，但是渲染数据会花费太多时间。

如何提高性能？还是有其他适用于巨大行和200多个列的API？

最佳答案

去年，我不得不处理类似的问题，并在文章Rendering large data with AngularJS 1.4 (ft. Polymer 0.5)中总结了自己的想法。

基本上，I recommend使用Polymer组件中的<iron-list>，尽管它需要一些重构（取决于您的用例）。

如果您不能或不想使用<iron-list>，请尽量使用one-time bindings。