23 KiB
โครงการส่วนขยายเบราว์เซอร์ ตอนที่ 3: เรียนรู้เกี่ยวกับงานเบื้องหลังและประสิทธิภาพ
เคยสงสัยไหมว่าทำไมบางส่วนขยายเบราว์เซอร์ถึงทำงานได้รวดเร็วและตอบสนองดี ในขณะที่บางส่วนดูช้าและไม่ลื่นไหล? ความลับอยู่ที่สิ่งที่เกิดขึ้นเบื้องหลัง ในขณะที่ผู้ใช้คลิกไปมาบนอินเทอร์เฟซของส่วนขยาย มีโลกของกระบวนการเบื้องหลังที่จัดการการดึงข้อมูล การอัปเดตไอคอน และทรัพยากรระบบอย่างเงียบๆ
นี่คือบทเรียนสุดท้ายในซีรีส์ส่วนขยายเบราว์เซอร์ และเราจะทำให้ตัวติดตามคาร์บอนฟุตพรินต์ของคุณทำงานได้อย่างราบรื่น คุณจะเพิ่มการอัปเดตไอคอนแบบไดนามิกและเรียนรู้วิธีตรวจจับปัญหาด้านประสิทธิภาพก่อนที่มันจะกลายเป็นปัญหาใหญ่ เหมือนกับการปรับแต่งรถแข่ง - การปรับแต่งเล็กๆ น้อยๆ สามารถสร้างความแตกต่างอย่างมากในวิธีการทำงานของทุกอย่าง
เมื่อจบบทเรียนนี้ คุณจะมีส่วนขยายที่ดูดีและเข้าใจหลักการด้านประสิทธิภาพที่แยกแอปเว็บที่ดีออกจากแอปที่ยอดเยี่ยม มาเริ่มต้นการเดินทางสู่โลกของการปรับแต่งเบราว์เซอร์กันเถอะ
แบบทดสอบก่อนเรียน
บทนำ
ในบทเรียนก่อนหน้านี้ คุณได้สร้างฟอร์ม เชื่อมต่อกับ API และจัดการการดึงข้อมูลแบบอะซิงโครนัส ส่วนขยายของคุณเริ่มเป็นรูปเป็นร่างอย่างดี
ตอนนี้เราต้องเพิ่มรายละเอียดสุดท้าย - เช่น การทำให้ไอคอนของส่วนขยายเปลี่ยนสีตามข้อมูลคาร์บอน สิ่งนี้ทำให้ฉันนึกถึงวิธีที่ NASA ต้องปรับแต่งทุกระบบบนยานอวกาศ Apollo พวกเขาไม่สามารถเสียเวลาและหน่วยความจำได้เลย เพราะชีวิตของคนขึ้นอยู่กับประสิทธิภาพ แม้ว่าส่วนขยายเบราว์เซอร์ของเราจะไม่สำคัญถึงขนาดนั้น แต่หลักการเดียวกันนี้ก็ยังใช้ได้ - โค้ดที่มีประสิทธิภาพสร้างประสบการณ์ผู้ใช้ที่ดีกว่า
พื้นฐานของประสิทธิภาพเว็บ
เมื่อโค้ดของคุณทำงานได้อย่างมีประสิทธิภาพ ผู้คนจะ รู้สึก ถึงความแตกต่าง คุณเคยมีช่วงเวลาที่หน้าเว็บโหลดทันทีหรือแอนิเมชันลื่นไหลไหม? นั่นคือประสิทธิภาพที่ดีในการทำงาน
ประสิทธิภาพไม่ได้เกี่ยวกับความเร็วเพียงอย่างเดียว - มันเกี่ยวกับการสร้างประสบการณ์เว็บที่รู้สึกเป็นธรรมชาติแทนที่จะดูอืดอาดและน่าหงุดหงิด ในยุคแรกของการคอมพิวเตอร์ Grace Hopper เคยเก็บนาโนวินาที (สายไฟยาวประมาณหนึ่งฟุต) ไว้บนโต๊ะของเธอเพื่อแสดงให้เห็นว่าแสงเดินทางได้ไกลแค่ไหนในหนึ่งในพันล้านวินาที นั่นเป็นวิธีที่เธออธิบายว่าทำไมทุกไมโครวินาทีจึงสำคัญในคอมพิวเตอร์ มาเรียนรู้เครื่องมือสืบสวนที่ช่วยให้คุณค้นหาสิ่งที่ทำให้ระบบช้าลงกันเถอะ
"ประสิทธิภาพเว็บไซต์เกี่ยวกับสองสิ่ง: ความเร็วในการโหลดหน้าเว็บ และความเร็วในการทำงานของโค้ดบนหน้าเว็บ" -- Zack Grossbart
หัวข้อเกี่ยวกับวิธีทำให้เว็บไซต์ของคุณเร็วสุดๆ บนอุปกรณ์ทุกประเภท สำหรับผู้ใช้ทุกประเภท ในทุกสถานการณ์นั้นกว้างขวางอย่างไม่น่าแปลกใจ นี่คือบางจุดที่ควรคำนึงถึงเมื่อคุณสร้างโครงการเว็บมาตรฐานหรือส่วนขยายเบราว์เซอร์
ขั้นตอนแรกในการปรับแต่งเว็บไซต์ของคุณคือการเข้าใจสิ่งที่เกิดขึ้นจริงๆ เบื้องหลัง โชคดีที่เบราว์เซอร์ของคุณมาพร้อมกับเครื่องมือสืบสวนที่ทรงพลังในตัว
ในการเปิด Developer Tools ใน Edge ให้คลิกที่จุดสามจุดที่มุมขวาบน จากนั้นไปที่ More Tools > Developer Tools หรือใช้คีย์ลัด: Ctrl + Shift + I บน Windows หรือ Option + Command + I บน Mac เมื่อคุณอยู่ที่นั่น ให้คลิกที่แท็บ Performance - นี่คือที่ที่คุณจะทำการสืบสวน
นี่คือชุดเครื่องมือสืบสวนประสิทธิภาพของคุณ:
- เปิด Developer Tools (คุณจะใช้สิ่งนี้บ่อยมากในฐานะนักพัฒนา!)
- ไปที่แท็บ Performance - คิดว่ามันเป็นตัวติดตามสุขภาพของแอปเว็บของคุณ
- กดปุ่ม Record และดูหน้าเว็บของคุณในขณะทำงาน
- ศึกษาผลลัพธ์เพื่อค้นหาสิ่งที่ทำให้ระบบช้าลง
ลองทำสิ่งนี้ เปิดเว็บไซต์ (Microsoft.com ก็ใช้ได้ดี) และคลิกปุ่ม 'Record' จากนั้นรีเฟรชหน้าเว็บและดูโปรไฟเลอร์จับทุกสิ่งที่เกิดขึ้น เมื่อคุณหยุดการบันทึก คุณจะเห็นการแยกย่อยรายละเอียดของวิธีที่เบราว์เซอร์ 'scripts', 'renders', และ 'paints' เว็บไซต์ มันทำให้ฉันนึกถึงวิธีที่ศูนย์ควบคุมภารกิจตรวจสอบทุกระบบในระหว่างการปล่อยจรวด - คุณจะได้รับข้อมูลเรียลไทม์เกี่ยวกับสิ่งที่เกิดขึ้นและเมื่อไหร่
✅ เอกสาร Microsoft มีรายละเอียดเพิ่มเติมมากมายหากคุณต้องการเจาะลึก
เคล็ดลับ: ล้างแคชเบราว์เซอร์ของคุณก่อนการทดสอบเพื่อดูว่าเว็บไซต์ของคุณทำงานอย่างไรสำหรับผู้เข้าชมครั้งแรก - มันมักจะแตกต่างจากการเข้าชมซ้ำ!
เลือกองค์ประกอบของไทม์ไลน์โปรไฟล์เพื่อซูมเข้าไปดูเหตุการณ์ที่เกิดขึ้นในขณะที่หน้าเว็บของคุณโหลด
รับภาพรวมของประสิทธิภาพหน้าเว็บของคุณโดยการเลือกส่วนหนึ่งของไทม์ไลน์โปรไฟล์และดูที่แผงสรุป:
ตรวจสอบแผงบันทึกเหตุการณ์เพื่อดูว่ามีเหตุการณ์ใดที่ใช้เวลานานกว่า 15 มิลลิวินาทีหรือไม่:
✅ ทำความรู้จักกับโปรไฟเลอร์ของคุณ! เปิดเครื่องมือสำหรับนักพัฒนาบนเว็บไซต์นี้และดูว่ามีปัญหาคอขวดหรือไม่ อะไรคือทรัพยากรที่โหลดช้าที่สุด? อะไรคือทรัพยากรที่โหลดเร็วที่สุด?
สิ่งที่ควรมองหาเมื่อทำการโปรไฟล์
การรันโปรไฟเลอร์เป็นเพียงจุดเริ่มต้น - ทักษะที่แท้จริงคือการรู้ว่ากราฟสีสันสดใสเหล่านั้นกำลังบอกอะไรคุณ ไม่ต้องกังวล คุณจะค่อยๆ เรียนรู้วิธีอ่านมัน นักพัฒนาที่มีประสบการณ์ได้เรียนรู้วิธีสังเกตสัญญาณเตือนก่อนที่มันจะกลายเป็นปัญหาใหญ่
มาพูดถึงตัวการที่มักจะทำให้เกิดปัญหาด้านประสิทธิภาพในโครงการเว็บกัน เหมือนกับที่ Marie Curie ต้องเฝ้าระวังระดับรังสีในห้องทดลองของเธอ เราต้องเฝ้าดูรูปแบบบางอย่างที่บ่งบอกถึงปัญหาที่กำลังเกิดขึ้น การจับปัญหาเหล่านี้ตั้งแต่เนิ่นๆ จะช่วยคุณ (และผู้ใช้ของคุณ) ให้พ้นจากความหงุดหงิดมากมาย
ขนาดของทรัพยากร: เว็บไซต์มีแนวโน้มที่จะ "หนัก" ขึ้นเรื่อยๆ ในช่วงหลายปีที่ผ่านมา และน้ำหนักที่เพิ่มขึ้นส่วนใหญ่มาจากภาพ มันเหมือนกับว่าเราใส่ของมากขึ้นเรื่อยๆ ในกระเป๋าเดินทางดิจิทัลของเรา
✅ ดูที่ Internet Archive เพื่อดูว่าขนาดหน้าเว็บเติบโตขึ้นอย่างไร - มันน่าสนใจมาก
วิธีการรักษาทรัพยากรให้เหมาะสม:
- บีบอัดภาพเหล่านั้น! รูปแบบสมัยใหม่อย่าง WebP สามารถลดขนาดไฟล์ได้อย่างมาก
- ส่งขนาดภาพที่เหมาะสมสำหรับแต่ละอุปกรณ์ - ไม่จำเป็นต้องส่งภาพขนาดใหญ่สำหรับเดสก์ท็อปไปยังโทรศัพท์
- ลดขนาด CSS และ JavaScript ของคุณ - ทุกไบต์มีค่า
- ใช้การโหลดแบบ Lazy Loading เพื่อให้ภาพดาวน์โหลดเฉพาะเมื่อผู้ใช้เลื่อนมาถึง
DOM traversals: เบราว์เซอร์ต้องสร้าง Document Object Model ตามโค้ดที่คุณเขียน ดังนั้นเพื่อประสิทธิภาพของหน้าเว็บที่ดี ควรรักษาแท็กให้น้อยที่สุด ใช้และสไตล์เฉพาะสิ่งที่หน้าเว็บต้องการ ตัวอย่างเช่น CSS ที่ใช้เฉพาะในหน้าเดียวไม่จำเป็นต้องรวมอยู่ในไฟล์สไตล์หลัก
กลยุทธ์สำคัญสำหรับการปรับแต่ง DOM:
- ลดจำนวนองค์ประกอบ HTML และระดับการซ้อน
- ลบกฎ CSS ที่ไม่ได้ใช้งานและรวมไฟล์สไตล์อย่างมีประสิทธิภาพ
- จัดการ CSS ให้โหลดเฉพาะสิ่งที่จำเป็นสำหรับแต่ละหน้า
- จัดโครงสร้าง HTML อย่างมีความหมายเพื่อการวิเคราะห์ของเบราว์เซอร์ที่ดีขึ้น
JavaScript: นักพัฒนา JavaScript ทุกคนควรเฝ้าระวัง 'render-blocking' scripts ที่ต้องโหลดก่อนที่ DOM จะสามารถถูกวิเคราะห์และแสดงผลในเบราว์เซอร์ได้ ลองใช้ defer กับสคริปต์ inline ของคุณ (เหมือนที่ทำในโมดูล Terrarium)
เทคนิคการปรับแต่ง JavaScript สมัยใหม่:
- ใช้แอตทริบิวต์
deferเพื่อโหลดสคริปต์หลังจากการวิเคราะห์ DOM - ใช้การแบ่งโค้ดเพื่อโหลดเฉพาะ JavaScript ที่จำเป็น
- ใช้การโหลดแบบ Lazy Loading สำหรับฟังก์ชันที่ไม่สำคัญ
- ลดการใช้ไลบรารีและเฟรมเวิร์กที่หนักเมื่อเป็นไปได้
✅ ลองทดสอบเว็บไซต์บางแห่งบน เว็บไซต์ทดสอบความเร็ว เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการตรวจสอบทั่วไปที่ทำเพื่อกำหนดประสิทธิภาพของเว็บไซต์
ตอนนี้คุณมีแนวคิดเกี่ยวกับวิธีที่เบราว์เซอร์แสดงผลทรัพยากรที่คุณส่งไปให้แล้ว มาดูสิ่งสุดท้ายที่คุณต้องทำเพื่อทำให้ส่วนขยายของคุณสมบูรณ์:
สร้างฟังก์ชันเพื่อคำนวณสี
ตอนนี้เราจะสร้างฟังก์ชันที่เปลี่ยนข้อมูลตัวเลขให้เป็นสีที่มีความหมาย คิดว่ามันเหมือนระบบไฟจราจร - สีเขียวสำหรับพลังงานสะอาด สีแดงสำหรับความเข้มข้นของคาร์บอนสูง
ฟังก์ชันนี้จะรับข้อมูล CO2 จาก API ของเราและกำหนดว่าสีใดที่แสดงถึงผลกระทบต่อสิ่งแวดล้อมได้ดีที่สุด มันคล้ายกับวิธีที่นักวิทยาศาสตร์ใช้การเข้ารหัสสีในแผนที่ความร้อนเพื่อแสดงรูปแบบข้อมูลที่ซับซ้อน - ตั้งแต่温度มหาสมุทรไปจนถึงการก่ นี่คือภารกิจนักสืบที่น่าสนใจ: เลือกเว็บไซต์โอเพ่นซอร์สที่มีมานานหลายปี (เช่น Wikipedia, GitHub หรือ Stack Overflow) แล้วลองสำรวจประวัติการแก้ไข (commit history) ของพวกเขา คุณสามารถสังเกตเห็นจุดที่พวกเขาปรับปรุงประสิทธิภาพได้หรือไม่? มีปัญหาอะไรที่เกิดขึ้นซ้ำๆ บ้าง?
วิธีการสืบสวนของคุณ:
- ค้นหา ข้อความใน commit ที่มีคำว่า "optimize," "performance," หรือ "faster"
- สังเกต รูปแบบ - พวกเขาแก้ไขปัญหาแบบเดิมซ้ำๆ หรือไม่?
- ระบุ สาเหตุทั่วไปที่ทำให้เว็บไซต์ช้าลง
- แบ่งปัน สิ่งที่คุณค้นพบ - นักพัฒนาคนอื่นๆ จะได้เรียนรู้จากตัวอย่างในโลกจริง
แบบทดสอบหลังการบรรยาย
ทบทวนและศึกษาด้วยตัวเอง
ลองสมัครรับ จดหมายข่าวเกี่ยวกับประสิทธิภาพ
สำรวจวิธีที่เบราว์เซอร์วัดประสิทธิภาพของเว็บไซต์โดยดูผ่านแท็บประสิทธิภาพในเครื่องมือเว็บของพวกเขา คุณพบความแตกต่างที่สำคัญหรือไม่?
งานที่ได้รับมอบหมาย
วิเคราะห์เว็บไซต์เพื่อประสิทธิภาพ
ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้