Оптимизировать ng-repeat для сотен статических элементов (просмотрщик журналов)

Question

Оптимизировать ng-repeat для сотен статических элементов (просмотрщик журналов)

0

У приложения, которое у меня есть, есть тысячи строк журнала. Каждая строка журнала статична и никогда не будет меняться. Каждая строка журнала поворачивается внутри ng-repeat на 5-10 элементов DOM.

Я пробовал использовать bindonce но преимущества почти не существовали. Я также попытался написать специальную директиву, которая кэширует скомпилированные результаты:

.directive('logLine', function ($compile) {
    var template = $compile(logTemplate);
    var cache = {};
    return {
        scope: {
            line: '=logLine',
        },
        restrict: 'A',
        link: function($scope, $element) {
            if (!cache.hasOwnProperty($scope.line.id)) {
                template($scope, function(cloned){
                    cache[$scope.line.id] = cloned;
                });
            }

            $element.html(cache[$scope.line.id]);
        }
    };
})

Хотя это ускоряет программу примерно на 30%, она по-прежнему очень медленная. Я предполагаю, что большую часть времени тратится на удаление и добавление сотен элементов DOM при каждом изменении страницы.

Поэтому мой вопрос заключается в том, можно ли остановить AngularJS от удаления элементов DOM, а вместо этого позволить мне вручную скрывать и отображать их позже? Или есть ли какие-либо другие приемы для оптимизации этого конкретного вида приложений?

Ehsan Kia 29 окт. 2015, в 23:40

Источник

0

использовать нумерацию страниц и фильтрацию, чтобы минимизировать строки в дом. В любом случае пользователь может переварить только столько информации за один раз. Dom рендеринг - самая медленная часть
charlietfl 29 окт. 2015, в 22:51
0

Трижды добавляйте track by id в ваш ng-repeat и всегда удаляйте / добавляйте элементы в один и тот же массив, чтобы angular не нужно было перерисовывать все (только добавленные / удаленные элементы). Если это не сработает, то лучше всего сказать @charlietfl
sirrocco 30 окт. 2015, в 03:30

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

использовать нумерацию страниц и фильтрацию, чтобы минимизировать строки в дом. В любом случае пользователь может переварить только столько информации за один раз. Dom рендеринг - самая медленная часть
Трижды добавляйте track by id в ваш ng-repeat и всегда удаляйте / добавляйте элементы в один и тот же массив, чтобы angular не нужно было перерисовывать все (только добавленные / удаленные элементы). Если это не сработает, то лучше всего сказать @charlietfl

Fridjon Gudjohnsen · Answer 1 · 2015-10-29T20-25-00.000Z

Вы можете попытаться использовать одноразовые привязки данных вместо двухсторонней привязки данных. Все, что вам нужно сделать внутри ng-repeat, - это префикс выражения для привязки с ::. Например:

<div ng-repeat="something in whatever">
  {{::something.var}}
</div>

См. Документы в отношении одноразовых привязок.

Как я уже упоминал, я пробовал один раз (как и тот, который вы упомянули). Прибыль была очень мала, из-за моей отладки большая часть замедления заключалась в создании и удалении элементов DOM.