11 KiB
Projek Sambungan Penyemak Imbas Bahagian 3: Belajar tentang Tugas Latar Belakang dan Prestasi
Kuiz Pra-Kuliah
Pengenalan
Dalam dua pelajaran terakhir modul ini, anda telah belajar cara membina borang dan kawasan paparan untuk data yang diambil dari API. Ini adalah cara yang sangat standard untuk mencipta kehadiran web di internet. Anda juga telah belajar cara mengendalikan pengambilan data secara asinkron. Sambungan penyemak imbas anda hampir siap sepenuhnya.
Masih ada tugas latar belakang yang perlu diuruskan, termasuk menyegarkan warna ikon sambungan, jadi ini adalah masa yang sesuai untuk membincangkan bagaimana penyemak imbas menguruskan jenis tugas ini. Mari kita fikirkan tentang tugas penyemak imbas ini dalam konteks prestasi aset web anda semasa anda membangunkannya.
Asas Prestasi Web
"Prestasi laman web berkisar pada dua perkara: seberapa cepat halaman dimuat, dan seberapa cepat kod di dalamnya berjalan." -- Zack Grossbart
Topik tentang cara membuat laman web anda sangat pantas pada semua jenis peranti, untuk semua jenis pengguna, dalam semua jenis situasi, adalah sangat luas. Berikut adalah beberapa perkara yang perlu diingat semasa anda membina projek web standard atau sambungan penyemak imbas.
Perkara pertama yang perlu anda lakukan untuk memastikan laman web anda berjalan dengan cekap ialah mengumpulkan data tentang prestasinya. Tempat pertama untuk melakukannya ialah dalam alat pembangun penyemak imbas web anda. Dalam Edge, anda boleh memilih butang "Tetapan dan banyak lagi" (ikon tiga titik di bahagian atas kanan penyemak imbas), kemudian pergi ke Alat Lain > Alat Pembangun dan buka tab Prestasi. Anda juga boleh menggunakan pintasan papan kekunci Ctrl + Shift + I pada Windows atau Option + Command + I pada Mac untuk membuka alat pembangun.
Tab Prestasi mengandungi alat Profiling. Buka laman web (cuba, sebagai contoh, https://www.microsoft.com) dan klik butang 'Record', kemudian segarkan laman web tersebut. Hentikan rakaman pada bila-bila masa, dan anda akan dapat melihat rutin yang dihasilkan untuk 'script', 'render', dan 'paint' laman web:
✅ Lawati Dokumentasi Microsoft tentang panel Prestasi dalam Edge
Tip: untuk mendapatkan bacaan yang tepat tentang masa permulaan laman web anda, kosongkan cache penyemak imbas anda
Pilih elemen garis masa profil untuk memperbesar acara yang berlaku semasa halaman anda dimuat.
Dapatkan gambaran prestasi halaman anda dengan memilih bahagian garis masa profil dan melihat panel ringkasan:
Periksa panel Log Acara untuk melihat jika ada acara yang mengambil masa lebih daripada 15 ms:
✅ Kenali profiler anda! Buka alat pembangun di laman ini dan lihat jika ada halangan. Apakah aset yang paling lambat dimuat? Yang paling cepat?
Pemeriksaan Profiling
Secara umum, terdapat beberapa "kawasan masalah" yang setiap pembangun web harus perhatikan semasa membina laman web untuk mengelakkan kejutan yang tidak menyenangkan apabila tiba masa untuk melancarkan ke produksi.
Saiz aset: Web telah menjadi 'lebih berat', dan dengan itu lebih lambat, dalam beberapa tahun kebelakangan ini. Sebahagian daripada berat ini berkaitan dengan penggunaan imej.
✅ Lihat melalui Internet Archive untuk pandangan sejarah tentang berat halaman dan banyak lagi.
Amalan yang baik adalah memastikan imej anda dioptimumkan dan dihantar pada saiz dan resolusi yang sesuai untuk pengguna anda.
Traversals DOM: Penyemak imbas perlu membina Model Objek Dokumen berdasarkan kod yang anda tulis, jadi demi prestasi halaman yang baik, pastikan tag anda minimum, hanya menggunakan dan menggayakan apa yang diperlukan oleh halaman. Dalam hal ini, CSS berlebihan yang dikaitkan dengan halaman boleh dioptimumkan; gaya yang hanya perlu digunakan pada satu halaman tidak perlu dimasukkan dalam helaian gaya utama, sebagai contoh.
JavaScript: Setiap pembangun JavaScript harus memerhatikan skrip 'render-blocking' yang mesti dimuat sebelum DOM yang lain dapat dilalui dan dilukis ke penyemak imbas. Pertimbangkan untuk menggunakan defer dengan skrip inline anda (seperti yang dilakukan dalam modul Terrarium).
✅ Cuba beberapa laman web di laman Ujian Kelajuan Laman Web untuk mengetahui lebih lanjut tentang pemeriksaan biasa yang dilakukan untuk menentukan prestasi laman web.
Sekarang anda mempunyai idea tentang bagaimana penyemak imbas melukis aset yang anda hantar kepadanya, mari kita lihat beberapa perkara terakhir yang perlu anda lakukan untuk melengkapkan sambungan anda:
Buat fungsi untuk mengira warna
Bekerja dalam /src/index.js, tambahkan fungsi yang dipanggil calculateColor() selepas siri pembolehubah const yang anda tetapkan untuk mendapatkan akses kepada 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 } });
}
Apa yang berlaku di sini? Anda menghantar nilai (intensiti karbon) dari panggilan API yang anda selesaikan dalam pelajaran terakhir, dan kemudian anda mengira sejauh mana nilainya dengan indeks yang disajikan dalam array warna. Kemudian anda menghantar nilai warna terdekat itu ke runtime chrome.
Chrome.runtime mempunyai API yang mengendalikan pelbagai jenis tugas latar belakang, dan sambungan anda memanfaatkan itu:
"Gunakan API chrome.runtime untuk mendapatkan halaman latar belakang, mengembalikan butiran tentang manifest, dan mendengar serta bertindak balas terhadap acara dalam kitaran hayat aplikasi atau sambungan. Anda juga boleh menggunakan API ini untuk menukar laluan relatif URL kepada URL yang layak sepenuhnya."
✅ Jika anda sedang membangunkan sambungan penyemak imbas ini untuk Edge, mungkin mengejutkan anda bahawa anda menggunakan API chrome. Versi penyemak imbas Edge yang lebih baru berjalan pada enjin penyemak imbas Chromium, jadi anda boleh memanfaatkan alat ini.
Nota, jika anda ingin memprofilkan sambungan penyemak imbas, lancarkan alat pembangun dari dalam sambungan itu sendiri, kerana ia adalah instance penyemak imbas yang berasingan.
Tetapkan warna ikon lalai
Sekarang, dalam fungsi init(), tetapkan ikon kepada warna hijau generik untuk memulakan dengan sekali lagi memanggil tindakan updateIcon chrome:
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
Panggil fungsi, laksanakan panggilan
Seterusnya, panggil fungsi yang baru anda buat dengan menambahkannya kepada janji yang dikembalikan oleh API C02Signal:
//let CO2...
calculateColor(CO2);
Dan akhirnya, dalam /dist/background.js, tambahkan pendengar untuk panggilan tindakan latar belakang ini:
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);
}
Dalam kod ini, anda menambah pendengar untuk sebarang mesej yang datang kepada pengurus tugas latar belakang. Jika ia dipanggil 'updateIcon', maka kod seterusnya dijalankan untuk melukis ikon dengan warna yang sesuai menggunakan API Canvas.
✅ Anda akan belajar lebih lanjut tentang API Canvas dalam pelajaran Permainan Angkasa.
Sekarang, bina semula sambungan anda (npm run build), segarkan dan lancarkan sambungan anda, dan lihat warna berubah. Adakah ini masa yang sesuai untuk menjalankan tugas atau mencuci pinggan? Sekarang anda tahu!
Tahniah, anda telah membina sambungan penyemak imbas yang berguna dan belajar lebih lanjut tentang bagaimana penyemak imbas berfungsi dan cara memprofilkan prestasinya.
🚀 Cabaran
Selidiki beberapa laman web sumber terbuka yang telah wujud sejak lama dahulu, dan, berdasarkan sejarah GitHub mereka, lihat jika anda dapat menentukan bagaimana mereka dioptimumkan selama bertahun-tahun untuk prestasi, jika ada. Apakah titik kesakitan yang paling biasa?
Kuiz Pasca-Kuliah
Kajian Semula & Kajian Kendiri
Pertimbangkan untuk mendaftar ke buletin prestasi
Selidiki beberapa cara penyemak imbas mengukur prestasi web dengan melihat melalui tab prestasi dalam alat web mereka. Adakah anda menemui sebarang perbezaan utama?
Tugasan
Analisis laman web untuk prestasi
Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat yang kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.