16 KiB
Пројекат за проширење прегледача, део 3: Упознајте се са позадинским задацима и перформансама
Квиз пре предавања
Увод
У претходне две лекције овог модула, научили сте како да направите форму и простор за приказивање података преузетих са API-ја. Ово је веома стандардни начин креирања веб присуства на интернету. Чак сте научили како да асинхроно преузимате податке. Ваше проширење за прегледач је скоро завршено.
Остаје да управљате неким позадинским задацима, укључујући освежавање боје иконе проширења, па је ово одличан тренутак да разговарамо о томе како прегледач управља оваквим задацима. Размислимо о овим задацима прегледача у контексту перформанси ваших веб ресурса док их градите.
Основе веб перформанси
"Перформансе вебсајта се односе на две ствари: колико брзо се страница учитава и колико брзо се код на њој извршава." -- Зак Гросбарт
Тема како учинити ваше вебсајтове изузетно брзим на свим врстама уређаја, за све врсте корисника, у свим врстама ситуација, није изненађујуће обимна. Ево неколико тачака које треба имати на уму док градите стандардни веб пројекат или проширење за прегледач.
Прва ствар коју треба да урадите како бисте осигурали да ваш сајт ради ефикасно је да прикупите податке о његовим перформансама. Прво место за то су алати за програмере у вашем веб прегледачу. У Edge-у, можете изабрати дугме „Подешавања и још“ (икона са три тачке у горњем десном углу прегледача), затим идите на Више алата > Алатке за програмере и отворите картицу Перформансе. Такође можете користити пречице на тастатури Ctrl + Shift + I на Windows-у или Option + Command + I на Mac-у да отворите алате за програмере.
Картица Перформансе садржи алат за профилисање. Отворите вебсајт (на пример, https://www.microsoft.com) и кликните на дугме 'Сними', затим освежите сајт. Прекините снимање у било ком тренутку и моћи ћете да видите рутине које се генеришу за 'script', 'render' и 'paint' сајта:
✅ Посетите Microsoft документацију о картици Перформансе у Edge-у.
Савет: да бисте добили тачно очитавање времена покретања вашег сајта, обришите кеш вашег прегледача.
Изаберите елементе временске линије профила да бисте зумирали догађаје који се дешавају док се ваша страница учитава.
Добијте снимак перформанси ваше странице тако што ћете изабрати део временске линије профила и погледати резиме панела:
Проверите панел Дневник догађаја да видите да ли је неки догађај трајао дуже од 15 ms:
✅ Упознајте свој профајлер! Отворите алате за програмере на овом сајту и проверите да ли постоје уска грла. Који је ресурс са најспоријим учитавањем? Најбржим?
Провере профилисања
Генерално, постоје неке „проблематичне области“ које сваки веб програмер треба да прати приликом изградње сајта како би избегао непријатна изненађења када дође време за пуштање у продукцију.
Величине ресурса: Веб је постао „тежи“, а самим тим и спорији, током последњих неколико година. Део ове тежине има везе са употребом слика.
✅ Прегледајте Интернет архиву за историјски преглед тежине страница и више.
Добра пракса је да осигурате да су ваше слике оптимизоване и испоручене у одговарајућој величини и резолуцији за ваше кориснике.
Проласци кроз DOM: Прегледач мора да изгради свој Document Object Model на основу кода који напишете, тако да је у интересу добрих перформанси странице да ваши тагови буду минимални, користећи и стилизујући само оно што је страници потребно. У том смислу, вишак 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, могло би вас изненадити што користите chrome API. Новије верзије Edge прегледача раде на Chromium прегледачком механизму, тако да можете користити ове алате.
Напомена: ако желите да профилишете проширење за прегледач, покрените алате за програмере из самог проширења, јер је оно засебна инстанца прегледача.
Поставите подразумевану боју иконе
Сада, у функцији init(), поставите икону на генеричку зелену боју тако што ћете поново позвати chrome-ову акцију updateIcon:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
Позовите функцију, извршите позив
Затим, позовите ту функцију коју сте управо креирали тако што ћете је додати у promise који враћа C02Signal API:
//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. Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.