Производительность между вызовом функции в директиве ngStyle vs

Question

В чем основное отличие

<p [ngStyle]="getStyle()"> 
// getStyle returns a string like "color:blue" and some other attributes

от

<p appStyle [status]="myStatus">
//directive get myStatus as a input and calculate the style of the tag

Приложение, которое я выполняю, вызывает эти функции getStyle на ngStyle много (вероятно,5к раз).В настоящее время я изменяю стиль расчета на директивы, потому что я думаю, что это чище.

Но я не знаю, насколько это повлияет на производительность.Как я могу это измерить?

Другой вопрос, есть ли документ / учебник / книга, которая объясняет такие вещи?

Спасибо

Answer 1

В максимально возможной степени следует избегать вызова функции в привязке свойства, потому что функция вызывается при каждом цикле обнаружения угловых изменений, даже если несвязанное свойство изменяется в представлении компонента. По этой причине метод getStyle (), связанный с [ngStyle], вызывается много раз [даже больше, чем ожидалось]. Ваш второй кодовый подход [директива] один намного лучше, чем первый. В директивном подходе, когда ваша ограниченная входная PROPERTY изменяется, выполняется только код, связанный с изменением входных свойств вашей базовой директивы. Также вы можете повысить производительность, используя ChangeDetectionStrtegy.OnPush [https://blog.angular -university.io / onpush-change-detection-how-it-works /] . Кроме того, угловая труба должна использоваться в случае, если вы преобразуете свои данные из данных в представление. Потому что трубы запомнились [т.е. Труба оценивается только при изменении ввода].

См. Следующие статьи -

https://blog.angularindepth.com/tiny-angular-pipe-to-make-any-function-memoizable-f6c8fa917f2f https://blog.angularindepth.com/the-essential-difference-between-pure-and-impure-pipes-and-why-that-matters-999818aa068