Thread WebAssembly siap dicoba di Chrome 70

Dukungan thread WebAssembly telah disertakan di Chrome 70 dalam uji coba origin.

Alex Danilo

WebAssembly (Wasm) memungkinkan kompilasi kode yang ditulis dalam C++ dan bahasa lain untuk dijalankan di web. Salah satu fitur yang sangat berguna dari aplikasi native adalah kemampuan menggunakan thread - yang merupakan primitif untuk komputasi paralel. Sebagian besar developer C dan C++ sudah tidak asing dengan pthreads yang merupakan API standar untuk pengelolaan thread dalam aplikasi.

WebAssembly Community Group telah berupaya menghadirkan thread ke web untuk memungkinkan aplikasi multi-thread yang sesungguhnya. Sebagai bagian dari upaya ini, V8 telah mengimplementasikan dukungan yang diperlukan untuk thread di mesin WebAssembly, yang tersedia melalui Uji Coba Origin. Dengan Uji Coba Origin, developer dapat bereksperimen dengan fitur web baru sebelum sepenuhnya distandarisasi. Hal ini memungkinkan kami mengumpulkan masukan nyata dari developer berani, yang sangat penting untuk memvalidasi dan meningkatkan fitur baru.

Rilis Chrome 70 mendukung thread untuk WebAssembly dan kami mendorong developer yang tertarik untuk mulai menggunakannya dan memberi kami masukan.

Rangkaian pesan? Bagaimana dengan Pekerja?

Browser telah mendukung paralelisme melalui Pekerja Web sejak 2012 di Chrome 4; fakta biasa mendengar istilah seperti 'di thread utama' dll. Namun, Pekerja Web tidak berbagi data yang dapat diubah di antara keduanya, melainkan mengandalkan penyampaian pesan untuk komunikasi. Bahkan, Chrome mengalokasikan mesin V8 baru untuk setiap platform (yang disebut isolasi). Isolasi tidak berbagi kode yang dikompilasi atau objek JavaScript, sehingga tidak dapat berbagi data yang dapat diubah seperti pthread.

Di sisi lain, thread WebAssembly adalah thread yang dapat berbagi memori Wasm yang sama. Penyimpanan yang mendasari dari memori bersama dilakukan dengan SharedArrayBuffer, primitif JavaScript yang memungkinkan berbagi satu konten ArrayBuffer secara bersamaan antar-pekerja. Setiap thread WebAssembly berjalan di Pekerja Web, tetapi memori Wasm yang dibagikan memungkinkannya bekerja seperti yang dilakukan di platform native. Artinya, aplikasi yang menggunakan thread Wasm bertanggung jawab untuk mengelola akses ke memori bersama seperti pada aplikasi thread tradisional. Ada banyak library kode yang ditulis dalam C atau C++ yang menggunakan pthreads, dan library tersebut dapat dikompilasi ke Wasm serta dijalankan dalam mode thread yang sebenarnya, sehingga memungkinkan lebih banyak core untuk menangani data yang sama secara bersamaan.

Contoh sederhana

Berikut adalah contoh program 'C' sederhana yang menggunakan thread.

#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;
}

Kode tersebut dimulai dengan fungsi main() yang mendeklarasikan 2 variabel fg_val dan bg_val. Ada juga fungsi yang disebut fibonacci(), yang akan dipanggil oleh kedua thread dalam contoh ini. Fungsi main() membuat thread latar belakang menggunakan pthread_create() yang tugasnya adalah menghitung nilai urutan angka fibonacci yang sesuai dengan nilai variabel bg_val. Sementara itu, fungsi main() yang berjalan di thread latar depan menghitungnya untuk variabel fg_val. Setelah thread latar belakang selesai berjalan, hasilnya akan dicetak.

Mengompilasi dukungan thread

Pertama, Anda harus menginstal emscripten SDK, sebaiknya versi 1.38.11 atau yang lebih baru. Untuk membuat kode contoh dengan thread yang diaktifkan untuk berjalan di browser, kita harus meneruskan beberapa flag tambahan ke compiler emscripten emcc. Command line kita akan terlihat seperti ini:

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

Argumen command line '-s USE_PTHREADS=1' mengaktifkan dukungan threading untuk modul WebAssembly yang dikompilasi, dan argumen '-s PTHREAD_POOL_SIZE=2' memberi tahu compiler untuk membuat kumpulan dua (2) thread.

