Угловая 2 производительность рендеринга в избранном - PullRequest
Новая
       6

Угловая 2 производительность рендеринга в избранном

0 голосов
/ 15 ноября 2018

У нас есть 2 списка: короткий и большой.Большой загружает дату на основе выбора в коротком.
В этом примере большинство элементов в большом списке изначально выбрано (380 из 400).После того, как новый выбор сделан в коротком списке, данные в большом списке должны быть очищены и загружены снова.

Теперь разница заключается в строке 

// await this.delayExecution(1);

в родительском компоненте.Uncommenting await (даже с 1 мс) изменяет поток выполнения таким образом, что второй список реагирует немедленно.

Транспортируемый код JavaScript: 

ParentComponent.prototype.selectionChanged = function (data) {
    return __awaiter(this, void 0, void 0, function () {
        return __generator(this, function (_a) {
            console.log('waiting');
            this.dataSelectedLarge = [];
            // await this.delayExecution(1);
            this.dataToSetLarge = [];
            console.log('changed');
            return [2 /*return*/];
        });
    });
};

И без комментариев: 

ParentComponent.prototype.selectionChanged = function (data) {
return __awaiter(this, void 0, void 0, function () {
    return __generator(this, function (_a) {
        switch (_a.label) {
            case 0:
                console.log('waiting');
                this.dataSelectedLarge = [];
                return [4 /*yield*/, this.delayExecution(1)];
            case 1:
                _a.sent();
                this.dataToSetLarge = [];
                console.log('changed');
                return [2 /*return*/];
        }
    });
    });
};

Итак, очистка выделения 

this.dataSelectedLarge = [];

и данных 

this.dataToSetLarge = [];

без какой-либо задержки вызывает новый рендеринг списка, который занимает много времени, тогда как рендеринг с ожиданием происходит мгновенно.

Пример приведен здесь: Angular 2 Performance Select

Вопросы:

  1. почему вызывает такое поведение
  2. что было бы правильной реализацией

В реальном приложении мы используем ChangeDetectionStrategy.OnPush в дочернем компоненте.

1 Ответ

0 голосов
/ 16 ноября 2018

Кажется, что проблема в производительности заключается в одновременном удалении всех данных и выделении, что означает один и тот же цикл обнаружения изменений.

После нескольких экспериментов с zones.js и NgZone я понял, что единственное отличие - это дополнительное обнаружение изменений между this.dataSelectedLarge = []; и this.dataToSetLarge = [];.

При удалении выделения, принудительном обнаружении изменений с использованием введенного ChangeDetectorRef.detectChanges(); и удалении данных после этого представление немедленно обновляется, и в async/wait.

нет необходимости.

Наконец, метод так же прост, как этот 

selectionChanged(data: any) {
  this.dataSelectedLarge = [];
  this.chdRef.detectChanges();
  this.dataToSetLarge = [];
}
...