16 KiB
Проєкт розширення для браузера, частина 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, яке обробляє всі види фонових завдань, і ваше розширення використовує це:
"Використовуйте chrome.runtime API для отримання фонової сторінки, повернення деталей про маніфест і прослуховування та реагування на події у життєвому циклі додатка або розширення. Ви також можете використовувати це 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. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.