Saat dijalankan, program akan memuat modul WebAssembly, membuat Web Worker untuk setiap thread dalam kumpulan thread, membagikan modul dengan setiap pekerja, dalam hal ini adalah 2, dan pekerja tersebut akan digunakan setiap kali panggilan ke pthread_create() dilakukan. Setiap pekerja membuat instance modul Wasm dengan memori yang sama, sehingga mereka dapat bekerja sama. Perubahan terbaru V8 pada versi 7.0 membagikan kode native modul Wasm yang dikompilasi dan diteruskan antar-pekerja, yang memungkinkan aplikasi yang sangat besar dapat diskalakan ke banyak pekerja. Perlu diperhatikan, sebaiknya pastikan ukuran kumpulan thread sama dengan jumlah maksimum thread yang diperlukan aplikasi Anda, atau pembuatan thread dapat gagal. Pada saat yang sama, jika ukuran kumpulan thread terlalu besar, Anda akan membuat Pekerja Web yang tidak diperlukan yang tidak akan melakukan apa-apa selain menggunakan memori.

Cara mencobanya

Cara tercepat untuk menguji modul WebAssembly adalah dengan mengaktifkan dukungan thread WebAssembly eksperimental di Chrome 70 dan seterusnya. Buka URL about://flags di browser Anda seperti yang ditunjukkan di bawah ini:

Halaman tanda Chrome

Selanjutnya, temukan setelan thread WebAssembly eksperimental yang terlihat seperti ini:

Setelan thread WebAssembly

Ubah setelan ke Enabled seperti yang ditunjukkan di bawah, lalu mulai ulang browser.

Setelan thread WebAssembly diaktifkan

Setelah browser dimulai ulang, kita dapat mencoba memuat modul WebAssembly thread dengan halaman HTML minimal, yang hanya berisi konten ini:

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

Untuk mencoba halaman ini, Anda harus menjalankan beberapa bentuk server web dan memuatnya dari browser Anda. Tindakan tersebut akan menyebabkan modul WebAssembly dimuat dan dijalankan. Membuka DevTools akan menampilkan output dari run, dan Anda akan melihat sesuatu seperti gambar output di bawah ini pada konsol:

Output konsol dari program fibonacci

Program WebAssembly dengan thread telah berhasil dijalankan. Sebaiknya coba aplikasi thread Anda sendiri menggunakan langkah-langkah yang diuraikan di atas.

Menguji di lapangan dengan Uji Coba Origin

Mencoba thread dengan mengaktifkan tanda eksperimental di browser tidak masalah untuk tujuan pengembangan, tetapi jika Anda ingin menguji aplikasi di kolom, Anda dapat melakukannya dengan apa yang dikenal sebagai uji coba origin.

Uji coba origin memungkinkan Anda mencoba fitur eksperimental bersama pengguna Anda dengan mendapatkan token pengujian yang terhubung ke domain Anda. Kemudian, Anda dapat men-deploy aplikasi dan mengharapkannya berfungsi di browser yang dapat mendukung fitur yang Anda uji (dalam hal ini Chrome 70 dan seterusnya). Untuk mendapatkan token Anda sendiri guna menjalankan uji coba origin, gunakan formulir aplikasi di sini.

Kami telah menghosting contoh sederhana di atas menggunakan token uji coba origin, sehingga Anda dapat mencobanya sendiri tanpa perlu mem-build apa pun.

Jika ingin mengetahui kemampuan dari 4 thread yang berjalan secara paralel untuk seni ASCII, Anda juga harus melihat demo ini.

Berikan masukan Anda

Thread WebAssembly adalah dasar baru yang sangat berguna untuk mentransfer aplikasi ke web. Sekarang Anda dapat menjalankan aplikasi serta library C dan C++ yang memerlukan dukungan pthreads di lingkungan WebAssembly.

Kami mencari masukan dari developer yang mencoba fitur ini karena akan membantu menentukan proses standardisasi serta memvalidasi kegunaannya. Cara terbaik untuk mengirim masukan adalah dengan melaporkan masalah dan/atau terlibat dalam proses standardisasi di WebAssembly Community Group.