Pengenalan kepada WebAssembly (WASM)-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Pengenalan kepada WebAssembly (WASM)

Barbara Streisand

Jan 11, 2025 am 07:26 AM

Introduction to WebAssembly (WASM)

WebAssembly (WASM) ialah format arahan binari untuk mesin maya berasaskan tindanan, direka bentuk sebagai sasaran mudah alih untuk aplikasi berprestasi tinggi. Dalam artikel ini, kami akan meneroka cara untuk menyusun atur cara C mudah ke WebAssembly, memuatkannya ke dalam penyemak imbas web dan berinteraksi dengannya menggunakan JavaScript. Kami juga akan meneroka beberapa alatan dan perintah yang berguna untuk bekerja dengan WASM di luar persekitaran kontena dev.

Menyediakan Persekitaran Pembangunan

Buat struktur folder dan fail yang diperlukan untuk projek WebAssembly anda.

Buat Folder Projek: Mulakan dengan mencipta direktori baharu untuk projek anda. Di dalam folder ini, anda akan menambah fail dan konfigurasi yang diperlukan.

   mkdir wasm-web-example
   cd wasm-web-example

Salin selepas log masuk

Sediakan Bekas Dev: Dalam direktori wasm-web-example, cipta folder .devcontainer untuk menyimpan fail konfigurasi bekas dev. Fail ini akan menyediakan bekas dengan Emscripten dipasang untuk menyusun kod C ke dalam WebAssembly.

Di dalam folder .devcontainer, cipta fail berikut:

devcontainer.json

Fail ini mengkonfigurasi VSCode untuk menggunakan bekas Docker dengan sambungan dan tetapan persekitaran yang diperlukan.

 {
   "name": "Emscripten DevContainer",
   "build": {
     "dockerfile": "Dockerfile"
   },
   "customizations": {
     "vscode": {
       "settings": {
         "terminal.integrated.shell.linux": "/bin/bash",
         "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools",
         "C_Cpp.default.intelliSenseMode": "gcc-x64"
       },
       "extensions": [
         "ms-vscode.cpptools",
         "ms-vscode.cmake-tools"
       ]
     }
   },
   "postCreateCommand": "emcc --version"
 }

Salin selepas log masuk

Fail Docker

Fail Docker akan menyediakan persekitaran Emscripten. Berikut ialah kandungan untuk fail itu:

 # Use the official Emscripten image
 FROM emscripten/emsdk:3.1.74

 # Set the working directory
 WORKDIR /workspace

 # Copy the source code into the container
 COPY . .

 # Install any additional packages if necessary (optional)
 # Ensure to clean up cache to minimize image size
 RUN apt-get update && \
     apt-get install -y build-essential && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*

Salin selepas log masuk

Buat Tetapan VSCode: Dalam akar projek anda, buat folder .vscode dengan fail berikut:

c_cpp_properties.json

Fail ini mengkonfigurasi C IntelliSense dan menyertakan laluan untuk projek anda.

 {
   "configurations": [
     {
       "name": "Linux",
       "includePath": [
         "${workspaceFolder}/**",
         "/emsdk/upstream/emscripten/system/include"
       ],
       "defines": [],
       "compilerPath": "/usr/bin/gcc",
       "cStandard": "c17",
       "cppStandard": "gnu++17",
       "configurationProvider": "ms-vscode.cmake-tools"
     }
   ],
   "version": 4
 }

Salin selepas log masuk

settings.json

Fail ini termasuk tetapan VSCode khusus untuk persatuan bahasa.

 {
   "files.associations": {
     "emscripten.h": "c"
   },
   "[javascript]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[typescript]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[jsonc]": {
     "editor.defaultFormatter": "vscode.json-language-features"
   },
   "[json]": {
     "editor.defaultFormatter": "vscode.json-language-features"
   },
   "[html]": {
     "editor.defaultFormatter": "vscode.html-language-features"
   }
 }

Salin selepas log masuk

Buat Fail C, JavaScript dan HTML: Sekarang, buat fail berikut untuk projek anda:

ujian.c

Fail C ini mengandungi fungsi mudah yang akan disusun ke WebAssembly.
```
 // test.c
 int add(int lhs, int rhs) {
     return lhs + rhs;
 }
```
Salin selepas log masuk

test.html

Fail HTML ini akan memuatkan modul WebAssembly menggunakan JavaScript.

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WebAssembly Example</title>
   </head>
   <body>
     <h1>WebAssembly Example</h1>
     <div>

</li>
<li>
<p><strong>test.js</strong><br><br>
 This JavaScript file will fetch the WebAssembly module and call the exported function.<br>
</p>
<pre class="brush:php;toolbar:false"> // test.js
 const wasmFile = 'test.wasm';

 fetch(wasmFile)
   .then(response => response.arrayBuffer())
   .then(bytes => WebAssembly.instantiate(bytes))
   .then(({ instance }) => {
     const result = instance.exports.add(5, 3); // Call the WebAssembly function
     document.getElementById('output').textContent = `Result from WebAssembly: ${result}`;
   })
   .catch(error => console.error('Error loading WebAssembly module:', error));

