Кэш DOM в Angular.JS

Ответ 1

Вы должны написать свою собственную директиву ng-view для создания таких функций.

Основная идея заключается в следующем:

Перед тем, как маршрут изменится, вместо уничтожения текущего элемента представления и области видимости вы просто поместите его в невидимый кэш DIV и отмените прослушивание областей. Дайте элементу атрибут data с помощью $$route.templateUrl, чтобы получить его обратно. Затем вы получаете следующее представление с сервера.

Перед изменением маршрута вы проверяете наличие кеша, и если он находится в вашем кеше div, вы получите элемент из кеша, перерегистрируйте слушатели и поместите текущий вид в кеш.

Сложная часть - не испортить $scope вверх. Поэтому вам может понадобиться конструктор и деструктор в вашем $scope для события, и, возможно, для $watchers. Я не уверен.

Но если честно, если вы используете кеш шаблона и по-прежнему занимает 1 секунду или около того для рендеринга, то у вас может быть некоторое неэффективное выражение $watch или огромный ng-repeat. Вы должны рассмотреть некоторые варианты.

Ответ 2

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

Реальное "узкое место" исходило из моих директив ng-repeat, количества обращений, которые привели, и количества узлов/наблюдателей DOM, которые я создавал на каждой итерации.

Некоторые источники предложили создать настраиваемую директиву, которая вручную собирает dom и добавляет его за один раз. Результатом является очень минимальный переплав и отсутствие наблюдателей. Недостаток очень большой. Не более angular весело и много ненужной работы. Что еще более важно, ничто из этого не обеспечило достаточного увеличения скорости, чтобы оправдать работу.

В конечном итоге я обнаружил, что лучшее улучшение скорости произошло от форсирования аппаратного ускорения для каждой итерации ng-repeat. Как было предложено выше, директива ng-animate в более новых версиях angular делает это относительно тривиальным.

Вы увидите немедленную визуализацию страницы, с небольшими переполнениями икоты. ng-cloak здесь не помогает. Из-за запроса анимации, страница не подлежит маскировке, пока выполняется повторное отображение. Тем не менее, они могут быть достаточно разумными с небольшим количеством умных развлечений. Я на самом деле скрываю ng-repeat до тех пор, пока изменения $location не изменятся, показывая индикатор прогресса, а затем переключая мое ng-show. Это работает очень хорошо.

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

1) Когда начнется ваше приложение, создайте новый кеш для себя. См. http://docs-angularjs-org-dev.appspot.com/api/ng. $CacheFactory

2) Заполните этот кеш с помощью скомпилированных шаблонов. Ввести $compile и вызвать его для каждого шаблона. Компиляция возвращает функцию, которую вы позже вызовете против своей области. Введите эту функцию в свой кеш по своему усмотрению.

3) Создайте настраиваемую директиву, которая принимает ключ кеша как атрибут. Внутри этой директивы запросите свой кэш компиляции для правильной функции компиляции. Вызовите функцию против текущей области и добавьте полученный DOM к элементу, переданному в директиву.

4) Сорта win:).

Ответ 3

Если вы переместитесь на Angular 1.1.5, вы можете использовать атрибут ng-animate в теге ng-view.

Я не уверен на 100%, но я думаю, что он делает некоторое кэширование DOM, чтобы улучшить работу переходов. Вы можете попробовать добавить в свой тег атрибут ng-animate. Это может позаботиться об этом для вас.