History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks 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.browserAction.setIcon({ imageData: drawIcon(msg.value) });
	}
});
//borrowed from energy lollipop extension, nice feature!
function drawIcon(value) {
	let canvas = document.createElement('canvas');
	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