Today’s Javascript Execution Pipeline (V8)

หูวววว ชื่อเรื่องดูมีความรู้

สวัสดีครับ ทุกโค๊นนน .. วันนี้ไม่พูดพล่ามทำเพลง จบเลยดีกว่า
เห้ยย ! เดี๋ยวๆๆ

ที่มาของเรื่องวันนี้ คือผมเขียน JavaScript อยู่แล้วครับ
ทีนี้ วันหนึ่งมีคนเขย่งก้าวกระโดดมาถามว่า เขียนยังไงให้สวย ?

ผมก็บอกว่าเขียนหยั่งงี๊ๆๆๆ หยั่งงั้นไม่สวย หยั่งงี้สวยกว่า …

แต่เอาเข้าจริง มันคงเป็นคำถามที่ไม่มีคำตอบ
เพราะความสวยมันขึ้นอยู่กับสายยาย ตา! ของแต่ละคน

อื่มม ก็จริงแฮะ

แล้วโค้ดแบบไหนถึงจะเร็ว และประหยัดเม็มที่สุด (ที่ผมต้องคิดถึงเรื่องเม็มโมรี่ ก็เพราะผมใช้ Chrome นั่นล่ะครับ อื้อหือ มันกินแรมจนแทบอยากจะขายซีพียู i7 ไปซื้อแรมมาเพิ่ม)

เป็นคำถามที่น่าสนใจ และผมเชื่อว่า มันต้องมีคำตอบรออยู่ที่ทางช้างสานแน่ๆ !

ติํ๊ง เสียงอีเมลเข้า … The Stranger Things 2 เข้าแล้ว โอ้วมายโก้ท …
(นี่แหละครับ สาเหตุให้เขียนบล๊อคไม่ออกซักที เจอ Eleven สะกดจิตไปยาวเลย)

เอาล่ะ ผมก็เลยลองหาดูว่า JavaScript Engine มันทำงานยังไงกันแน่
เผื่อจะรู้ว่า เขียนยังไงถึงจะเหมาะสมที่สุด ถึงจะดีที่สุด

หาไปหามา เริ่มยาว เริ่มเยอะ เริ่มล้า แต่ผมไม่ยอมครับ ผมก็ตั้งหน้าตั้งตาอ่านต่อไป
อ่านไปเรื่อยๆ ผมเริ่มเหนื่อย แต่ผมไม่ยอม ก็เลยพยายามอ่านต่อไป
อ่านต่อไป จนสุดท้าย ผมก็เลิกอ่าน แต่ผมก็ไม่ยอมอีก ก็เลยกลับมาอ่านต่อ
อ่านต่อไปเรื่อยๆ เรื่อยๆ เรื่อยๆ โอ๊ยยยยยยยยยย ไม่มีอะไรจะเขียน ก็ไม่ต้องเขียนก็ได้ เปลืองกระดาษ !

ผมเจอมาว่า JavaScript Engine ที่ Chrome ใช้อยู่ มีชื่อว่า V8
พอพูดถึง V8 เราก็มักจะพูดเครื่องยนต์ที่ทรงพลัง ทอร์คสูง เสียงบาดกระดูกหู
แต่ไม่ใช่ ! V8 ที่เรากำลังพูดถึงนี้ ไม่เกี่ยวกับเครื่องยนต์เลย แล้วมันคือ … อะไรนะ ?

V8 คือ JavaScript Engine เขียนโดย Google ด้วย C++
มันคือตัวที่ทำให้ JavaScript ใน Chrome ทำงานได้
และมันก็อยู่ใน Node.js ที่ดังเปรี้ยงปร้าง อยู่ทุกวันนี้

โว่ววววววว (ลองพูด “โว่ววว” แล้วลืมตากว้างๆดูครับ)
… ขอบคุณที่ช่วยให้มันดูน่าสนใจขึ้นนะครับ … (เพื่อนไม่ยอมเล่นด้วย ไล่ให้มาเล่นในนี้ T^T)

มันก็เหมือน เขียนโปรแกรมด้วย C++ มารันโปรแกรมที่เราเขียนด้วย JavaScript อีกที (ทีนี้ ใครอยากเขียนภาษาใหม่ด้วยตัวเอง ก็แค่คิด Syntax แปลกๆ แล้วก็เขียน JavaScript ให้ไปรันโปรแกรมนั้นอีกที ฮ่าๆๆๆ … เพื่อ !?)

หลักการทำงานของ V8 เป็นแบบนี้ครับ (ผมอ่านมาจากบทความเก่าๆ มันก็เลยเป็นเนื้อหาเก่าๆ แต่ถามว่า ทำไมผมไม่หยุดแล้วไปอ่านเนื้อหาใหม่ล่าสุดแทน … คำตอบคือผมค่อนข้างขี้เกียจเปลี่ยนแล้วครับ อ่านมาตั้งนาน กว่าจะรู้ว่าเค้าปล่อยเวอร์ชั่นใหม่ และที่สำคัญของเดิมโละทิ้ง ! ก็สายไปเสียแล้ว— ฮึ่มมมม นั่นแหล่ะครับสาเหตุที่ทุกท่าน กำลังจะอ่านเนื้อหาเก่าๆต่อจากนี้ไป)

