30 KiB

Raw Blame History Unescape Escape

Проект расширения для браузера, часть 3: Изучаем фоновые задачи и производительность

Задумывались ли вы, почему одни расширения для браузера работают быстро и отзывчиво, а другие кажутся медленными? Секрет кроется в том, что происходит за кулисами. Пока пользователи кликают по интерфейсу вашего расширения, в фоновом режиме происходит множество процессов: загрузка данных, обновление иконок, управление системными ресурсами.

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

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

Предварительный тест

Введение

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

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

Основы веб-производительности

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

Производительность — это не только скорость, но и создание веб-опыта, который кажется естественным, а не громоздким и раздражающим. В ранние дни вычислительной техники Грейс Хоппер держала на своем столе наносекунду (кусок провода длиной около фута), чтобы показать, как далеко свет проходит за одну миллиардную секунды. Это был её способ объяснить, почему каждая микросекунда имеет значение в вычислениях. Давайте изучим инструменты, которые помогут вам понять, что замедляет работу.

"Производительность веб-сайта — это две вещи: как быстро загружается страница и как быстро работает код на ней." -- Зак Гроссбарт

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

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

Чтобы открыть инструменты разработчика в Edge, нажмите на три точки в правом верхнем углу, затем выберите "Дополнительные инструменты" > "Инструменты разработчика". Или используйте сочетание клавиш: Ctrl + Shift + I на Windows или Option + Command + I на Mac. После этого перейдите на вкладку "Производительность" — именно здесь вы будете проводить свое расследование.

Ваш набор инструментов для анализа производительности:

Откройте инструменты разработчика (вы будете использовать их постоянно как разработчик!)
Перейдите на вкладку "Производительность" — представьте, что это фитнес-трекер вашего веб-приложения
Нажмите кнопку записи и наблюдайте за действиями вашей страницы
Изучите результаты, чтобы выявить, что замедляет работу

Попробуйте это. Откройте веб-сайт (например, Microsoft.com) и нажмите кнопку "Запись". Затем обновите страницу и наблюдайте, как профайлер фиксирует все происходящее. Когда вы остановите запись, вы увидите подробный анализ того, как браузер "скриптирует", "рендерит" и "рисует" сайт. Это напоминает, как центр управления полетом отслеживает каждую систему во время запуска ракеты — вы получаете данные в реальном времени о том, что происходит и когда.

✅ Документация Microsoft содержит множество подробностей, если вы хотите углубиться.

Совет: Очистите кэш браузера перед тестированием, чтобы увидеть, как ваш сайт работает для новых посетителей — это обычно сильно отличается от повторных визитов!

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

Получите снимок производительности вашей страницы, выбрав часть временной шкалы профиля и посмотрев на панель сводки:

Проверьте панель журнала событий, чтобы увидеть, заняло ли какое-либо событие больше 15 мс:

✅ Ознакомьтесь с профайлером! Откройте инструменты разработчика на этом сайте и проверьте, есть ли узкие места. Какой ресурс загружается медленнее всего? Быстрее всего?

На что обращать внимание при профилировании

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

Давайте поговорим о типичных "виновниках" — проблемах с производительностью, которые часто встречаются в веб-проектах. Как Мария Кюри тщательно следила за уровнями радиации в своей лаборатории, мы должны следить за определенными паттернами, которые указывают на возможные проблемы. Раннее обнаружение этих проблем сэкономит вам (и вашим пользователям) много времени и нервов.

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

✅ Ознакомьтесь с Архивом Интернета, чтобы увидеть, как размеры страниц увеличивались с течением времени — это довольно показательно.

Как оптимизировать ресурсы:

Сжимайте изображения! Современные форматы, такие как WebP, могут значительно уменьшить размер файлов
Подавайте изображения нужного размера для каждого устройства — нет необходимости отправлять огромные изображения для настольных компьютеров на телефоны
Минифицируйте CSS и JavaScript — каждый байт имеет значение
Используйте ленивую загрузку, чтобы изображения загружались только тогда, когда пользователи действительно прокручивают к ним

