WebAssembly Threads พร้อมให้ลองใช้ใน Chrome 70 แล้ว

เราจัดส่งการรองรับชุดข้อความ WebAssembly ใน Chrome 70 แล้วภายใต้ช่วงทดลองใช้จากต้นทาง

Alex Danilo

WebAssembly (Wasm) ช่วยให้คอมไพล์โค้ดที่เขียนด้วย C++ และภาษาอื่นๆ เพื่อเรียกใช้ในเว็บได้ ฟีเจอร์ที่มีประโยชน์มากอย่างหนึ่งของแอปพลิเคชันเนทีฟคือความสามารถในการใช้เธรด ซึ่งเป็นพื้นฐานสําหรับการคํานวณแบบขนาน C มากที่สุด และนักพัฒนา C++ จะคุ้นเคยกับ pthreads ซึ่งเป็น API มาตรฐานสำหรับการจัดการเทรดในแอปพลิเคชัน

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

เวอร์ชัน Chrome 70 รองรับเธรดสำหรับ WebAssembly และเราขอแนะนำให้นักพัฒนาซอฟต์แวร์เริ่มใช้งานและส่งความคิดเห็นให้เรา

ชุดข้อความ แล้วผู้ปฏิบัติงานล่ะ

เบราว์เซอร์รองรับการทำงานแบบขนานผ่าน Web Worker มาตั้งแต่ปี 2012 ใน Chrome 4 และคุณอาจได้ยินคําว่า "ในเธรดหลัก" ฯลฯ อยู่บ่อยครั้ง แต่ Web Worker จะไม่แชร์ข้อมูลที่เปลี่ยนแปลงได้ระหว่างกัน แต่จะอาศัยการส่งข้อความเพื่อสื่อสารแทน ที่จริงแล้ว Chrome จัดสรรเครื่องมือ V8 ใหม่ สำหรับแต่ละโดเมน (เรียกว่า แยกต่างหาก) Isolates ไม่ได้ใช้ทั้งโค้ดที่คอมไพล์แล้วหรือ ออบเจ็กต์ JavaScript จึงไม่สามารถแชร์ข้อมูลที่เปลี่ยนแปลงได้ เช่น pthreads

ส่วนเธรด WebAssembly นั้นคือเธรดที่แชร์หน่วยความจำ Wasm เดียวกันได้ พื้นที่เก็บข้อมูลพื้นฐานของหน่วยความจําที่ใช้ร่วมกันจะทํางานได้โดยใช้ SharedArrayBuffer ซึ่งเป็นพรอมต์เนทีฟของ JavaScript ที่อนุญาตให้แชร์เนื้อหา ArrayBuffer รายการเดียวระหว่างผู้ทํางานพร้อมกัน แต่ละเธรด WebAssembly จะทำงานใน Web Worker แต่หน่วยความจำ Wasm ที่แชร์ช่วยให้เธรดทำงานได้เหมือนกับที่ทำงานบนแพลตฟอร์มเนทีฟ ซึ่งหมายความว่าแอปพลิเคชันที่ใช้เธรด Wasm จะมีหน้าที่รับผิดชอบในการจัดการการเข้าถึงหน่วยความจำที่แชร์ เช่นเดียวกับแอปพลิเคชันเธรดแบบดั้งเดิม มีไลบรารีโค้ดจำนวนมากที่เขียนด้วยภาษา C หรือ C++ อยู่ ที่ใช้ pthread และสามารถคอมไพล์เป็น Wasm และทำงานจริงได้ โหมดเทรดทำให้แกนอื่นๆ ทำงานกับข้อมูลเดียวกันพร้อมกันได้

ตัวอย่างง่ายๆ

ต่อไปนี้คือตัวอย่างโปรแกรม "C" แบบง่ายที่ใช้เธรด

#include <pthread.h>
#include <stdio.h>

// Calculate Fibonacci numbers shared function
int fibonacci(int iterations) {
    int     val = 1;
    int     last = 0;

    if (iterations == 0) {
        return 0;
    }
    for (int i = 1; i < iterations; i++) {
        int     seq;

        seq = val + last;
        last = val;
        val = seq;
    }
    return val;
}
// Start function for the background thread
void *bg_func(void *arg) {
    int     *iter = (void *)arg;

    *iter = fibonacci(*iter);
    return arg;
}
// Foreground thread and main entry point
int main(int argc, char *argv[]) {
    int         fg_val = 54;
    int         bg_val = 42;
    pthread_t   bg_thread;

    // Create the background thread
    if (pthread_create(&bg_thread, NULL, bg_func, &bg_val)) {
        perror("Thread create failed");
        return 1;
    }
    // Calculate on the foreground thread
    fg_val = fibonacci(fg_val);
    // Wait for background thread to finish
    if (pthread_join(bg_thread, NULL)) {
        perror("Thread join failed");
        return 2;
    }
    // Show the result from background and foreground threads
    printf("Fib(42) is %d, Fib(6 * 9) is %d\n", bg_val, fg_val);

    return 0;
}

โค้ดดังกล่าวขึ้นต้นด้วยฟังก์ชัน main() ซึ่งประกาศตัวแปร 2 รายการ ได้แก่ fg_val และ bg_val นอกจากนี้ยังมีฟังก์ชันที่ชื่อ fibonacci() ซึ่งทั้ง 2 เทรดเวิร์ดในตัวอย่างนี้จะเรียกใช้ ฟังก์ชัน main() สร้างชุดข้อความเบื้องหลังโดยใช้ pthread_create() ซึ่งมีงานสำหรับการคำนวณค่าลำดับเลขฟีโบนักชีที่สอดคล้องกับ ค่าของตัวแปร bg_val ในขณะเดียวกัน ฟังก์ชัน main() กำลังทำงานในชุดข้อความเบื้องหน้า คำนวณสำหรับตัวแปร fg_val เมื่อเธรดแบ็กกราวด์ทำงานเสร็จแล้ว ระบบจะพิมพ์ผลลัพธ์

คอมไพล์สำหรับการสนับสนุนชุดข้อความ

ก่อนอื่น คุณควรติดตั้ง emscripten SDK โดยควรเป็นเวอร์ชัน 1.38.11 ขึ้นไป หากต้องการสร้างโค้ดตัวอย่างโดยเปิดใช้เธรดเพื่อเรียกใช้ในเบราว์เซอร์ เราต้องส่ง Flag เพิ่มเติม 2-3 รายการไปยังคอมไพเลอร์ emcc ของ emscripten บรรทัดคำสั่งมีลักษณะดังนี้

emcc -O2 -s USE_PTHREADS=1 -s PTHREAD_POOL_SIZE=2 -o test.js test.c

อาร์กิวเมนต์บรรทัดคำสั่ง "-s USE_PTHREADS=1" จะเปิดการรองรับการแยกเธรดสำหรับข้อบังคับ WebAssembly ที่คอมไพล์แล้ว และอาร์กิวเมนต์ "-s PTHREAD_POOL_SIZE=2" จะบอกคอมไพเลอร์ให้สร้างพูลเธรด 2 รายการ

เมื่อเรียกใช้โปรแกรม ระบบจะโหลดโมดูล WebAssembly ไว้ภายใน สร้าง Web Worker สำหรับเทรดแต่ละรายการใน Thread Pool และแชร์โมดูล กับผู้ปฏิบัติงานแต่ละคน ซึ่งในกรณีนี้คือ 2 และจะใช้เมื่อ โทรหา pthread_create() แล้ว แต่ละผู้ปฏิบัติงานจะสร้างอินสแตนซ์ของข้อบังคับ Wasm ด้วยหน่วยความจำเดียวกัน ซึ่งช่วยให้ผู้ปฏิบัติงานเหล่านั้นทํางานร่วมกันได้ V8 ใหม่ล่าสุด การเปลี่ยนแปลงใน 7.0 จะแชร์โค้ดดั้งเดิมของโมดูล Wasm ที่คอมไพล์ซึ่งส่งผ่านแล้ว ระหว่างผู้ปฏิบัติงาน ซึ่งช่วยให้แอปพลิเคชันขนาดใหญ่ สามารถปรับขนาด ผู้ปฏิบัติงาน โปรดทราบว่าควรตรวจสอบว่าขนาด Thread Pool เท่ากับ จำนวนเทรดสูงสุดที่แอปพลิเคชันต้องการ หรือการสร้างชุดข้อความอาจล้มเหลว ในขณะเดียวกัน หากขนาดพูลเธรดใหญ่เกินไป คุณก็จะสร้าง Web Worker ที่ไม่จำเป็นซึ่งจะนั่งเฉยๆ โดยไม่ทำอะไรเลยนอกจากใช้หน่วยความจำ

