WebAssembly คืออะไรและรีแอ็กต์เกี่ยวข้องอย่างไร

WebAssembly (WASM) คือรูปแบบคำสั่งไบนารีที่ออกแบบมาให้ทำงานในเบราว์เซอร์ด้วยความเร็วใกล้เคียงเนทีฟ ต่างจาก JavaScript ซึ่งเป็นภาษาระดับสูงที่ทำงานด้วยการตีความ WASM เป็นไบต์โค้ดระดับต่ำที่เอนจิน JavaScript ของเบราว์เซอร์จะคอมไพล์และประมวลผลโดยมีค่าใช้จ่ายแฝงน้อยที่สุด จึงให้ประสิทธิภาพที่อยู่ภายในช่วง 10–20% ของโค้ดเนทีฟ

WebAssembly ไม่ใช่ภาษาการเขียนโปรแกรมที่คุณเขียนโดยตรง แต่เป็นเป้าหมายการคอมไพล์ ภาษาต่าง ๆ เช่น Rust, C, C++ และ Go สามารถคอมไพล์เป็นไบต์โค้ด WASM ได้โดยใช้ชุดเครื่องมือของภาษานั้น ๆ คุณเขียนด้วยภาษาสำหรับระบบ จากนั้นคอมไพล์เป็น WASM และส่งโมดูลไบนารีไปยังเบราว์เซอร์

WASM ทำงานภายในเครื่องเสมือนแบบแซนด์บ็อกซ์ในเบราว์เซอร์ โดยมีข้อจำกัดด้านความปลอดภัยเช่นเดียวกับ JavaScript WASM ไม่สามารถเข้าถึง DOM เครือข่าย หรือระบบไฟล์ได้โดยตรง การเข้าถึงทั้งหมดต้องดำเนินการผ่านการเชื่อมโยงกับ JavaScript การทำแซนด์บ็อกซ์นี้ช่วยให้มั่นใจได้ว่าแม้แต่โค้ดที่ทำงานด้วยความเร็วระดับเนทีฟก็ไม่สามารถหลีกเลี่ยงนโยบายความปลอดภัยของเบราว์เซอร์ได้

WASM และ JavaScript ออกแบบมาให้ทำงานร่วมกัน ไม่ใช่เพื่อแทนที่กัน JavaScript เหมาะกับการประสานงาน การจัดการ DOM การจัดการเหตุการณ์ และการเรียกใช้ส่วนติดต่อของเบราว์เซอร์ ส่วน WASM เหมาะกับอัลกอริทึมที่ต้องใช้การคำนวณอย่างหนัก รูปแบบมาตรฐานคือ JavaScript ประสานงานแอปพลิเคชัน ขณะที่ WASM จัดการการคำนวณที่หนักหน่วง

WASM ใช้แบบจำลองหน่วยความจำเชิงเส้น ซึ่งเป็นบล็อกไบต์ต่อเนื่องที่แสดงด้วย ArrayBuffer ของ JavaScript ทั้ง WASM และ JavaScript สามารถอ่านและเขียนหน่วยความจำที่ใช้ร่วมกันนี้ได้ การส่งข้อมูลขนาดใหญ่ระหว่าง JavaScript กับ WASM ทำได้โดยเขียนข้อมูลลงในบัฟเฟอร์ที่ใช้ร่วมกันและอ่านข้อมูลจากบัฟเฟอร์นั้น จึงหลีกเลี่ยงค่าใช้จ่ายสูงจากการทำอนุกรมข้อมูล

React จัดการชั้นส่วนติดต่อผู้ใช้ ได้แก่ การแสดงผล การจัดการสถานะ และการโต้ตอบของผู้ใช้ ส่วน WASM จัดการการคำนวณที่ React ไม่สามารถทำได้อย่างมีประสิทธิภาพใน JavaScript React เรียกใช้ฟังก์ชัน WASM จากตัวจัดการเหตุการณ์หรือเอฟเฟกต์ รับผลลัพธ์ แล้วอัปเดตสถานะเพื่อกระตุ้นให้แสดงผลใหม่ React คือชั้นการนำเสนอ ส่วน WASM คือเอนจินการคำนวณ

