WebAssembly คืออะไรและมาจากไหน

Thomas Steiner

ตั้งแต่เว็บกลายเป็นแพลตฟอร์มที่ไม่เพียงสำหรับเอกสารแต่สำหรับแอปพลิเคชันด้วย แอปพลิเคชันขั้นสูงสุดบางตัวได้ผลักดันเว็บเบราว์เซอร์ให้ถึงขีดสุด แนวทางที่จะ "ใกล้ชิดกับเมทัลมากขึ้น" โดยการเผชิญหน้ากับภาษาในระดับต่ำกว่าเพื่อปรับปรุงประสิทธิภาพนั้นพบในหลายๆ ภาษาในระดับที่สูงกว่า ตัวอย่างเช่น Java มี Java Native Interface สำหรับ JavaScript ภาษาระดับล่างนี้คือ WebAssembly ในบทความนี้ คุณจะได้ทราบว่าภาษาของ Assembly คืออะไรและเหตุใดจึงมีประโยชน์บนเว็บ จากนั้นดูว่า WebAssembly สร้างขึ้นผ่านโซลูชันชั่วคราวของ asm.js

ภาษา Assembly

คุณเคยเขียนโปรแกรมในภาษา Assembly ไหม ในการเขียนโปรแกรมคอมพิวเตอร์ ภาษา Assembly หรือที่มักเรียกกันสั้นๆ ว่า Assembly และมักเรียกสั้นๆ ว่า ASM หรือ asm คือภาษาโปรแกรมระดับต่ำใดๆ ที่มีการโต้ตอบกันอย่างมากระหว่างคำสั่งในภาษาและคำสั่งโค้ดเครื่องของสถาปัตยกรรม

ตัวอย่างเช่น เมื่อดูที่สถาปัตยกรรม Intel® 64 และ IA-32 (PDF) คำสั่งของ MUL (สำหรับ mul) จะทำการคูณแบบไม่ลงนามของโอเปอแรนด์แรก (ตัวถูกดำเนินการปลายทาง) และตัวถูกดำเนินการที่ 2 (ตัวถูกดำเนินการต้นทาง) และจัดเก็บผลลัพธ์ไว้ในตัวถูกดำเนินการปลายทาง โดยอธิบายง่ายๆ ก็คือ ตัวถูกดำเนินการปลายทางคือตัวถูกดำเนินการโดยนัยที่อยู่ในรีจิสเตอร์ AX และตัวถูกดำเนินการต้นทางอยู่ในรีจิสเตอร์เอนกประสงค์ เช่น CX ระบบจะจัดเก็บผลลัพธ์อีกครั้งในการลงทะเบียน AX ลองดูตัวอย่างโค้ด x86 ต่อไปนี้

mov ax, 5  ; Set the value of register AX to 5.
mov cx, 10 ; Set the value of register CX to 10.
mul cx     ; Multiply the value of register AX (5)
           ; and the value of register CX (10), and
           ; store the result in register AX.

หากต้องการเปรียบเทียบ หากเป็นงานที่มีวัตถุประสงค์ในการคูณ 5 กับ 10 คุณอาจเขียนโค้ดให้เหมือนกับโค้ดต่อไปนี้ใน JavaScript

const factor1 = 5;
const factor2 = 10;
const result = factor1 * factor2;

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

โค้ด x86 จะขึ้นอยู่กับสถาปัตยกรรม x86 ซึ่งตามชื่อที่บอก จะต้องทำอย่างไรหากมีวิธีเขียนโค้ดการประกอบที่ไม่ได้ขึ้นอยู่กับสถาปัตยกรรมที่เฉพาะเจาะจง แต่จะได้ประโยชน์จากประสิทธิภาพของการประกอบ

asm.js

ขั้นตอนแรกในการเขียนโค้ดแอสเซมบลีที่ไม่มีทรัพยากร Dependency ทางสถาปัตยกรรมคือ asm.js ซึ่งเป็นชุดย่อยของ JavaScript ที่เข้มงวดซึ่งสามารถใช้เป็นภาษาเป้าหมายระดับต่ำและมีประสิทธิภาพสำหรับคอมไพเลอร์ ภาษาย่อยนี้อธิบายอย่างมีประสิทธิภาพเกี่ยวกับเครื่องเสมือนที่ทำแซนด์บ็อกซ์สำหรับภาษาที่ไม่มีหน่วยความจำมาก เช่น C หรือ C++ การผสมผสานการตรวจสอบความถูกต้องแบบคงที่และแบบไดนามิกช่วยให้เครื่องมือ JavaScript ใช้กลยุทธ์การคอมไพล์แบบเพิ่มประสิทธิภาพล่วงหน้า (AOT) สำหรับโค้ด asm.js ที่ถูกต้องได้ โค้ดที่เขียนด้วยภาษาที่พิมพ์แบบคงที่ซึ่งมีการจัดการหน่วยความจำด้วยตนเอง (เช่น C) ได้รับการแปลโดยคอมไพเลอร์ต้นทางถึงแหล่งที่มา เช่น early Emscripten (อิงตาม LLVM)