วิธีทดลองใช้

วิธีที่เร็วที่สุดในการทดสอบโมดูล WebAssembly คือการเปิดการรองรับเธรด WebAssembly เวอร์ชันทดลองใน Chrome 70 ขึ้นไป ไปที่ URL about://flags ในเบราว์เซอร์ดังที่แสดงด้านล่าง

หน้า Flag ของ Chrome

ถัดไป ให้มองหาการตั้งค่าเทรด WebAssembly แบบทดลองซึ่งมีลักษณะดังนี้

การตั้งค่าเทรด WebAssembly

เปลี่ยนการตั้งค่าเป็นเปิดใช้ดังที่แสดงด้านล่าง แล้วรีสตาร์ทเบราว์เซอร์

เปิดใช้การตั้งค่าเทรด WebAssembly แล้ว

หลังจากเบราว์เซอร์รีสตาร์ทแล้ว เราจะลองโหลดโมดูล WebAssembly แบบใช้เธรดด้วยหน้า HTML แบบเรียบง่ายซึ่งมีเพียงเนื้อหานี้

<!DOCTYPE html>
<html>
  <title>Threads test</title>
  <body>
    <script src="test.js"></script>
  </body>
</html>

หากต้องการลองใช้หน้านี้ คุณจะต้องเรียกใช้เว็บเซิร์ฟเวอร์รูปแบบใดรูปแบบหนึ่งและโหลดจากเบราว์เซอร์ ซึ่งจะทําให้โมดูล WebAssembly โหลดและเรียกใช้ กำลังเปิด เครื่องมือสำหรับนักพัฒนาเว็บแสดงผลลัพธ์จากการเรียกใช้ และคุณควรเห็นผลลัพธ์ เช่น เอาต์พุตรูปภาพด้านล่างในคอนโซล:

เอาต์พุตคอนโซลจากโปรแกรมฟิโบนักชี

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

การทดสอบในพื้นที่ด้วยช่วงทดลองใช้จากต้นทาง

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

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

เราได้โฮสต์ตัวอย่างง่ายๆ ด้านบนโดยใช้โทเค็นทดลองใช้ต้นทางแล้ว คุณจึงลองใช้ด้วยตนเองได้โดยไม่ต้องสร้างอะไรเลย

ถ้าคุณต้องการดูว่า 4 ชุดข้อความที่ทำงานพร้อมกันสามารถทำอะไรได้บ้างสำหรับศิลปะ ASCII ให้ทำดังนี้ คุณต้องศึกษา ในการสาธิตนี้ด้วย

ให้ข้อเสนอแนะกับเรา

เทรด WebAssembly เป็นพื้นฐานใหม่ที่มีประโยชน์อย่างยิ่งสำหรับการพอร์ตแอปพลิเคชันไปยังเว็บ ตอนนี้คุณสามารถเรียกใช้แอปพลิเคชันและไลบรารี C และ C++ ที่ต้องอาศัยการรองรับ pthreads ในสภาพแวดล้อม WebAssembly ได้แล้ว

เราต้องการความคิดเห็นจากนักพัฒนาแอปที่ลองใช้ฟีเจอร์นี้ เนื่องจากความคิดเห็นดังกล่าวจะช่วยเรากำหนดกระบวนการมาตรฐานและตรวจสอบความมีประโยชน์ของฟีเจอร์ วิธีที่ดีที่สุดในการส่งความคิดเห็นคือการรายงานปัญหาและ/หรือมีส่วนร่วมในกระบวนการมาตรฐานในกลุ่มชุมชน WebAssembly