การทำงานของ JavaScript

JavaScript ในเว็บเบราว์เซอร์

1. การโหลดและประมวลผล: เมื่อเบราว์เซอร์โหลดหน้าเว็บ HTML จะถูกอ่านและประมวลผลก่อน จากนั้นไฟล์ JavaScript ที่อ้างอิงใน <script> จะถูกโหลด
2. การแยกวิเคราะห์: JavaScript engine จะอ่านและวิเคราะห์โค้ด JavaScript เพื่อสร้าง Abstract Syntax Tree (AST) ซึ่งเป็นโครงสร้างต้นไม้ที่แสดงความสัมพันธ์ของโค้ด
3. การคอมไพล์: JavaScript engine แปลง AST เป็นรหัสเครื่องหรือรหัสขั้นกลางที่ทำงานได้เร็วขึ้น
4. การประมวลผล: โค้ดที่คอมไพล์แล้วจะถูกประมวลผลโดย JavaScript engine ทำให้หน้าเว็บมีการโต้ตอบได้

JavaScript Engines

JavaScript engines คือโปรแกรมที่แปลและประมวลผลโค้ด JavaScript ตัวอย่างเช่น:

• V8: พัฒนาโดย Google ใช้ใน Chrome และ Node.js มีประสิทธิภาพสูงและเป็นที่นิยมมากที่สุด
• SpiderMonkey: พัฒนาโดย Mozilla ใช้ใน Firefox เป็น JavaScript engine ตัวแรกที่เคยสร้างขึ้น
• JavaScriptCore: พัฒนาโดย Apple ใช้ใน Safari ปรับให้เหมาะกับอุปกรณ์ Apple
• Chakra: พัฒนาโดย Microsoft ใช้ใน Edge รุ่นเก่า (ปัจจุบัน Edge ใช้ V8)

Event Loop

JavaScript เป็นภาษาแบบ single-threaded (ประมวลผลทีละคำสั่ง) แต่สามารถจัดการงานแบบ asynchronous (ไม่ต้องรอกัน) ได้อย่างมีประสิทธิภาพผ่านกลไกที่เรียกว่า Event Loop:

1. Call Stack: คือพื้นที่หน่วยความจำที่เก็บลำดับการทำงานของฟังก์ชัน

   • ทำงานตามหลัก LIFO (Last In, First Out) - ฟังก์ชันที่เข้ามาทีหลังจะถูกประมวลผลก่อน
   • เมื่อเรียกฟังก์ชัน จะถูกเพิ่มเข้าไปบน Stack
   • เมื่อฟังก์ชันทำงานเสร็จ จะถูกนำออกจาก Stack

2. Callback Queue: คือแถวคอยที่เก็บงานที่ต้องทำในอนาคต

   • เก็บ callbacks จากการทำงานแบบ asynchronous เช่น setTimeout, fetch, event listeners
   • งานเหล่านี้จะถูกจัดเรียงตามลำดับเวลาที่ควรทำงาน (FIFO - First In, First Out)

3. Event Loop: เป็นกลไกหลักที่ทำให้ JavaScript ทำงานแบบ non-blocking

   • ทำหน้าที่ตรวจสอบ Call Stack และ Callback Queue อย่างต่อเนื่อง
   • หากพบว่า Call Stack ว่าง (ไม่มีฟังก์ชันกำลังทำงาน) จะดึงงานจาก Callback Queue มาใส่ใน Call Stack
   • กระบวนการนี้ทำให้ JavaScript สามารถรันโค้ดหลักไปได้เรื่อยๆ โดยไม่ต้องรอการทำงานที่ใช้เวลานาน

เปรียบเสมือนพนักงานคนเดียว (single-thread) ที่ทำงานหลายอย่างได้โดยไม่ต้องรอ โดยเมื่อมีงานที่ต้องใช้เวลา จะส่งให้คนอื่นช่วยทำ แล้วกลับมาทำงานอื่นต่อ เมื่องานนั้นเสร็จแล้วจึงค่อยกลับไปจัดการผลลัพธ์

ตัวอย่างการทำงานของ Event Loop:

console.log("Start");  // 1. ทำงานทันที

setTimeout(function() {
  console.log("Wait 2 seconds");  // 3. ทำงานหลังจาก 2 วินาที
}, 2000);

console.log("End");  // 2. ทำงานทันทีหลังจากบรรทัดแรก