History

leestott b5747037fb 🌐 Update translations via Co-op Translator		2 months ago
..
README.md	🌐 Update translations via Co-op Translator	2 months ago
assignment.md	🌐 Update translations via Co-op Translator	3 months ago

README.md

Unescape Escape

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

Тест перед лекцией

Введение

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

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

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

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

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

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

Вкладка "Производительность" содержит инструмент профилирования. Откройте веб-сайт (например, https://www.microsoft.com) и нажмите кнопку "Запись", затем обновите сайт. Остановите запись в любое время, и вы сможете увидеть процессы, которые выполняются для "скрипта", "рендеринга" и "рисования" сайта:

✅ Ознакомьтесь с документацией Microsoft о панели производительности в Edge.

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

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

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

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

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

Проверки профилирования

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

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

✅ Просмотрите Архив Интернета для исторического обзора веса страниц и других данных.

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

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

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

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

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

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

Работая в /src/index.js, добавьте функцию calculateColor() после серии переменных const, которые вы установили для доступа к DOM:

function calculateColor(value) {
	let co2Scale = [0, 150, 600, 750, 800];
	let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];

	let closestNum = co2Scale.sort((a, b) => {
		return Math.abs(a - value) - Math.abs(b - value);
	})[0];
	console.log(value + ' is closest to ' + closestNum);
	let num = (element) => element > closestNum;
	let scaleIndex = co2Scale.findIndex(num);

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

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

Что здесь происходит? Вы передаете значение (интенсивность углерода) из вызова API, который вы завершили в прошлом уроке, а затем рассчитываете, насколько близко его значение к индексу, представленному в массиве цветов. Затем вы отправляете это ближайшее значение цвета в chrome runtime.

Chrome.runtime имеет API, который обрабатывает всевозможные фоновые задачи, и ваше расширение использует его:

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

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

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

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

Теперь, в функции init(), установите значок на стандартный зеленый цвет, снова вызвав действие updateIcon Chrome:

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

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

Далее вызовите созданную вами функцию, добавив ее к обещанию, возвращаемому API C02Signal:

//let CO2...
calculateColor(CO2);

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

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
	if (msg.action === 'updateIcon') {
		chrome.action.setIcon({ imageData: drawIcon(msg.value) });
	}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
	let canvas = new OffscreenCanvas(200, 200);
	let context = canvas.getContext('2d');

	context.beginPath();
	context.fillStyle = value.color;
	context.arc(100, 100, 50, 0, 2 * Math.PI);
	context.fill();

	return context.getImageData(50, 50, 100, 100);
}

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

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

Теперь соберите ваше расширение (npm run build), обновите и запустите его, и наблюдайте за изменением цвета. Хорошее время, чтобы сходить за покупками или помыть посуду? Теперь вы знаете!

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

🚀 Задание

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

Тест после лекции

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

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

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

Задание

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

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

README.md Unescape Escape