เพิ่มประสิทธิภาพการทำงานโดยจำกัดฟีเจอร์ทางภาษาให้มีความสอดคล้องกับ AOT Firefox 22 เป็นเบราว์เซอร์แรกที่รองรับ asm.js ซึ่งเปิดตัวภายใต้ชื่อ OdinMonkey Chrome เพิ่มการรองรับ asm.js ในเวอร์ชัน 61 ในขณะที่ asm.js ยังคงใช้งานได้ในเบราว์เซอร์ แต่ก็มี WebAssembly มาแทนที่แล้ว เหตุผลที่ควรใช้ asm.js ในขั้นตอนนี้เป็นทางเลือกสำหรับเบราว์เซอร์ที่ไม่รองรับ WebAssembly

WebAssembly

WebAssembly เป็นภาษาที่มีลักษณะคล้าย Assembly ในระดับต่ำโดยมีรูปแบบไบนารีขนาดกะทัดรัดที่ทำงานได้ในระดับเกือบดั้งเดิม และให้บริการภาษาอย่างเช่น C/C++ และ Rust และอีกหลายๆ ภาษาที่มีเป้าหมายการรวบรวมเพื่อให้ทำงานบนเว็บได้ เรากำลังรองรับภาษาที่มีการจัดการหน่วยความจำ เช่น Java และ Dart และน่าจะพร้อมให้บริการในเร็วๆ นี้ หรือพร้อมให้บริการแล้วอย่างเช่นในกรณีของ Kotlin/Wasm WebAssembly ได้รับการออกแบบมาให้ทำงานควบคู่ไปกับ JavaScript ซึ่งช่วยให้ทั้ง 2 อย่างทำงานร่วมกันได้

นอกเหนือจากเบราว์เซอร์แล้ว โปรแกรม WebAssembly ยังทํางานในรันไทม์อื่นๆ ได้ด้วย WASI ซึ่งเป็นอินเทอร์เฟซระบบแบบโมดูลสำหรับ WebAssembly WASI สร้างขึ้นเพื่อให้พกพาข้ามระบบปฏิบัติการต่างๆ ได้โดยมีวัตถุประสงค์เพื่อความปลอดภัยและความสามารถในการทำงานในสภาพแวดล้อมที่ใช้แซนด์บ็อกซ์

โค้ด WebAssembly (โค้ดไบนารีซึ่งก็คือไบต์โค้ด) มีจุดประสงค์เพื่อให้เรียกใช้ใน Virtual Stack Machine (VM) แบบพกพา โดยไบต์โค้ดได้รับการออกแบบมาให้แยกวิเคราะห์และเรียกใช้ได้เร็วกว่า JavaScript และมีการนำเสนอโค้ดกะทัดรัด

การดำเนินการตามเชิงแนวคิดจะมีการดำเนินการตามวิธีแบบตัวนับของโปรแกรมแบบดั้งเดิมที่ดำเนินการตามคำสั่ง ในทางปฏิบัติ เครื่องมือ Wasm ส่วนใหญ่จะคอมไพล์ไบต์โค้ด Wasm ลงในโค้ดเครื่องแล้วจึงเรียกใช้สิ่งนั้น วิธีการแบ่งออกเป็น 2 หมวดหมู่ดังนี้

  • คำสั่งการควบคุมที่สร้างตัวควบคุมจะสร้างค่าอาร์กิวเมนต์ขึ้นมาจากสแต็ก อาจเปลี่ยนตัวนับโปรแกรม และพุชค่าผลลัพธ์ไปยังสแต็ก
  • วิธีการง่ายๆ ที่เพิ่มค่าอาร์กิวเมนต์จากสแต็ก ใช้โอเปอเรเตอร์กับค่า จากนั้นพุชค่าผลลัพธ์ลงในสแต็ก ตามด้วยความก้าวหน้าของตัวนับโปรแกรมโดยปริยาย

ย้อนกลับไปที่ตัวอย่างก่อนหน้านี้ โค้ด WebAssembly ต่อไปนี้จะเทียบเท่ากับรหัส x86 ตั้งแต่ต้นบทความ

