20 KiB
โครงการส่วนขยายเบราว์เซอร์ ตอนที่ 3: เรียนรู้เกี่ยวกับงานเบื้องหลังและประสิทธิภาพ
แบบทดสอบก่อนเรียน
บทนำ
ในสองบทเรียนที่ผ่านมา คุณได้เรียนรู้วิธีสร้างฟอร์มและพื้นที่แสดงข้อมูลที่ดึงมาจาก API ซึ่งเป็นวิธีมาตรฐานในการสร้างเว็บไซต์บนเว็บ คุณยังได้เรียนรู้วิธีจัดการกับการดึงข้อมูลแบบอะซิงโครนัสอีกด้วย ตอนนี้ส่วนขยายเบราว์เซอร์ของคุณเกือบจะเสร็จสมบูรณ์แล้ว
สิ่งที่เหลืออยู่คือการจัดการงานเบื้องหลังบางอย่าง เช่น การรีเฟรชสีของไอคอนส่วนขยาย ดังนั้นนี่จึงเป็นเวลาที่เหมาะสมที่จะพูดถึงวิธีที่เบราว์เซอร์จัดการงานประเภทนี้ ลองพิจารณางานเหล่านี้ในบริบทของประสิทธิภาพของทรัพยากรเว็บของคุณในขณะที่คุณสร้างมันขึ้นมา
พื้นฐานของประสิทธิภาพเว็บ
"ประสิทธิภาพของเว็บไซต์เกี่ยวกับสองสิ่ง: ความเร็วในการโหลดหน้าเว็บ และความเร็วในการทำงานของโค้ดในหน้านั้น" -- Zack Grossbart
หัวข้อเกี่ยวกับวิธีทำให้เว็บไซต์ของคุณเร็วสุด ๆ บนอุปกรณ์ทุกประเภท สำหรับผู้ใช้ทุกคน ในทุกสถานการณ์นั้นเป็นเรื่องที่กว้างขวางอย่างไม่น่าแปลกใจ ต่อไปนี้คือประเด็นที่ควรคำนึงถึงในขณะที่คุณสร้างโครงการเว็บมาตรฐานหรือส่วนขยายเบราว์เซอร์
สิ่งแรกที่คุณต้องทำเพื่อให้แน่ใจว่าเว็บไซต์ของคุณทำงานได้อย่างมีประสิทธิภาพคือการรวบรวมข้อมูลเกี่ยวกับประสิทธิภาพของมัน จุดเริ่มต้นแรกคือเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ของคุณ ใน Edge คุณสามารถเลือกปุ่ม "การตั้งค่าและอื่น ๆ" (ไอคอนจุดสามจุดที่มุมขวาบนของเบราว์เซอร์) จากนั้นไปที่ เครื่องมือเพิ่มเติม > เครื่องมือสำหรับนักพัฒนา และเปิดแท็บ Performance คุณยังสามารถใช้คีย์ลัด Ctrl + Shift + I บน Windows หรือ Option + Command + I บน Mac เพื่อเปิดเครื่องมือสำหรับนักพัฒนา
แท็บ Performance มีเครื่องมือสำหรับการทำโปรไฟล์ เปิดเว็บไซต์ (ลองตัวอย่างเช่น https://www.microsoft.com) และคลิกปุ่ม 'Record' จากนั้นรีเฟรชเว็บไซต์ หยุดการบันทึกเมื่อใดก็ได้ และคุณจะสามารถดูขั้นตอนที่สร้างขึ้นเพื่อ 'script', 'render' และ 'paint' เว็บไซต์:
✅ เยี่ยมชม เอกสาร Microsoft เกี่ยวกับแท็บ Performance ใน Edge
เคล็ดลับ: เพื่อให้ได้ข้อมูลที่แม่นยำเกี่ยวกับเวลาเริ่มต้นของเว็บไซต์ของคุณ ให้ล้างแคชของเบราว์เซอร์
เลือกองค์ประกอบของไทม์ไลน์โปรไฟล์เพื่อซูมดูเหตุการณ์ที่เกิดขึ้นในขณะที่หน้าเว็บของคุณโหลด
ดูภาพรวมของประสิทธิภาพของหน้าของคุณโดยเลือกส่วนหนึ่งของไทม์ไลน์โปรไฟล์และดูที่แผงสรุป:
ตรวจสอบแผง Event Log เพื่อดูว่ามีเหตุการณ์ใดที่ใช้เวลานานกว่า 15 มิลลิวินาทีหรือไม่:
✅ ทำความรู้จักกับเครื่องมือโปรไฟล์ของคุณ! เปิดเครื่องมือสำหรับนักพัฒนาบนเว็บไซต์นี้และดูว่ามีปัญหาคอขวดหรือไม่ ทรัพยากรใดโหลดช้าที่สุด? เร็วที่สุด?
การตรวจสอบโปรไฟล์
โดยทั่วไป มี "จุดปัญหา" บางอย่างที่นักพัฒนาเว็บทุกคนควรระวังเมื่อสร้างเว็บไซต์เพื่อหลีกเลี่ยงปัญหาที่ไม่คาดคิดเมื่อถึงเวลานำไปใช้งานจริง
ขนาดของทรัพยากร: เว็บมีขนาด 'หนัก' และช้าลงในช่วงไม่กี่ปีที่ผ่านมา ส่วนหนึ่งของน้ำหนักนี้มาจากการใช้ภาพ
✅ ลองดู Internet Archive เพื่อดูประวัติของน้ำหนักหน้าเว็บและข้อมูลเพิ่มเติม
แนวปฏิบัติที่ดีคือการตรวจสอบให้แน่ใจว่าภาพของคุณได้รับการปรับแต่งและส่งมอบในขนาดและความละเอียดที่เหมาะสมสำหรับผู้ใช้ของคุณ
DOM traversals: เบราว์เซอร์ต้องสร้าง 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 เพื่อดึงหน้าพื้นหลัง รายละเอียดเกี่ยวกับ manifest และฟังและตอบสนองต่อเหตุการณ์ในวงจรชีวิตของแอปหรือส่วนขยาย คุณยังสามารถใช้ API นี้เพื่อแปลงเส้นทาง URL เป็น URL ที่มีคุณสมบัติครบถ้วน"
✅ หากคุณกำลังพัฒนาส่วนขยายเบราว์เซอร์สำหรับ Edge คุณอาจแปลกใจที่คุณกำลังใช้ API ของ chrome เบราว์เซอร์ Edge เวอร์ชันใหม่กว่าทำงานบนเอนจินเบราว์เซอร์ Chromium ดังนั้นคุณสามารถใช้เครื่องมือเหล่านี้ได้
หมายเหตุ หากคุณต้องการทำโปรไฟล์ส่วนขยายเบราว์เซอร์ ให้เปิดเครื่องมือสำหรับนักพัฒนาจากภายในส่วนขยายเอง เนื่องจากมันเป็นอินสแตนซ์เบราว์เซอร์แยกต่างหาก
ตั้งค่าสีไอคอนเริ่มต้น
ตอนนี้ ในฟังก์ชัน init() ตั้งค่าไอคอนให้เป็นสีเขียวทั่วไปโดยการเรียกใช้การกระทำ updateIcon ของ chrome อีกครั้ง:
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 ของพวกเขา ดูว่าคุณสามารถระบุได้หรือไม่ว่าพวกเขาได้รับการปรับปรุงประสิทธิภาพอย่างไรในช่วงหลายปีที่ผ่านมา หากมี จุดปัญหาที่พบบ่อยที่สุดคืออะไร?
แบบทดสอบหลังเรียน
ทบทวนและศึกษาด้วยตนเอง
ลองสมัครรับ จดหมายข่าวเกี่ยวกับประสิทธิภาพ
สำรวจวิธีต่าง ๆ ที่เบราว์เซอร์วัดประสิทธิภาพเว็บโดยดูผ่านแท็บประสิทธิภาพในเครื่องมือเว็บของพวกเขา คุณพบความแตกต่างที่สำคัญหรือไม่?
การบ้าน
วิเคราะห์เว็บไซต์เพื่อประสิทธิภาพ
ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์มืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดซึ่งเกิดจากการใช้การแปลนี้