แต่ถ้าพูดให้ดูดี ก็คือเราจะได้รู้ว่า พวกคนที่เค้าพัฒนา V8 เค้าเจอปัญหาอะไร เค้าพัฒนาอะไรต่อจากเวอร์ชันเก่า ประวัติศาสตร์นั้นสำคัญไฉน (โอเค แบบนี้ดูดีกว่า เดี๋ยวพรุ่งนี้ผมจะลบข้อความข้างบน)

เอาล่ะครับเนื้อหาต่อไปนี้คือเนื้อหาของเวอร์ชันที่ออกมาตั้งแต่ปี 2005 และพัฒนามาเรื่อยๆ แต่ยังใช้คอนเซปต์เดิมๆอยู่ (V8 ออกใหม่ ปี 2017 ยกเครื่องใหม่ด้วย เอาเป็นว่าในนี้ ผมพูดถึงเวอร์ 2005–2016 ถือว่าเป็นเวอร์ชันเก่านะครับ)

ภายใน V8 (เวอร์เก่า)

มีคอมไพเลอร์ ๒ ส่วนหลักๆ คอยช่วยกัน มีชื่อว่า

๑. “full-codegen” มันเอาไว้แปลงโค้ดที่เราเขียนด้วย JavaScript ให้กลายเป็น Machine Code (010101 แบบที่คอมเข้าใจเลย) ไม่ต้องแปลงเป็น Code อื่นๆก่อน (เช่น JAVA ที่ต้องแปลงเป็น Byte code ก่อน (คือแปลงเป็นอีกโค้ดนึงก่อน เพื่อสามารถเอาไปรันในเครื่องที่มีสถาปัตยกรรมต่างกัน ต่าง OS กันได้)) — เพราะฉะนั้นมันเร็วมากครับ แค่ Map จาก JS ไปเป็น Machine Code

๒. “Crankshaft” ตัวนี้เอาไว้ Optimize ครับ เจ้าตัวนี้แหละที่น่าสนใจ เพราะถ้าเราเขียน JS เพื่ออนุญาติให้เจ้า Crankshaft มันสามารถ Optimize โค้ดเราได้มีประสิทธิภาพที่สุด นั่นก็คือคำตอบของคำถามที่ผมถามตัวเอง ว่าเขียนยังไงให้ดีที่สุด

ดังนั้น ผมไม่ขอพูดถึง full-codegen เพราะมันไม่ค่อยมีอะไรในกอไผ่ซักเท่าไหร่ (เท่าที่ผมรู้ตอนนี้นะ)

แต่ผมจะมา โฟกัส จีระกุล ที่ Crankshaft !!

มันใช้หลายวิธี เพื่อจะ Optimize ครับ วิธีแรกคือ

Inlining — วิธีนี้คือ มันจะก๊อบเอาเนื้อของฟังก์ชัน มาแปะแทนที่ฟังก์ชันคอลเลอร์เลย เช่น

Aaa(); <- มันจะไปเอาเนื้อของฟังก์ชั่น Aaa มาแปะไว้ตรงนี้เลย
...
Bbb(); <- เอาเนื้อของฟังก์ชั่น Bbb มาแปะไว้ตรงนี้ด้วย

อันนี้ก็เพื่อประหยัดเวลา และเสบียงในการสร้าง Stack Frame เวลาที่เราไปเรียกฟังก์ชัน (ใครงงตรงนี้ อย่างงนะครับ — เหมือนที่คุณครูพูดกับเราสมัยมัธยม ไม่ได้ช่วยให้เข้าใจขึ้นเลยครับคุณครู)

วิธีต่อไปคือ Hidden class …

ห๊าวววว ยาวเกินไปแล้วสำหรับบล๊อคนี้
และก็ดึกแล้วด้วย ผมขออนุญาติออกไปสัมผัมลมหนาวของกทม. ที่มีน้อยกว่าแบคทีเรียมีประโยชน์ในลำไส้เล็กส่วนบน ของผมซะอีก (อ้าาา พูดถึงเรื่องนี้ เดี๋ยวพอจบเรื่อง V8 ผมเอามาเล่าให้ฟังดีกว่า อิอิ ผมจะเล่าให้เห็นภาพชัดๆเลย)

ครั้งหน้า มาต่อเรื่อง Crankshaft: Hidden Class เด้อ ค่ะเด้ออออ

ปล. JS Pipeline part 2 จะมาในอีกเร็วๆนี้ !
(ภายในวันที่ 2017–11–06)(เพื่อเตือนตัวเอง)(และให้คนอื่นเตือน)

มาแล้ววว ! คลิกเฮีย