Angular 2 Как улучшить время рисования DOM в Internet Explorer 11

К сожалению, есть не только одна вещь, которая Angular делает, что вызывает проблемы с IE. Angular работает в основном на DOM-манипуляциях с деревом и отслеживании дочерних / родительских узлов, а дерево DOM IE-нет...действительно дерево. Многие проблемы с производительностью для Angular на IE и Edge происходят из его циклов обнаружения изменений - что-то, что сделало Angular 1.X супер круто, но также дал ему дурную славу за неуклюжесть с размером.

Angular 2+ сделал много, чтобы исправить это, в том числе давая разработчикам много варианты изменения этой стратегии обнаружения, чтобы наилучшим образом соответствовать ситуации.

Стратегия Обнаружения Изменений

Вот отличный ресурс для изучения этого. Изменение стратегии обнаружения службы ChangeDetectorRef на " ChangeDetectionStrategy.OnPush ' заставит Angular запускать обнаружение изменений только на компонентных входах . Если у вас есть много статической информации в глубоко вложенных компонентах без каких-либо событий, возникающих из глубоко nes, это может быть большим ускорением - однако, вам нужно будет вручную настроить обнаружение изменений, когда это необходимо, или вручную вызвать развертку обнаружения изменений по мере необходимости - на самом деле это не так плохо, как кажется, и даст увеличение производительности для всех платформ.

Отсоединение детектора изменений

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

Бегите Вне Углового

Это, вероятно, покажется знакомым, но если у вас есть много вычислительно тяжелых задач, которые влияют на пользовательский интерфейс, вы можете использовать NgZone для запуска логики за пределами "зоны" Angular. Вероятно, не имеет большого влияния на IE конкретно, но тем не менее хорошая практика.

NgFor отслеживание

NgFor является ли Майлс более эффективным, чем старый ng-repeat, но это все еще не идеально, особенно когда дело доходит до перекраски (кашель, то есть кашель). Это может быть большим ударом по производительности IE в частности, из-за того, что его дерево DOM на самом деле не дерево. По умолчанию NgFor разрывает все дерево DOM для повтора и перестраивает его для любого небольшого изменения, внесенного в его данные. Предоставление функции NgFor A trackBy позволяет ей обновлять DOM только там, где необходимы изменения, повышая скорость (особенно если у вас есть сложные / многочисленные повторяющиеся элементы).

AOT сборник

Скорее общий импульс, чем что-либо конкретное для платформы, но определенно хорошая идея в любом случае. Настройка приложения для предварительной компиляции позволяет извлечь компилятор Angular из приложения сборки и полностью визуализировать шаблоны во время сборки. Он может значительно сократить нагрузку и время рендеринга, а также может быть еще более эффективным, если у вас есть большие, сложные шаблоны, которые могут быть построены с минимальными внешними данными. Это боль, чтобы сделать с Webpack или SystemJS (в отличие от CLI), но оно того стоит. Смотрите официальные документы здесь

Другие

Возможно, ваши проблемы вообще не связаны с Angular-IE имеет проблемы с производительностью с такими вещами, как рендеринг таблиц и определенные ситуации стиля (например, вычисление динамической ширины для элементов после рендеринга страницы). Обязательно изучите все проблемы, связанные с реализацией вашего приложения.

Удачи!