suchen
HeimWeb-Frontendjs-TutorialEinführung in WebAssembly (WASM)

Introduction to WebAssembly (WASM)

WebAssembly (WASM) ist ein binäres Befehlsformat für eine stapelbasierte virtuelle Maschine, die als tragbares Ziel für Hochleistungsanwendungen konzipiert ist. In diesem Artikel erfahren Sie, wie Sie ein einfaches C-Programm zu WebAssembly kompilieren, es in einen Webbrowser laden und mithilfe von JavaScript damit interagieren. Wir werden auch einige nützliche Tools und Befehle für die Arbeit mit WASM außerhalb der Entwicklungscontainerumgebung untersuchen.

Einrichten der Entwicklungsumgebung

Erstellen Sie die erforderliche Ordnerstruktur und Dateien für Ihr WebAssembly-Projekt.

  1. Projektordner erstellen: Erstellen Sie zunächst ein neues Verzeichnis für Ihr Projekt. In diesem Ordner fügen Sie die erforderlichen Dateien und Konfigurationen hinzu.
   mkdir wasm-web-example
   cd wasm-web-example
  1. Dev-Container einrichten: Erstellen Sie im Verzeichnis „wasm-web-example“ den Ordner „.devcontainer“, um die Konfigurationsdateien des Entwicklungscontainers zu speichern. Diese Dateien richten einen Container mit installiertem Emscripten ein, um C-Code in WebAssembly zu kompilieren.

Erstellen Sie im Ordner .devcontainer die folgenden Dateien:

  • devcontainer.json

    Diese Datei konfiguriert VSCode für die Verwendung des Docker-Containers mit den erforderlichen Erweiterungen und Umgebungseinstellungen.

     {
       "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"
     }
    
  • Docker-Datei

    Die Docker-Datei richtet die Emscripten-Umgebung ein. Hier ist der Inhalt dieser Datei:

     # 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/*
    
  1. VSCode-Einstellungen erstellen: Erstellen Sie im Stammverzeichnis Ihres Projekts einen .vscode-Ordner mit den folgenden Dateien:
  • c_cpp_properties.json

    Diese Datei konfiguriert C IntelliSense und enthält Pfade für Ihr Projekt.

     {
       "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
     }
    
  • settings.json

    Diese Datei enthält spezifische VSCode-Einstellungen für Sprachzuordnungen.

     {
       "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"
       }
     }
    
  1. C-, JavaScript- und HTML-Dateien erstellen: Erstellen Sie nun die folgenden Dateien für Ihr Projekt:
  • test.c

    Diese C-Datei enthält die einfache Funktion, die zu WebAssembly kompiliert wird.

     // test.c
     int add(int lhs, int rhs) {
         return lhs + rhs;
     }
    
  • test.html

    Diese HTML-Datei lädt das WebAssembly-Modul mithilfe von JavaScript.

     
     
       
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>WebAssembly Example</title>
       
       
         <h1 id="WebAssembly-Example">WebAssembly Example</h1>
         <div>
    
    
    <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));
    
  • Da Sie nun alle erforderlichen Dateien und Konfigurationen eingerichtet haben, können Sie mit dem Kompilieren und der Interaktion mit WebAssembly fortfahren.

    C-Code mit Emscripten zu WebAssembly kompilieren

    1. Grundlegendes C-Programm:

      Die Datei test.c enthält eine einfache Funktion add, die zwei Ganzzahlen addiert. Wir werden diese C-Funktion mit Emscripten in WebAssembly kompilieren.

    2. Emscripten-Befehl:

      Öffnen Sie im Entwicklungscontainer das Terminal (verwenden Sie cmd j in VSCode) und führen Sie den folgenden Emscripten-Befehl aus, um den C-Code in WebAssembly zu kompilieren:

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

    Dieser Befehl generiert test.wasm, die WebAssembly-Binärdatei, und stellt sicher, dass die Add-Funktion zur Verwendung in JavaScript exportiert wird.

    Laden und Interagieren mit WebAssembly im Browser

    1. HTML-Setup:

      Die Datei test.html enthält eine einfache HTML-Seite, die die WebAssembly-Binärdatei mithilfe von JavaScript lädt.

    2. JavaScript-Setup:

      Die JavaScript-Datei test.js lädt die Datei test.wasm und ruft die exportierte Add-Funktion auf:

    Verwenden externer Tools unter macOS

    Außerhalb des Entwicklungscontainers gibt es mehrere nützliche Befehle, die Sie ausführen können, um mit WebAssembly auf Ihrem Mac zu arbeiten.

    1. wabt installieren: wabt (WebAssembly Binary Toolkit) bietet Dienstprogramme für die Arbeit mit WebAssembly, einschließlich der Konvertierung von .wasm-Dateien in das für Menschen lesbare WAT-Format (WebAssembly Text). Installieren Sie es über 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"
     }
    
    1. WASM in WAT umwandeln: Sobald wabt installiert ist, können Sie das Tool wasm2wat verwenden, um Ihre WebAssembly-Binärdatei (test.wasm) in das WAT-Format zu konvertieren:
     # 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/*
    
    1. HTML-Seite bereitstellen: Um die HTML-Seite anzuzeigen, die mit dem WebAssembly-Modul interagiert, können Sie den einfachen HTTP-Server von Python verwenden:
     {
       "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
     }
    

    Fazit

    Indem Sie diese Schritte befolgen, können Sie eine Entwicklungsumgebung einrichten, um C-Code in WebAssembly zu kompilieren, mit ihm mithilfe von JavaScript zu interagieren und resultierende Binärdateien zur Überprüfung zu konvertieren. Die Verwendung externer Tools wie wabt und Pythons HTTP-Server vereinfacht die Verwaltung und Erkundung von WebAssembly-Modulen auf macOS-Systemen.

Das obige ist der detaillierte Inhalt vonEinführung in WebAssembly (WASM). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Ist JavaScript in C geschrieben? Prüfung der BeweiseIst JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AM

Ja, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.

JavaScripts Rolle: das Web interaktiv und dynamisch machenJavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AM

JavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.

C und JavaScript: Die Verbindung erklärteC und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AM

C und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.

Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptVon Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AM

JavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.

Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichenPython gegen JavaScript: Anwendungsfälle und Anwendungen verglichenApr 21, 2025 am 12:01 AM

Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.

Die Rolle von C/C bei JavaScript -Dolmetschern und CompilernDie Rolle von C/C bei JavaScript -Dolmetschern und CompilernApr 20, 2025 am 12:01 AM

C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.

JavaScript in Aktion: Beispiele und Projekte in realer WeltJavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AM

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

JavaScript und das Web: Kernfunktionalität und AnwendungsfälleJavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion