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

Я хотел бы узнать лучший способ разработки приложения angular относительно производительности, для создания 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>

- header.html

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

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

- header.html

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

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

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

Ответ 1

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

Заключение

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

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

Подробнее о рекурсии см. здесь: Рекурсия в директивах Angular

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

Ответ 2

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

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

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

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

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

Ответ 3

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