Как бороться с замораживанием браузера из-за вложенного ng-repeat

Ответ 1

UPDATE:

DEMO: http://plnkr.co/edit/bHMIU8Mx5grht9nod1CW?p=preview

Вы можете легко загрузить свои данные, изменив L10901 app.js, как показано ниже. Но вы должны заметить, что если вы все еще хотите заказать его по имени и хотите, чтобы он был устойчивым, вы должны просто отсортировать исходные данные, но не сортировать в angular с "order by". (Вы хотите, чтобы какой-то код сортировал исходные данные?)

    function getDataGradually(data, childKey, gap, count, updateCb, finishCb) {
        const lastPositon = [];
        const linearData = [];
        const ret = [];


        function getLinearData(arr, position) {
            arr.forEach(function (obj, index) {
                const pos = position.concat([index]);
                if (obj[childKey] && obj[childKey].length) {
                    var children = obj[childKey];
                    obj[childKey] = [];
                    linearData.push({
                        obj,
                        pos
                    });
                    getLinearData(children, pos);
                } else {
                    linearData.push({
                        obj,
                        pos
                    });
                }
            });
        }
        getLinearData(data, []);

        function insertData({
            obj,
            pos
        }) {

            let target = ret;
            pos.forEach(function (i, index) {


                if (index === pos.length - 1) {
                    target[i] = obj;

                } else {
                    target = target[i][childKey];
                }
            });

        }
        let handled = 0;

        function doInsert() {
            let start = handled;
            let end;
            if (handled + count > linearData.length) {
                end = linearData.length;
            } else {
                end = handled + count;
            }
            for (let i = start; i < end; i++) {
                insertData(linearData[i]);
            }
            handled += count;
            if (handled < linearData.length) {
                setTimeout(function () {
                    doInsert();
                    updateCb && updateCb();
                }, gap);
            } else {
                finishCb && finishCb();
            }
        }
        doInsert();



        return ret;
    }

    $scope.tree = getDataGradually(result.GetCategoryTreeResult, "Children", 0, 30, function () {
      $scope.$digest();
    }, function () {
      //finished 
    });
    //$scope.tree = result.GetCategoryTreeResult;
    $scope.status = "loaded";
  }, 3000);

Старый ответ:

Вы можете получить время рендеринга, используя $timeout. Попробуйте изменить L10901 app.js, как показано ниже.

        $scope.tree = result.GetCategoryTreeResult;
        console.time("A")
        $timeout(function(){
          console.timeEnd("A");
        });
        $scope.status = "loaded";
      }, 3000);

Кстати, я получил "1931.881мс" на моем компьютере.

Ответ 2

Как я справляюсь с этим:

В контроллере:

// Consider results to be my main array, which contains 5000 items
var results = [{ ... }, { ... }, ..., ..., { ... }];

$scope.bindResults = results.slice(0, 5);

// Here you can start loading
$scope.status = "loading";

// Inject $interval in controller
var interval = $interval(function() {
    $scope.bindResults = results.slice(0, $scope.bindResults.length + 5);

    if($scope.bindResults.length >= results.length) {
         $interval.cancel(interval);

        // Here you can end loading
        $scope.status = "loading";
    }
}, 10);

В HTML:

<span ng-repeat="x in bindResults"></span>

Это не повредит браузер и будет хранить данные каждые 10 мс, вы можете увеличить это число по мере необходимости.

Ответ 3

Из моего опыта:

• переместить логику фильтра в JS (не заказывать в HTML, но раньше)
• попробуйте выполнить поиск с использованием ng-repeat
• ng-include с ng-repeat имеет плохую производительность - прочитайте это Использование ng-repeat с ng-include или это Альтернатива для ng-include в ng-repeat

Также это старая, но хорошая статья о производительности angularjs с ng-repeat Оптимизация AngularJS: от 1200 мс до 35 мс

Ответ 4

Поскольку вы привязываете большие данные к HTML, он внутренне строит так много наблюдателей. Это, безусловно, снизит производительность и может зависнуть в системах с низкой конфигурацией.

Создайте эту директиву как элемент, а не атрибут. Затем выполните манипуляции с DOM в директиве. Это определенно решит проблему.