1. Модульное тестирование JavaScript-функции

Рассмотрим пример проверки функции, которая вычисляет итоговую стоимость покупки с учётом количества товаров.

JavaScript-код:

function calculateTotal(price, quantity) {

return price * quantity;

}

function testCalculateTotal() {

const actual = calculateTotal(1500, 3);

const expected = 4500;

if (actual === expected) {

console.log("Тест пройден");

} else {

console.log("Тест не пройден");

}

}

testCalculateTotal();

Объяснение:

calculateTotal() — функция, которую необходимо проверить.

actual — фактический результат выполнения функции.

expected — ожидаемый результат.

if — сравнивает фактический и ожидаемый результаты.

Результат:

Тест пройден

Функция возвращает 4500, что соответствует ожидаемому результату.

Такой тест проверяет отдельную функцию, поэтому относится к модульному тестированию (Unit Testing).

2. Анализ времени выполнения операции

Рассмотрим пример измерения времени выполнения JavaScript-кода.

JavaScript-код:

console.time("Calculation");

let sum = 0;

for (let i = 1; i <= 1000000; i++) {

sum += i;

}

console.timeEnd("Calculation");

console.log("Сумма:", sum);

Объяснение:

console.time() — начинает измерение времени.

console.timeEnd() — завершает измерение и выводит длительность.

for — выполняет повторяющиеся вычисления.

sum — хранит результат сложения.

Результат:

В консоли браузера отображается время выполнения операции, например:

Calculation: 3.5 ms

Сумма: 500000500000

Время является примерным и зависит от устройства и браузера.

Для более подробного анализа производительности можно использовать вкладку Performance в инструментах разработчика браузера.

3. Оптимизация загрузки изображений

Рассмотрим пример веб-страницы университета, на которой размещены фотографии учебных корпусов.

Первоначальный HTML-код:

<img src="building1.jpg" alt="Главный корпус">

<img src="building2.jpg" alt="Учебный корпус">

<img src="building3.jpg" alt="Библиотека">

Оптимизированный HTML-код:

<img

src="building1.webp"

alt="Главный корпус"

width="600"

height="400"

>

<img

src="building2.webp"

alt="Учебный корпус"

width="600"

height="400"

loading="lazy"

>

<img

src="building3.webp"

alt="Библиотека"

width="600"

height="400"

loading="lazy"

>

Объяснение:

WebP — формат изображений, который часто позволяет уменьшить размер файлов.

loading="lazy" — включает отложенную загрузку изображения.

width и height — задают размеры изображения и помогают браузеру заранее выделить место в макете.

alt — содержит текстовое описание изображения.

Результат:

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

Указанные размеры помогают уменьшить нежелательные смещения элементов страницы.

При использовании правильно сжатых изображений WebP может уменьшиться объём передаваемых данных.

Важно: фотографии должны быть предварительно преобразованы в формат WebP. Основное изображение, необходимое для первоначального отображения страницы, не следует без необходимости загружать отложенно.