Обход DOM: Браузер должен построить свою модель объекта документа (DOM) на основе написанного вами кода, поэтому для хорошей производительности страницы важно минимизировать количество тегов, используя и стилизуя только то, что необходимо. Например, избыточный CSS, связанный с страницей, можно оптимизировать; стили, которые нужно использовать только на одной странице, не обязательно включать в основной файл стилей.

Основные стратегии оптимизации DOM:

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

JavaScript: Каждый разработчик JavaScript должен следить за скриптами, блокирующими рендеринг, которые должны быть загружены до того, как остальная часть DOM может быть обработана и отображена в браузере. Рассмотрите возможность использования defer с вашими встроенными скриптами (как это сделано в модуле Terrarium).

Современные методы оптимизации JavaScript:

Используйте атрибут defer для загрузки скриптов после парсинга DOM
Применяйте разделение кода для загрузки только необходимого JavaScript
Используйте ленивую загрузку для некритичных функций
Минимизируйте использование тяжелых библиотек и фреймворков, если это возможно

✅ Попробуйте несколько сайтов на сайте тестирования скорости, чтобы узнать больше о распространенных проверках, которые проводятся для определения производительности сайта.

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

Создание функции для расчета цвета

Теперь мы создадим функцию, которая преобразует числовые данные в значимые цвета. Представьте себе систему светофоров — зеленый для чистой энергии, красный для высокой интенсивности выбросов углерода.

Эта функция будет брать данные о CO2 из нашего API и определять, какой цвет лучше всего представляет воздействие на окружающую среду. Это похоже на то, как ученые используют цветовую кодировку в тепловых картах для визуализации сложных данных — от температуры океана до формирования звезд. Добавьте это в /src/index.js, сразу после тех переменных const, которые мы настроили ранее:

function calculateColor(value) {
	// Define CO2 intensity scale (grams per kWh)
	const co2Scale = [0, 150, 600, 750, 800];
	// Corresponding colors from green (clean) to dark brown (high carbon)
	const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];

	// Find the closest scale value to our input
	const closestNum = co2Scale.sort((a, b) => {
		return Math.abs(a - value) - Math.abs(b - value);
	})[0];
	
	console.log(`${value} is closest to ${closestNum}`);
	
	// Find the index for color mapping
	const num = (element) => element > closestNum;
	const scaleIndex = co2Scale.findIndex(num);

	const closestColor = colors[scaleIndex];
	console.log(scaleIndex, closestColor);

	// Send color update message to background script
	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}

Разберем эту умную маленькую функцию:

Создает два массива — один для уровней CO2, другой для цветов (зеленый = чистая энергия, коричневый = грязная!)
Находит ближайшее совпадение с фактическим значением CO2, используя сортировку массива
Извлекает соответствующий цвет, используя метод findIndex()
Отправляет сообщение в фоновый скрипт Chrome с выбранным цветом
Использует шаблонные строки (эти обратные кавычки) для более чистого форматирования строк
Сохраняет все организованным с помощью объявлений const

API chrome.runtime API — это как нервная система вашего расширения, которая управляет всей внутренней коммуникацией и задачами:

"Используйте API chrome.runtime для получения фоновой страницы, возврата деталей о манифесте и прослушивания событий в жизненном цикле приложения или расширения. Вы также можете использовать этот API для преобразования относительного пути URL в полностью квалифицированный URL."

Почему API Chrome Runtime так удобен:

Позволяет различным частям вашего расширения взаимодействовать друг с другом
Управляет фоновыми задачами без заморозки пользовательского интерфейса
Обрабатывает события жизненного цикла вашего расширения
Упрощает передачу сообщений между скриптами

✅ Если вы разрабатываете это расширение для браузера Edge, вас может удивить, что вы используете API Chrome. Новые версии браузера Edge работают на движке Chromium, поэтому вы можете использовать эти инструменты.

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