i32.const 5  ; Push the integer value 5 onto the stack.
i32.const 10 ; Push the integer value 10 onto the stack.
i32.mul      ; Pop the two most recent items on the stack,
             ; multiply them, and push the result onto the stack.

ขณะที่ใช้งาน asm.js ทั้งหมดในซอฟต์แวร์ กล่าวคือ โค้ดของ Asm.js สามารถทำงานในเครื่องมือ JavaScript ใดก็ได้ (แม้จะไม่ได้เพิ่มประสิทธิภาพ) แต่ WebAssembly ต้องการฟังก์ชันใหม่ที่ผู้ให้บริการเบราว์เซอร์ทั้งหมดตกลงกันไว้ WebAssembly เป็นคำแนะนำของ W3C เมื่อวันที่ 5 ธันวาคม 2019 ซึ่งประกาศเมื่อปี 2015 และเปิดตัวครั้งแรกในเดือนมีนาคม 2017 W3C รักษามาตรฐานไว้ได้ด้วยการสนับสนุนจากผู้ให้บริการเบราว์เซอร์รายใหญ่ทั้งหมดและผู้ที่มีความสนใจรายอื่นๆ ตั้งแต่ปี 2017 เป็นต้นมา การรองรับเบราว์เซอร์เป็นสากล

WebAssembly มีการแสดงแทน 2 แบบ ได้แก่ แบบข้อความและไบนารี สิ่งที่คุณเห็นด้านบนคือการนำเสนอแบบข้อความ

การนำเสนอแบบข้อความ

การแสดงข้อความจะอิงตาม S-expression และมักใช้นามสกุลไฟล์ .wat (สำหรับรูปแบบ TWeb) หากต้องการดำเนินการจริงๆ คุณสามารถเขียนข้อมูลด้วยตนเองได้ การดูตัวอย่างการคูณข้างต้นและทำให้มีประโยชน์มากขึ้นด้วยการไม่ฮาร์ดโค้ดปัจจัยอีกต่อไป คุณน่าจะพอจะเข้าใจโค้ดต่อไปนี้

(module
  (func $mul (param $factor1 i32) (param $factor2 i32) (result i32)
    local.get $factor1
    local.get $factor2
    i32.mul)
  (export "mul" (func $mul))
)

การแทนแบบไบนารี

รูปแบบไบนารีที่ใช้นามสกุลไฟล์ .wasm ไม่ได้มีไว้เพื่อการใช้งานของมนุษย์ ไม่รวมถึงการสร้างมนุษย์ด้วย โดยใช้เครื่องมืออย่าง wat2wasm เพื่อแปลงโค้ดด้านบนเป็นไบนารีต่อไปนี้ (ปกติความคิดเห็นไม่ได้เป็นส่วนหนึ่งของการแสดงแบบไบนารี แต่เพิ่มโดยเครื่องมือ wat2wasm เพื่อความเข้าใจที่ดียิ่งขึ้น)

0000000: 0061 736d                             ; WASM_BINARY_MAGIC
0000004: 0100 0000                             ; WASM_BINARY_VERSION
; section "Type" (1)
0000008: 01                                    ; section code
0000009: 00                                    ; section size (guess)
000000a: 01                                    ; num types
; func type 0
000000b: 60                                    ; func
000000c: 02                                    ; num params
000000d: 7f                                    ; i32
000000e: 7f                                    ; i32
000000f: 01                                    ; num results
0000010: 7f                                    ; i32
0000009: 07                                    ; FIXUP section size
; section "Function" (3)
0000011: 03                                    ; section code
0000012: 00                                    ; section size (guess)
0000013: 01                                    ; num functions
0000014: 00                                    ; function 0 signature index
0000012: 02                                    ; FIXUP section size
; section "Export" (7)
0000015: 07                                    ; section code
0000016: 00                                    ; section size (guess)
0000017: 01                                    ; num exports
0000018: 03                                    ; string length
0000019: 6d75 6c                          mul  ; export name
000001c: 00                                    ; export kind
000001d: 00                                    ; export func index
0000016: 07                                    ; FIXUP section size
; section "Code" (10)
000001e: 0a                                    ; section code
000001f: 00                                    ; section size (guess)
0000020: 01                                    ; num functions
; function body 0
0000021: 00                                    ; func body size (guess)
0000022: 00                                    ; local decl count
0000023: 20                                    ; local.get
0000024: 00                                    ; local index
0000025: 20                                    ; local.get
0000026: 01                                    ; local index
0000027: 6c                                    ; i32.mul
0000028: 0b                                    ; end
0000021: 07                                    ; FIXUP func body size
000001f: 09                                    ; FIXUP section size
; section "name"
0000029: 00                                    ; section code
000002a: 00                                    ; section size (guess)
000002b: 04                                    ; string length
000002c: 6e61 6d65                       name  ; custom section name
0000030: 01                                    ; name subsection type
0000031: 00                                    ; subsection size (guess)
0000032: 01                                    ; num names
0000033: 00                                    ; elem index
0000034: 03                                    ; string length
0000035: 6d75 6c                          mul  ; elem name 0
0000031: 06                                    ; FIXUP subsection size
0000038: 02                                    ; local name type
0000039: 00                                    ; subsection size (guess)
000003a: 01                                    ; num functions
000003b: 00                                    ; function index
000003c: 02                                    ; num locals
000003d: 00                                    ; local index
000003e: 07                                    ; string length
000003f: 6661 6374 6f72 31            factor1  ; local name 0
0000046: 01                                    ; local index
0000047: 07                                    ; string length
0000048: 6661 6374 6f72 32            factor2  ; local name 1
0000039: 15                                    ; FIXUP subsection size
000002a: 24                                    ; FIXUP section size

