Есть ли накладные расходы, если я использую директивы по сравнению с встроенным HTML?

У меня есть двенадцать веб-страниц, каждый из которых имеет набор 7-10 кнопок. Код позади и вокруг кнопок - 6-7 строк HTML.

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

Есть много накладных расходов при открытии страницы, и она должна преобразовать все мои элементы в директивы?

И каков процесс для этого? Будет ли это замедлять рендеринг страницы?

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

ОТВЕТЫ

Ответ 1

1) Да, есть накладные расходы: Директивы отображаются в разметке во время Angular Цикла дайджеста. Первый цикл будет запускаться после загрузки структуры. Накладные расходы при загрузке могут быть большими. Первый цикл дайджеста будет выполняться быстро.

Ответ на вопрос, сколько накладных расходов зависит от того, намереваетесь ли вы использовать AngularJS на любой странице. Если в любом случае будут загружены libararies и framework, накладные расходы минимальны. Загрузка libs и запуск фреймворка обычно дают немного заметную паузу до того, как страница полностью отобразится.

Если, с другой стороны, ваша страница уже использует инфраструктуру AngularJS, накладные расходы для Директивы HTML без свойств модели крошечные. Тяжелые накладные расходы происходят, когда у вас много связанных свойств модели. Затем структура должна следить за вашими свойствами модели и проходить через цикл дайджеста каждый раз, когда изменяется

2) Это хорошая идея? ДА. NO. Вид. Это зависит. Вы уже используете AngularJS для страницы (повторяющаяся тема)? Если да, то это очень хорошая практика. У вас может быть много уровней инкапсуляции с низкой стоимостью и предлагается сделать это либерально.

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

3) Если вы хотите повторно использовать этот код на 1 или нескольких страницах, которые НЕ используют AngularJS: В этом случае затраты, вероятно, не стоят этого. И здесь все зависит. Возможно, если 10 страниц используют Angular, а еще 2 - нет, вы все равно можете использовать директиву AngularJS.

Но если ни одна из ваших страниц не нуждается в каркасе, или большинство (10 из 12), нет, вам, вероятно, лучше использовать HTML5

Ответ 2

IMHO, рендеринг нескольких виджетов с 6-7 строками общего html не должен сильно вредить вашей производительности. Если html имеет вложенную директиву и т.д., Это будет другая история

Ответ 3

Я попробовал пробную демонстрацию, и да, это займет немного больше времени при рендеринге элементов с помощью директив (что очевидно, потому что процесс angular будет потреблять некоторое время для рендеринга пользовательских разметок в допустимый html)

Вот демонстрационный пример с использованием angular для визуализации элементов с помощью директив:

Элементы рендеринга с использованием angular

и вот еще один, который использует чистый html

Элементы рендеринга без angular

Я показал равное количество элементов для обоих примеров, чтобы убедиться, что мы имеем равное сравнение. Вы можете видеть время, затраченное на консоль. В среднем, учитывая, что оба элемента рендеринга примеров быстрее на 5-10 мс при рендеринге без angular.

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

Обновление 1
В приведенном выше примере есть только простые наценки и ничего не происходит. В сценарии реального слова, где мы можем передавать пользовательские атрибуты и компилировать элементы (используя $compile), разница во времени может повыситься еще выше.

Обновление 2

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

Ответ 4

Как показывает ответ @I_Debug_Everything, для базовых шаблонов html существует небольшое наказание. Похоже, 5-10 мс заметно заметят разницу в производительности.

Однако есть и другие факторы, которые необходимо учитывать, что может или не может сыграть свою роль в вашей настройке.

  • С директивами вы делитесь шаблоном директивы, поэтому объем данных, полученных от сервера, меньше стандартного HTML, где HTML будет дублироваться на каждой странице и разделе на странице, на которой вы хотите отобразить набор общих элементов.
  • С директивами у вас есть один шаблон для внесения любых изменений в ваш шаблон, поэтому вы выигрываете в производительности.
  • Вы можете unit test директивы.
  • Аргументируемые директивы делают ваш HTML более удобочитаемым.
  • Веб-компоненты - это то, к чему идут стандарты. Angular 2.X якобы поддержит это изначально.

Это все факторы, которые вы также должны учитывать.