Установите цвет иконки по умолчанию

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

В вашей функции init() задайте этот начальный зеленый цвет:

chrome.runtime.sendMessage({
	action: 'updateIcon',
	value: {
		color: 'green',
	},
});

Что делает эта инициализация:

Устанавливает нейтральный зеленый цвет как состояние по умолчанию
Обеспечивает немедленную визуальную обратную связь при загрузке расширения
Устанавливает шаблон коммуникации с фоновым скриптом
Гарантирует, что пользователи видят рабочее расширение до загрузки данных

Вызов функции и выполнение запроса

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

Добавьте эту строку сразу после получения данных о CO2 из API:

// After retrieving CO2 data from the API
// let CO2 = data.data[0].intensity.actual;
calculateColor(CO2);

Что делает эта интеграция:

Соединяет поток данных API с системой визуальных индикаторов
Автоматически запускает обновления иконок при поступлении новых данных
Обеспечивает визуальную обратную связь в реальном времени на основе текущей интенсивности выбросов углерода
Сохраняет разделение обязанностей между загрузкой данных и логикой отображения

И, наконец, в /dist/background.js добавьте слушатель для этих вызовов фоновых действий:

// Listen for messages from the content script
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
	if (msg.action === 'updateIcon') {
		chrome.action.setIcon({ imageData: drawIcon(msg.value) });
	}
});

// Draw dynamic icon using Canvas API
// Borrowed from energy lollipop extension - nice feature!
function drawIcon(value) {
	// Create an offscreen canvas for better performance
	const canvas = new OffscreenCanvas(200, 200);
	const context = canvas.getContext('2d');

	// Draw a colored circle representing carbon intensity
	context.beginPath();
	context.fillStyle = value.color;
	context.arc(100, 100, 50, 0, 2 * Math.PI);
	context.fill();

	// Return the image data for the browser icon
	return context.getImageData(50, 50, 100, 100);
}

Что делает этот фоновый скрипт:

Слушает сообщения от вашего основного скрипта (как секретарь, принимающий звонки)
Обрабатывает запросы 'updateIcon' для изменения иконки на панели инструментов
Создает новые иконки на лету, используя API Canvas
Рисует простой цветной круг, показывающий текущую интенсивность выбросов углерода
Обновляет панель инструментов браузера с новой иконкой
Использует OffscreenCanvas для плавной работы (без блокировки интерфейса)

✅ Вы узнаете больше о API Canvas в уроках по космической игре.

Пора протестировать ваше расширение:

Соберите все с помощью npm run build
Перезагрузите ваше расширение в браузере (не забудьте этот шаг)
Откройте ваше расширение и наблюдайте, как иконка меняет цвета
Проверьте, как оно реагирует на реальные данные о выбросах углерода со всего мира

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

Вызов агента GitHub Copilot 🚀

Используйте режим Agent, чтобы выполнить следующий вызов:

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

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

Узнайте больше о режиме агента здесь.

🚀 Вызов

Вот интересное детективное задание: выберите несколько сайтов с открытым исходным кодом, которые существуют уже много лет (например, Wikipedia, GitHub или Stack Overflow), и изучите их историю коммитов. Можете ли вы найти моменты, когда они улучшали производительность? Какие проблемы возникали снова и снова?

Ваш подход к расследованию:

Ищите в сообщениях коммитов слова, такие как "оптимизация", "производительность" или "быстрее"
Ищите закономерности – исправляют ли они одни и те же типы проблем?
Определите общие причины, которые замедляют работу сайтов
Поделитесь своими открытиями – другие разработчики могут учиться на реальных примерах

Викторина после лекции

Обзор и самостоятельное изучение

Рассмотрите возможность подписки на рассылку о производительности

Изучите, как браузеры оценивают производительность веб-страниц, используя вкладки производительности в их инструментах разработчика. Обнаружили ли вы какие-либо значительные различия?

Задание

Анализ сайта на производительность

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.

30 KiB Raw Blame History Unescape Escape