กำลังคอมไพล์ไปยัง WebAssembly

จะเห็นได้ว่าทั้ง .wat และ .wasm ไม่เหมาะกับมนุษย์มากนัก ซึ่งเป็นเวลาที่คอมไพเลอร์อย่าง Emscripten จะเข้ามามีบทบาท คุณสามารถคอมไพล์จากภาษาระดับสูงกว่า เช่น C และ C++ ได้ นอกจากนี้ยังมีคอมไพเลอร์สำหรับภาษาอื่นๆ เช่น Rust และอื่นๆ อีกมากมาย ลองพิจารณาโค้ด C ต่อไปนี้:

#include <stdio.h>

int main() {
  printf("Hello World\n");
  return 0;
}

โดยปกติ คุณจะคอมไพล์โปรแกรม C นี้ด้วยคอมไพเลอร์ gcc

$ gcc hello.c -o hello

เมื่อติดตั้ง Emscripten แล้ว คุณจะคอมไพล์ไปยัง WebAssembly โดยใช้คำสั่ง emcc และอาร์กิวเมนต์เกือบทั้งหมดที่เหมือนกัน

$ emcc hello.c -o hello.html

การดำเนินการนี้จะสร้างไฟล์ hello.wasm และไฟล์ HTML Wrapper hello.html เมื่อแสดงไฟล์ hello.html จากเว็บเซิร์ฟเวอร์ คุณจะเห็น "Hello World" ที่พิมพ์ไปยังคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ

นอกจากนี้ยังมีวิธีคอมไพล์ไปยัง WebAssembly โดยไม่มี Wrapper ของ HTML ดังนี้

$ emcc hello.c -o hello.js

การดำเนินการนี้จะสร้างไฟล์ hello.wasm เหมือนก่อนหน้านี้ แต่คราวนี้จะเป็นไฟล์ hello.js แทนที่จะเป็น Wrapper HTML หากต้องการทดสอบ ให้คุณเรียกใช้ไฟล์ JavaScript hello.js ที่ได้มาด้วย เช่น Node.js:

$ node hello.js
Hello World

ดูข้อมูลเพิ่มเติม

บทแนะนำสั้นๆ เกี่ยวกับ WebAssembly นี้เป็นเพียงจุดเริ่มต้นเท่านั้น ดูข้อมูลเพิ่มเติมเกี่ยวกับ WebAssembly ในเอกสารประกอบของ WebAssembly เกี่ยวกับ MDN และดูเอกสารประกอบเกี่ยวกับ Emscripten จริงๆ แล้ว การทำงานกับ WebAssembly อาจฟังดูเข้าท่าเหมือนวิธีวาดมีมรูปฮุก โดยเฉพาะอย่างยิ่งเนื่องจากนักพัฒนาเว็บที่คุ้นเคยกับ HTML, CSS และ JavaScript ไม่จำเป็นต้องมีความเชี่ยวชาญเรื่องภาษาสำหรับโปรแกรมคอมไพล์ เช่น C โชคดีที่มีช่องทางอย่างแท็ก webassembly ของ StackOverflow ซึ่งผู้เชี่ยวชาญมักจะยินดีให้ความช่วยเหลือหากคุณถามอย่างสุภาพ

กิตติกรรมประกาศ

บทความนี้ได้รับการตรวจสอบโดย Jakob Kummerow, Derek Schuff และ Rachel Andrew