Web-Dev-For-Beginners/translations/th/5-browser-extension/3-background-tasks-and-performance/README.md

<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "eb358f3f4c2c082f9f3a4f98efa1d337",
  "translation_date": "2025-10-23T21:22:18+00:00",
  "source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
  "language_code": "th"
}
-->
# โครงการส่วนขยายเบราว์เซอร์ ตอนที่ 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' เว็บไซต์ มันทำให้ฉันนึกถึงวิธีที่ศูนย์ควบคุมภารกิจตรวจสอบทุกระบบในระหว่างการปล่อยจรวด - คุณจะได้รับข้อมูลเรียลไทม์เกี่ยวกับสิ่งที่เกิดขึ้นและเมื่อไหร่

![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.th.png)

✅ [เอกสาร Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) มีรายละเอียดเพิ่มเติมมากมายหากคุณต้องการเจาะลึก

> เคล็ดลับ: ล้างแคชเบราว์เซอร์ของคุณก่อนการทดสอบเพื่อดูว่าเว็บไซต์ของคุณทำงานอย่างไรสำหรับผู้เข้าชมครั้งแรก - มันมักจะแตกต่างจากการเข้าชมซ้ำ!

เลือกองค์ประกอบของไทม์ไลน์โปรไฟล์เพื่อซูมเข้าไปดูเหตุการณ์ที่เกิดขึ้นในขณะที่หน้าเว็บของคุณโหลด

รับภาพรวมของประสิทธิภาพหน้าเว็บของคุณโดยการเลือกส่วนหนึ่งของไทม์ไลน์โปรไฟล์และดูที่แผงสรุป:

![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.th.png)

ตรวจสอบแผงบันทึกเหตุการณ์เพื่อดูว่ามีเหตุการณ์ใดที่ใช้เวลานานกว่า 15 มิลลิวินาทีหรือไม่:

![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.th.png)

✅ ทำความรู้จักกับโปรไฟเลอร์ของคุณ! เปิดเครื่องมือสำหรับนักพัฒนาบนเว็บไซต์นี้และดูว่ามีปัญหาคอขวดหรือไม่ อะไรคือทรัพยากรที่โหลดช้าที่สุด? อะไรคือทรัพยากรที่โหลดเร็วที่สุด?

## สิ่งที่ควรมองหาเมื่อทำการโปรไฟล์

การรันโปรไฟเลอร์เป็นเพียงจุดเริ่มต้น - ทักษะที่แท้จริงคือการรู้ว่ากราฟสีสันสดใสเหล่านั้นกำลังบอกอะไรคุณ ไม่ต้องกังวล คุณจะค่อยๆ เรียนรู้วิธีอ่านมัน นักพัฒนาที่มีประสบการณ์ได้เรียนรู้วิธีสังเกตสัญญาณเตือนก่อนที่มันจะกลายเป็นปัญหาใหญ่

มาพูดถึงตัวการที่มักจะทำให้เกิดปัญหาด้านประสิทธิภาพในโครงการเว็บกัน เหมือนกับที่ 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) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้