Salin selepas log masuk

Sekarang anda telah menyediakan semua fail dan konfigurasi yang diperlukan, anda boleh meneruskan untuk menyusun dan berinteraksi dengan WebAssembly.

Menyusun Kod C ke WebAssembly Menggunakan Emscripten

Program Asas C:

Ujian fail.c mengandungi penambahan fungsi mudah yang menambah dua integer. Kami akan menyusun fungsi C ini ke dalam WebAssembly menggunakan Emscripten.
Perintah Emscripten:

Di dalam bekas dev, buka terminal (gunakan cmd j dalam VSCode) dan jalankan perintah Emscripten berikut untuk menyusun kod C ke WebAssembly:

   mkdir wasm-web-example
   cd wasm-web-example

Salin selepas log masuk

Arahan ini akan menjana test.wasm, binari WebAssembly dan memastikan bahawa fungsi tambah dieksport untuk digunakan dalam JavaScript.

Memuatkan dan Berinteraksi dengan WebAssembly dalam Penyemak Imbas

Persediaan HTML:

File test.html mengandungi halaman HTML ringkas yang memuatkan binari WebAssembly menggunakan JavaScript.
Persediaan JavaScript:

Fail JavaScript test.js memuatkan fail test.wasm dan memanggil fungsi tambah yang dieksport:

Menggunakan Alat Luaran pada macOS

Di luar bekas dev, terdapat beberapa arahan berguna yang boleh anda jalankan untuk berfungsi dengan WebAssembly pada Mac anda.

Pasang wabt: wabt (WebAssembly Binary Toolkit) menyediakan utiliti untuk bekerja dengan WebAssembly, termasuk menukar fail .wasm kepada format WAT (WebAssembly Text) yang boleh dibaca manusia. Pasangnya melalui Homebrew:

 {
   "name": "Emscripten DevContainer",
   "build": {
     "dockerfile": "Dockerfile"
   },
   "customizations": {
     "vscode": {
       "settings": {
         "terminal.integrated.shell.linux": "/bin/bash",
         "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools",
         "C_Cpp.default.intelliSenseMode": "gcc-x64"
       },
       "extensions": [
         "ms-vscode.cpptools",
         "ms-vscode.cmake-tools"
       ]
     }
   },
   "postCreateCommand": "emcc --version"
 }

Salin selepas log masuk

Tukar WASM kepada WAT: Setelah wabt dipasang, anda boleh menggunakan alat wasm2wat untuk menukar binari WebAssembly anda (test.wasm) kepada format WAT:

 # Use the official Emscripten image
 FROM emscripten/emsdk:3.1.74

 # Set the working directory
 WORKDIR /workspace

 # Copy the source code into the container
 COPY . .

 # Install any additional packages if necessary (optional)
 # Ensure to clean up cache to minimize image size
 RUN apt-get update && \
     apt-get install -y build-essential && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*

Salin selepas log masuk

Layankan Halaman HTML: Untuk melihat halaman HTML yang berinteraksi dengan modul WebAssembly, anda boleh menggunakan pelayan HTTP mudah Python:

 {
   "configurations": [
     {
       "name": "Linux",
       "includePath": [
         "${workspaceFolder}/**",
         "/emsdk/upstream/emscripten/system/include"
       ],
       "defines": [],
       "compilerPath": "/usr/bin/gcc",
       "cStandard": "c17",
       "cppStandard": "gnu++17",
       "configurationProvider": "ms-vscode.cmake-tools"
     }
   ],
   "version": 4
 }

Salin selepas log masuk

Kesimpulan

Dengan mengikuti langkah ini, anda boleh menyediakan persekitaran pembangunan untuk menyusun kod C ke WebAssembly, berinteraksi dengannya menggunakan JavaScript dan menukar binari yang terhasil untuk pemeriksaan. Penggunaan alat luaran seperti wabt dan pelayan HTTP Python memudahkan pengurusan dan penerokaan modul WebAssembly pada sistem macOS.

Atas ialah kandungan terperinci Pengenalan kepada WebAssembly (WASM). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

4 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

4 minggu yang lalu By DDD

Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?

2 minggu yang lalu By DDD

Inzoi: Cara Memohon ke Sekolah dan Universiti

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7746

Tutorial Java

1643

Tutorial CakePHP

1397

Tutorial Laravel

1291

Tutorial PHP

1234

Tunjukkan Lagi

Related knowledge

Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apr 04, 2025 pm 02:42 PM

Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...

Demystifying JavaScript: Apa yang berlaku dan mengapa penting Apr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Siapa yang dibayar lebih banyak Python atau JavaScript? Apr 04, 2025 am 12:09 AM

Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.

Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Apr 04, 2025 pm 05:09 PM

Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...

Adakah JavaScript sukar belajar? Apr 03, 2025 am 12:20 AM

Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.

Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido? atau: Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Apr 04, 2025 pm 05:36 PM

Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...

Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Apr 04, 2025 pm 05:12 PM

Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...

Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan Apr 10, 2025 am 09:33 AM

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

See all articles