# โครงการส่วนขยายเบราว์เซอร์ ตอนที่ 3: เรียนรู้เกี่ยวกับงานเบื้องหลังและประสิทธิภาพ เคยสงสัยไหมว่าทำไมบางส่วนขยายเบราว์เซอร์ถึงทำงานได้รวดเร็วและตอบสนองดี ในขณะที่บางส่วนดูช้าและไม่ลื่นไหล? ความลับอยู่ที่สิ่งที่เกิดขึ้นเบื้องหลัง ในขณะที่ผู้ใช้คลิกไปมาบนอินเทอร์เฟซของส่วนขยาย มีโลกของกระบวนการเบื้องหลังที่จัดการการดึงข้อมูล การอัปเดตไอคอน และทรัพยากรระบบอย่างเงียบๆ นี่คือบทเรียนสุดท้ายในซีรีส์ส่วนขยายเบราว์เซอร์ และเราจะทำให้ตัวติดตามคาร์บอนฟุตพรินต์ของคุณทำงานได้อย่างราบรื่น คุณจะเพิ่มการอัปเดตไอคอนแบบไดนามิกและเรียนรู้วิธีตรวจจับปัญหาด้านประสิทธิภาพก่อนที่มันจะกลายเป็นปัญหาใหญ่ เหมือนกับการปรับแต่งรถแข่ง - การปรับแต่งเล็กๆ น้อยๆ สามารถสร้างความแตกต่างอย่างมากในวิธีการทำงานของทุกอย่าง เมื่อจบบทเรียนนี้ คุณจะมีส่วนขยายที่ดูดีและเข้าใจหลักการด้านประสิทธิภาพที่แยกแอปเว็บที่ดีออกจากแอปที่ยอดเยี่ยม มาเริ่มต้นการเดินทางสู่โลกของการปรับแต่งเบราว์เซอร์กันเถอะ ## แบบทดสอบก่อนเรียน [แบบทดสอบก่อนเรียน](https://ff-quizzes.netlify.app/web/quiz/27) ### บทนำ ในบทเรียนก่อนหน้านี้ คุณได้สร้างฟอร์ม เชื่อมต่อกับ API และจัดการการดึงข้อมูลแบบอะซิงโครนัส ส่วนขยายของคุณเริ่มเป็นรูปเป็นร่างอย่างดี ตอนนี้เราต้องเพิ่มรายละเอียดสุดท้าย - เช่น การทำให้ไอคอนของส่วนขยายเปลี่ยนสีตามข้อมูลคาร์บอน สิ่งนี้ทำให้ฉันนึกถึงวิธีที่ NASA ต้องปรับแต่งทุกระบบบนยานอวกาศ Apollo พวกเขาไม่สามารถเสียเวลาและหน่วยความจำได้เลย เพราะชีวิตของคนขึ้นอยู่กับประสิทธิภาพ แม้ว่าส่วนขยายเบราว์เซอร์ของเราจะไม่สำคัญถึงขนาดนั้น แต่หลักการเดียวกันนี้ก็ยังใช้ได้ - โค้ดที่มีประสิทธิภาพสร้างประสบการณ์ผู้ใช้ที่ดีกว่า ## พื้นฐานของประสิทธิภาพเว็บ เมื่อโค้ดของคุณทำงานได้อย่างมีประสิทธิภาพ ผู้คนจะ *รู้สึก* ถึงความแตกต่าง คุณเคยมีช่วงเวลาที่หน้าเว็บโหลดทันทีหรือแอนิเมชันลื่นไหลไหม? นั่นคือประสิทธิภาพที่ดีในการทำงาน ประสิทธิภาพไม่ได้เกี่ยวกับความเร็วเพียงอย่างเดียว - มันเกี่ยวกับการสร้างประสบการณ์เว็บที่รู้สึกเป็นธรรมชาติแทนที่จะดูอืดอาดและน่าหงุดหงิด ในยุคแรกของการคอมพิวเตอร์ Grace Hopper เคยเก็บนาโนวินาที (สายไฟยาวประมาณหนึ่งฟุต) ไว้บนโต๊ะของเธอเพื่อแสดงให้เห็นว่าแสงเดินทางได้ไกลแค่ไหนในหนึ่งในพันล้านวินาที นั่นเป็นวิธีที่เธออธิบายว่าทำไมทุกไมโครวินาทีจึงสำคัญในคอมพิวเตอร์ มาเรียนรู้เครื่องมือสืบสวนที่ช่วยให้คุณค้นหาสิ่งที่ทำให้ระบบช้าลงกันเถอะ > "ประสิทธิภาพเว็บไซต์เกี่ยวกับสองสิ่ง: ความเร็วในการโหลดหน้าเว็บ และความเร็วในการทำงานของโค้ดบนหน้าเว็บ" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) หัวข้อเกี่ยวกับวิธีทำให้เว็บไซต์ของคุณเร็วสุดๆ บนอุปกรณ์ทุกประเภท สำหรับผู้ใช้ทุกประเภท ในทุกสถานการณ์นั้นกว้างขวางอย่างไม่น่าแปลกใจ นี่คือบางจุดที่ควรคำนึงถึงเมื่อคุณสร้างโครงการเว็บมาตรฐานหรือส่วนขยายเบราว์เซอร์ ขั้นตอนแรกในการปรับแต่งเว็บไซต์ของคุณคือการเข้าใจสิ่งที่เกิดขึ้นจริงๆ เบื้องหลัง โชคดีที่เบราว์เซอร์ของคุณมาพร้อมกับเครื่องมือสืบสวนที่ทรงพลังในตัว ในการเปิด 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](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) มีรายละเอียดเพิ่มเติมมากมายหากคุณต้องการเจาะลึก > เคล็ดลับ: ล้างแคชเบราว์เซอร์ของคุณก่อนการทดสอบเพื่อดูว่าเว็บไซต์ของคุณทำงานอย่างไรสำหรับผู้เข้าชมครั้งแรก - มันมักจะแตกต่างจากการเข้าชมซ้ำ! เลือกองค์ประกอบของไทม์ไลน์โปรไฟล์เพื่อซูมเข้าไปดูเหตุการณ์ที่เกิดขึ้นในขณะที่หน้าเว็บของคุณโหลด รับภาพรวมของประสิทธิภาพหน้าเว็บของคุณโดยการเลือกส่วนหนึ่งของไทม์ไลน์โปรไฟล์และดูที่แผงสรุป:  ตรวจสอบแผงบันทึกเหตุการณ์เพื่อดูว่ามีเหตุการณ์ใดที่ใช้เวลานานกว่า 15 มิลลิวินาทีหรือไม่:  ✅ ทำความรู้จักกับโปรไฟเลอร์ของคุณ! เปิดเครื่องมือสำหรับนักพัฒนาบนเว็บไซต์นี้และดูว่ามีปัญหาคอขวดหรือไม่ อะไรคือทรัพยากรที่โหลดช้าที่สุด? อะไรคือทรัพยากรที่โหลดเร็วที่สุด? ## สิ่งที่ควรมองหาเมื่อทำการโปรไฟล์ การรันโปรไฟเลอร์เป็นเพียงจุดเริ่มต้น - ทักษะที่แท้จริงคือการรู้ว่ากราฟสีสันสดใสเหล่านั้นกำลังบอกอะไรคุณ ไม่ต้องกังวล คุณจะค่อยๆ เรียนรู้วิธีอ่านมัน นักพัฒนาที่มีประสบการณ์ได้เรียนรู้วิธีสังเกตสัญญาณเตือนก่อนที่มันจะกลายเป็นปัญหาใหญ่ มาพูดถึงตัวการที่มักจะทำให้เกิดปัญหาด้านประสิทธิภาพในโครงการเว็บกัน เหมือนกับที่ Marie Curie ต้องเฝ้าระวังระดับรังสีในห้องทดลองของเธอ เราต้องเฝ้าดูรูปแบบบางอย่างที่บ่งบอกถึงปัญหาที่กำลังเกิดขึ้น การจับปัญหาเหล่านี้ตั้งแต่เนิ่นๆ จะช่วยคุณ (และผู้ใช้ของคุณ) ให้พ้นจากความหงุดหงิดมากมาย **ขนาดของทรัพยากร**: เว็บไซต์มีแนวโน้มที่จะ "หนัก" ขึ้นเรื่อยๆ ในช่วงหลายปีที่ผ่านมา และน้ำหนักที่เพิ่มขึ้นส่วนใหญ่มาจากภาพ มันเหมือนกับว่าเราใส่ของมากขึ้นเรื่อยๆ ในกระเป๋าเดินทางดิจิทัลของเรา ✅ ดูที่ [Internet Archive](https://httparchive.org/reports/page-weight) เพื่อดูว่าขนาดหน้าเว็บเติบโตขึ้นอย่างไร - มันน่าสนใจมาก **วิธีการรักษาทรัพยากรให้เหมาะสม:** - **บีบอัด**ภาพเหล่านั้น! รูปแบบสมัยใหม่อย่าง 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 สำหรับฟังก์ชันที่ไม่สำคัญ - **ลด**การใช้ไลบรารีและเฟรมเวิร์กที่หนักเมื่อเป็นไปได้ ✅ ลองทดสอบเว็บไซต์บางแห่งบน [เว็บไซต์ทดสอบความเร็ว](https://www.webpagetest.org/) เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการตรวจสอบทั่วไปที่ทำเพื่อกำหนดประสิทธิภาพของเว็บไซต์ ตอนนี้คุณมีแนวคิดเกี่ยวกับวิธีที่เบราว์เซอร์แสดงผลทรัพยากรที่คุณส่งไปให้แล้ว มาดูสิ่งสุดท้ายที่คุณต้องทำเพื่อทำให้ส่วนขยายของคุณสมบูรณ์: ### สร้างฟังก์ชันเพื่อคำนวณสี ตอนนี้เราจะสร้างฟังก์ชันที่เปลี่ยนข้อมูลตัวเลขให้เป็นสีที่มีความหมาย คิดว่ามันเหมือนระบบไฟจราจร - สีเขียวสำหรับพลังงานสะอาด สีแดงสำหรับความเข้มข้นของคาร์บอนสูง ฟังก์ชันนี้จะรับข้อมูล CO2 จาก API ของเราและกำหนดว่าสีใดที่แสดงถึงผลกระทบต่อสิ่งแวดล้อมได้ดีที่สุด มันคล้ายกับวิธีที่นักวิทยาศาสตร์ใช้การเข้ารหัสสีในแผนที่ความร้อนเพื่อแสดงรูปแบบข้อมูลที่ซับซ้อน - ตั้งแต่温度มหาสมุทรไปจนถึงการก่ นี่คือภารกิจนักสืบที่น่าสนใจ: เลือกเว็บไซต์โอเพ่นซอร์สที่มีมานานหลายปี (เช่น Wikipedia, GitHub หรือ Stack Overflow) แล้วลองสำรวจประวัติการแก้ไข (commit history) ของพวกเขา คุณสามารถสังเกตเห็นจุดที่พวกเขาปรับปรุงประสิทธิภาพได้หรือไม่? มีปัญหาอะไรที่เกิดขึ้นซ้ำๆ บ้าง? **วิธีการสืบสวนของคุณ:** - **ค้นหา** ข้อความใน commit ที่มีคำว่า "optimize," "performance," หรือ "faster" - **สังเกต** รูปแบบ - พวกเขาแก้ไขปัญหาแบบเดิมซ้ำๆ หรือไม่? - **ระบุ** สาเหตุทั่วไปที่ทำให้เว็บไซต์ช้าลง - **แบ่งปัน** สิ่งที่คุณค้นพบ - นักพัฒนาคนอื่นๆ จะได้เรียนรู้จากตัวอย่างในโลกจริง ## แบบทดสอบหลังการบรรยาย [แบบทดสอบหลังการบรรยาย](https://ff-quizzes.netlify.app/web/quiz/28) ## ทบทวนและศึกษาด้วยตัวเอง ลองสมัครรับ [จดหมายข่าวเกี่ยวกับประสิทธิภาพ](https://perf.email/) สำรวจวิธีที่เบราว์เซอร์วัดประสิทธิภาพของเว็บไซต์โดยดูผ่านแท็บประสิทธิภาพในเครื่องมือเว็บของพวกเขา คุณพบความแตกต่างที่สำคัญหรือไม่? ## งานที่ได้รับมอบหมาย [วิเคราะห์เว็บไซต์เพื่อประสิทธิภาพ](assignment.md) --- **ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้