ng-include, ng-template или директива: что лучше для производительности

Я хотел бы знать, как лучше всего разработать угловое приложение с точки зрения производительности, для создания шаблона HTML с многоразовыми виджетами, такими как заголовок, боковая панель, нижний колонтитул и т. Д. В основном основным контентом является центральный DIV, содержимое которого будет варьироваться между маршрутами, верхний и нижний колонтитулы будут почти всегда одинаковыми, боковая панель может различаться на определенных страницах.

--- index.html

<body ng-cloak>
  <div data-ng-include data-src="'partials/template/header.html'"></div>
  <div data-ng-include data-src="'partials/template/sidebar.html'"></div>

  <div ng-view></div>

  <div data-ng-include data-src="'partials/template/footer.html'"></div>      
</body>

-- заголовок.html

<div id="header">
   // ... HTML CONTENT 
</div>

было бы лучше иметь header.html в $templateCache? Например:

-- заголовок.html

<!-- CACHE FILE: header.html -->
<script type="text/ng-template" id="header.html">
    <div id="header">
       // ... HTML CONTENT 
    </div>                    
</scipt>

Или даже я должен использовать директивы для каждого виджета, например: <appHeader></appHeader> ...?

Какой из них лучше с точки зрения производительности, связности, возможности повторного использования и масштабируемости, чтобы встраивать эти виджеты на каждый экран?


angularjs performance angularjs-directive angularjs-ng-include
person guilhebl    schedule 01.03.2014    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Я сравнил производительность обоих в представлении с большими вложенными списками (до 1000 записей, 4 уровня в глубину).

Заключение

Директивы на 50–100 % быстрее, чем ng-include, когда речь идет об отображении больших структур данных. Если вам нужно отображать много сложных/вложенных данных, особенно рекурсивных, используйте директивы.

Также для функциональных элементов (виджеты, входные фильтры и т. д.) директивы более применимы, потому что ваша логика находится внутри вашего модуля, а не плавает где-то в вашем контроллере.

Дополнительные сведения о рекурсии см. здесь: Рекурсия в директивах Angular

Когда вы просто пытаетесь разделить свое приложение на логические разделы (заголовок, боковая панель и т. д.), ng-include, вероятно, лучше. Следует иметь в виду, что проще получить доступ к области действия контроллера через ng-include. Иногда с директивами это может быть немного сложно.

person base34    schedule 02.02.2016

arrow_upward
16
arrow_downward

Ваш выбор в настоящее время не должен быть продиктован производительностью.

Для начала, если вы поместите свои частичные файлы на сервер или в ng-template и включите их с помощью ng-include, результат будет таким же, и оба кэшируются в $templateCache. Таким образом, даже если частичная загрузка с сервера может показаться медленнее, это будет сделано один раз. Я предлагаю, если у вас есть партиал приличного размера, не используйте ng-template и загружайте его с сервера.

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

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

Надеюсь, поможет.

person Chandermani    schedule 01.03.2014
comment
ng-include должен сначала получить шаблон из источника, только после этого он может использовать кеш шаблона для дальнейшего использования. - person Chandermani; 11.11.2014

arrow_upward
8
arrow_downward

Я предпочитаю директивы, потому что ng-include разбивает только часть представления на более мелкие модули. Используя директивы, даже если они используются только один раз, вы все равно хорошо разбиваете свою страницу на более мелкие независимые компоненты. Разметка родительской страницы выглядит намного лучше, и вам не нужно загромождать контроллер дополнительными методами. С некоторыми хитростями вы даже можете обрабатывать события и удаленные вызовы, специфичные для директивы, через scope.$digest (вместо $rootScope.digest по умолчанию), что будет лучше для производительности. Кроме того, ваша директива может выполнять прямые манипуляции с DOM, если это необходимо.

person Ambika Sukla    schedule 24.10.2014