20.04.2023 в 21:59

Сравнительный анализ в Angular

Бенчмаркинг важен, но как именно вы это делаете?

Бенчмаркинг — это одна из тех вещей, о которых мы часто слышим, но редко делаем сами. Отчасти это в основном запоздалая мысль, пока производительность не станет раздражающе медленной. Низкие скорости — это то, к чему склонен Angular, отчасти потому, что это фреймворк, а фреймворки могут быть громоздкими.

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

Без лишних слов, вот руководство по бенчмаркингу в Angular.

Сравнительный анализ рендеринга компонентов

Когда вы посещаете веб-сайт или используете приложение, вы ожидаете, что оно будет реагировать быстро и бесперебойно. Однако, если приложение медленно реагирует или интерфейс должен быть более отзывчивым, это может привести к удовлетворению и улучшению пользовательского опыта. Вот тут-то и пригодится бенчмаркинг.

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

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

В Angular вы можете измерять время рендеринга компонентов с помощью встроенных инструментов профилирования Angular. Вот пошаговое руководство по сравнительному анализу рендеринга компонентов в Angular:

Откройте файл app.module.ts в своем приложении Angular. Импортируйте функцию enableProdMode() из @angular/core.

import { enableProdMode } from '@angular/core';

Вызовите функцию enableProdMode(), чтобы включить рабочий режим в вашем приложении. Это отключает некоторые функции отладки, которые могут повлиять на производительность.

if (environment.production) {
   enableProdMode();
 }

Используйте функцию ng.profiler.timeRendering(), чтобы измерить время, необходимое компоненту для рендеринга. Эта функция не принимает параметров и возвращает время в миллисекундах для рендеринга компонента.

ng.profiler.timeRendering();

Чтобы измерить время рендеринга определенного компонента, добавьте привязку жизненного цикла ngAfterViewInit() к классу компонента и вызовите в нем функцию ng.profiler.timeRendering(). Это гарантирует, что компонент завершил рендеринг до измерения времени рендеринга.

import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-my-component',
   template: '<div>My Component</div>'
 })
 export class MyComponent {
   ngAfterViewInit() {
     ng.profiler.timeRendering();
   }
 }

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

Другой способ сравнить ваш компонент

Вы также можете запустить бенчмарк-тест на Angular, используя встроенный ng-benchmark. Этот инструмент использует Benchmark.js библиотека для измерения производительности компонентов Angular, служб и других частей вашего приложения. Унаследованные преимущества benchmark.js заключается в том, что вы можете настроить различные аспекты процесса бенчмаркинга, такие как количество итераций, частота дискретизации и формат вывода. Это позволяет легко настроить ваши контрольные показатели в соответствии с вашими конкретными потребностями.

Вот пример ng-benchmark в действии:

import { TestBed } from '@angular/core/testing';
 import { MyComponent } from './my-component.component';
 
 describe('MyComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [MyComponent],
     }).compileComponents();
   });
 
   it('should run myMethod in less than 10ms', (done) => {
     const component = TestBed.createComponent(MyComponent).componentInstance;
     const benchmark = new Benchmark('myMethod', () => {
       component.myMethod();
     }, { maxTime: 0.01 });
     benchmark.on('complete', (event) => {
       expect(event.target.times.period).toBeLessThan(0.01);
       done();
     });
     benchmark.run();
   });
 });

Этот код представляет собой модульный тест для компонента Angular, который использует инструмент ng-benchmark для измерения производительности метода в компоненте.

Функция describe создает набор тестов для компонента MyComponent. Функция beforeEach — это хук, вызываемый перед каждым набором тестов. Он использует утилиту TestBed для настройки модуля тестирования с компонентом MyComponent.

Функция it определяет тестовый пример, который проверяет метод myMethod компонента MyComponent. Метод TestBed.createComponent создает экземпляр компонента, а конструктор Benchmark определяет новый тест. Тест настроен на измерение времени, необходимого для запуска метода компонента myMethod, с максимальным временем 10 мс.

Метод benchmark.on('complete', ...) устанавливает функцию обратного вызова, которая вызывается по завершении бенчмарка. Эта функция использует утверждение expect(...).toBeLessThan(...), чтобы проверить, выполнялся ли тест менее чем за 10 мс. Если запуск бенчмарка занимает больше 10 мс, тестовый пример завершается неудачей.

Функция done() вызывается, чтобы сигнализировать о завершении тестового примера. Наконец, для запуска бенчмарка вызывается метод benchmark.run().

Затем вы можете запустить контрольный тест, выполнив следующую команду в вашем терминале:

ng test --include=**/*.spec.ts

Это запустит все тесты в вашем проекте, включая тестовый файл my-component.component.spec.ts. Все, что превышает 10 мс, очень медленно, поэтому, возможно, пришло время оптимизировать ваши методы.

Сравнительный анализ обнаружения изменений

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

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

Вот как можно сравнить обнаружение изменений в Angular:

Откройте файл app.module.ts в своем приложении Angular. Импортируйте функцию enableProdMode() из @angular/core.

import { enableProdMode } from '@angular/core';

if (environment.production) {
   enableProdMode();
 }

Используйте функцию ng.profiler.timeChangeDetection(), чтобы измерить время, необходимое для завершения обнаружения изменений. Эта функция не принимает параметров и возвращает время в миллисекундах, чтобы Angular мог обнаружить изменения и обновить представление.

ng.profiler.timeChangeDetection();

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

Сравнительный анализ задержек в сети

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

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

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

Чтобы выполнить сетевой бенчмарк-тест для приложения Angular, вы можете выполнить следующие действия:

Откройте приложение Angular в веб-браузере.
Щелкните правой кнопкой мыши страницу и выберите «Inspect», чтобы открыть инструменты разработчика браузера.
Перейдите на вкладку «Network» в инструментах разработчика.
Выполните действие в своем приложении, которое инициирует сетевой запрос, например, загрузите данные из API.
Посмотрите раздел «Timing» сетевого запроса в инструментах разработчика, чтобы измерить задержку в сети. В этом разделе показано время, необходимое серверу для ответа на запрос, а также другие показатели производительности, такие как время поиска DNS и время установления связи SSL.
Вы можете повторить этот процесс для нескольких сетевых запросов в своем приложении, чтобы лучше понять общую задержку сети.

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

Что теперь?

Вам может сойти с рук отказ от бенчмаркинга на некоторое время, особенно если ваше приложение небольшое, и вместе с вами над ним больше никто не работает.

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

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

#Angular