WASM เหมาะสำหรับแอปพลิเคชัน React ที่ต้องการการประมวลผลรูปภาพหรือวิดีโอ (การจัดการพิกเซล) การสังเคราะห์และประมวลผลเสียง การดำเนินการเข้ารหัสลับ (การทำแฮช การเข้ารหัส) การจำลองฟิสิกส์ ตรรกะของเกม การบีบอัดและคลายการบีบอัด และการค้นหาข้อความในข้อมูลขนาดใหญ่ งานเหล่านี้ล้วนเป็นงานที่ประสิทธิภาพของ JavaScript ไม่เพียงพออย่างเห็นได้ชัด

WASM ให้ความเร็วใกล้เคียงเนทีฟสำหรับการคำนวณที่ใช้ CPU เป็นหลัก เนื่องจากคอมไพเลอร์ JIT ของเบราว์เซอร์จะแปลง WASM เป็นโค้ดเครื่อง โดยแทบไม่ต้องปรับแต่งเพิ่มเติม อย่างไรก็ตาม การข้ามขอบเขตระหว่าง JavaScript กับ WASM (การเรียกฟังก์ชัน WASM จาก JS หรือในทางกลับกัน) มีค่าใช้จ่ายแฝง ควรลดการข้ามขอบเขตด้วยการรวมการดำเนินการกับข้อมูลเป็นชุดภายใน WASM

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

WebAssembly ได้รับการรองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด ได้แก่ Chrome, Firefox, Safari และ Edge ตั้งแต่ปี 2017 ข้อมูลจำเพาะ WASM พื้นฐานได้รับการรองรับเกือบทั่วถึง ส่วนส่วนขยายรุ่นใหม่ เช่น เธรดที่ใช้ SharedArrayBuffer, SIMD สำหรับการดำเนินการแบบเวกเตอร์ และการเก็บคืนหน่วยความจำสำหรับภาษาที่มีการจัดการหน่วยความจำ มีระดับการรองรับแตกต่างกันไป แต่กำลังได้รับการทำให้เป็นมาตรฐานและนำมาใช้งานเพิ่มขึ้นอย่างต่อเนื่อง

ระบบนิเวศ WASM กำลังเติบโตอย่างรวดเร็ว ตัวอย่างการใช้งานจริงที่โดดเด่น ได้แก่ Figma (เอนจินการแสดงผล), Google Earth (ลูกโลกสามมิติ), Adobe Photoshop Web (การประมวลผลรูปภาพ), AutoCAD Web (การแสดงผล CAD) และไลบรารีการเข้ารหัสลับอีกมากมาย โดยทั่วไปแอปพลิเคชัน React จะใช้ WASM กับส่วนที่ต้องใช้การคำนวณอย่างหนักในหมวดหมู่เดียวกันนี้

WebAssembly ทำงานในเบราว์เซอร์อย่างไร

WebAssembly เป็นเป้าหมายการคอมไพล์แบบไบนารี (ไม่ใช่ภาษา) สำหรับ Rust, C, C++ และ Go ซึ่งทำงานด้วยความเร็วใกล้เคียงเนทีฟภายใน VM แบบแซนด์บ็อกซ์ของเบราว์เซอร์ WASM และ JavaScript ทำงานเสริมกัน โดย JS ทำหน้าที่ประสานงาน ส่วน WASM ทำหน้าที่คำนวณ บทบาทของ React คือชั้นส่วนติดต่อผู้ใช้ที่เรียกใช้ WASM สำหรับการคำนวณที่หนักหน่วง ควรใช้ WASM กับการประมวลผลรูปภาพ การเข้ารหัสลับ ฟิสิกส์ เสียง และการค้นหาข้อมูลขนาดใหญ่ ลดการข้ามขอบเขตระหว่าง JS กับ WASM ด้วยการรวมการดำเนินการเป็นชุดภายใน WASM