午夜视频在线网站,日韩视频精品在线,中文字幕精品一区二区三区在线,在线播放精品,1024你懂我懂的旧版人,欧美日韩一级黄色片,一区二区三区在线观看视频

分享

初探webAssembly

 山峰云繞 2023-08-04 發(fā)布于貴州

https://m.toutiao.com/is/iJNSf7U9/ 


1 WebAssembly是什么?

一種運行在現(xiàn)代網(wǎng)絡(luò)瀏覽器中的新型代碼,并且提供新的性能特性和效果

W3C WebAssembly Community Group開發(fā)的一項網(wǎng)絡(luò)標準,對于瀏覽器而言,WebAssembly 提供了一條途徑,讓各種語言編寫的代碼以接近原生的速度在 Web 中運行。在這種情況下,以前無法以此方式運行的客戶端軟件等都將可以運行在 Web 中。

WebAssembly 設(shè)計之初就決定和 JavaScript 一起協(xié)同運行——通過JavaScript 中的 WebAssembly API,可以把 WebAssembly 模塊加載到一個 JavaScript 應(yīng)用中并且在兩者之間互相調(diào)用。這樣可以在同一個應(yīng)用中使用 WebAssembly 的高性能及 JavaScript 的高靈活性。

2 為什么需要WebAssembly?

眾所周知JavaScript是解釋型語言,相比于編譯型語言需要在運行時轉(zhuǎn)換,所以解釋型語言的執(zhí)行速度要慢于編譯型語言。

編譯型語言和解釋型語言代碼執(zhí)行的具體流程如下:

因為解釋型語言每次執(zhí)行都需要把源碼轉(zhuǎn)換一次才能執(zhí)行,而轉(zhuǎn)換過程非常耗費時間和性能,也就導(dǎo)致在JavaScript背景下,web無法執(zhí)行一些高性能應(yīng)用,如圖片剪輯、視頻剪輯、3D游戲等。

根據(jù)MDN的定義,WebAssembly是一種運行在現(xiàn)代網(wǎng)絡(luò)瀏覽器中的新型代碼,并且提供新的性能特性和效果??梢栽诂F(xiàn)代的網(wǎng)絡(luò)瀏覽器中運行 - 它是一種低級的類匯編語言,具有緊湊的二進制格式,可以接近原生的性能運行,并為諸如C / C ++等語言提供一個編譯目標,以便它們可以在Web上運行。它也被設(shè)計為可以與JavaScript共存,允許兩者一起工作。

3 WebAssembly的工作原理

WebAssembly不被解釋,而是由開發(fā)者提前編譯為WebAssembly二進制格式,如下圖所示。由于變量類型都是預(yù)知的,因此瀏覽器加載WebAssembly文件時,JavaScript引擎無須監(jiān)測代碼。它可以簡單地將這段代碼的二進制格式編譯為機器碼。

如果將每種編程語言都直接編譯為機器碼的各個版本,那么效率會很低。編譯器中稱為前端的部分會將所編寫的代碼編譯為一種中間表示(intermediate representation,IR)。創(chuàng)建好IR代碼后,編譯器的后端部分會接收IR代碼,對其進行優(yōu)化,然后將其轉(zhuǎn)換為所需要的機器碼。

如果將每種編程語言都直接編譯為機器碼的各個版本,那么效率會很低。編譯器中稱為前端的部分會將所編寫的代碼編譯為一種中間表示(intermediate representation,IR)。創(chuàng)建好IR代碼后,編譯器的后端部分會接收IR代碼,對其進行優(yōu)化,然后將其轉(zhuǎn)換為所需要的機器碼。

由于瀏覽器可以在若干不同的處理器(比如桌面計算機、智能手機和平板設(shè)備)上運行,因此為每個可能的處理器發(fā)布一個WebAssembly代碼的編譯后版本會非常繁復(fù)。替代方法即取得IR代碼,并通過一個專門的編譯器來運行,這個編譯器將IR代碼轉(zhuǎn)換為一種專用字節(jié)碼并放入后綴為.wasm的文件中。此時wasm文件中的字節(jié)碼還不是機器碼,它只是支持WebAssembly的瀏覽器能夠理解的一組虛擬指令。當(dāng)加載到支持WebAssembly的瀏覽器中時,瀏覽器會驗證這個文件的合法性,然后這些字節(jié)碼會繼續(xù)編譯為瀏覽器所運行的設(shè)備上的機器碼。如下圖

WebAssembly被設(shè)計為JavaScript的一個組件,不是它的替代品。雖然有些開發(fā)者試圖只用WebAssembly來創(chuàng)建整個網(wǎng)站,但這不是普遍情況。一般情況JavaScript仍然是更好的選擇。

4 WebAssembly模塊內(nèi)部

模塊中不同段的含義說明:

編譯器負責(zé)生成WebAssembly模塊的段,并將它們按照適當(dāng)順序放置。

所有的段都是可選的,因此可能存在空模塊。

如果指定了已知段,那么它們只能出現(xiàn)一次并且要按照特定順序出現(xiàn)。

自定義段可以放置在已知段之前、之間或之后,用于指定不適用已知段的數(shù)據(jù)。

5 哪些語言可用來創(chuàng)建WebAssembly模塊?

現(xiàn)在WebAssembly的最小可行性版本(Minimum Viable Product,MVP)還沒有垃圾回收(garbage collection,GC),他限制了一些語言的使用。GC作為一種后MVP功能正在開發(fā)中,實現(xiàn)之前,有幾種語言正在試驗WebAssembly支持,方式是將自己的VM編譯到WebAssembly,或者在某些情況下將自己的垃圾回收器包含進去。

以下語言正在試驗或已經(jīng)完成WebAssembly支持:

  • C和C++
  • Rust正致力于成為WebAssembly的首選編程語言。
  • AssemblyScript是一種新編譯器,它用來將TypeScript轉(zhuǎn)換為WebAssembly。
  • TeaVM是一個將Java轉(zhuǎn)譯到JavaScript的工具,現(xiàn)在也可以生成WebAssembly了。
  • Go 1.11為WebAssembly增加了一個試驗性項目,其編譯后的WebAssembly模塊包含一個垃圾回收器。
  • Pyodide是Python的一個項目,其中包含了Python科學(xué)棧的核心包:Numpy、Pandas和matplotlib。
  • Blazor是微軟的實驗性項目,用于將C#引入WebAssembly。

更多列表關(guān)注github: WebAssembly支持列表

相關(guān)案例:

TeaVM:它可以將 JVM 字節(jié)碼翻譯成 JavaScript 和 WebAssembly

我們有一段時間后端開始做一些前端開發(fā),但是結(jié)果有時并不盡如人意,關(guān)鍵就在于我們的后端開發(fā)人員對前端無論是框架還是語法還是規(guī)范,都不是非常了解。這是在所難免的,但是因為業(yè)務(wù)需要又不得不做。

TeaVM就為我們這種情況提供了一種解決方案,我們的后端開發(fā)人員依然使用自己熟悉的語言(java)進行開發(fā)。功能開發(fā)完成后再將.class或.jar文件通過TeaVM編譯成wasm或JavaScript供瀏覽器加載調(diào)用。

git:https://github.com/konsoletyper/teavm

官網(wǎng):https:///

6 WebAssembly可以用在哪?

目前大多數(shù)瀏覽器廠商都已經(jīng)支持WebAssembly,包括Chrome、Edge、Firefox和Safari。移動端Web瀏覽器也同樣支持。Node.js也從版本8開始支持。

WebAssembly不是JavaScript的替代品,而是它的一個補充,有些情況下WebAssembly是更好的選擇,有些情況下使用JavaScript會是一個更優(yōu)的方案。與JavaScript在同一個VM運行可讓兩種技術(shù)相輔相成。

WebAssembly為非JavaScript的開發(fā)者提供了一個新的道路,幫助他們在web中使用自己編寫的代碼。也讓不了解C或C++等語言的web開發(fā)者可與訪問更新、更快的庫。個人理解WebAssembly也可用來優(yōu)化某些庫的執(zhí)行速度。

6.1 一些使用webAssembly的案例

Figma — 基于瀏覽器的多人實時協(xié)作 UI 設(shè)計工具:https://www./

Google Earth https://earth.google.com/ - 17年開始支持在FireFox打開,主要依賴webAssembly。之前使用Native Client導(dǎo)致只能在chrome中運行

Magnum — 跨平臺的 OpenGL 圖形引擎https://github.com/mosra/magnum

Egret Engine - 一款HTML5游戲引擎https://github.com/egret-labs/egret-core/

Web-DSP — 使用瀏覽器就能即時制作多媒體影音特效https://github.com/shamadee/web-dsp

7 WebAssembly怎么用?

7.1 得到wasm文件手動引入

var importObject = { imports: { imported_func: function(arg) { console.log(arg); } } }; // 輸出 42 fetch('simple.wasm') .then(res => res.arrayBuffer() ).then(bytes => WebAssembly.instantiate(bytes, importObject) ).then(results => { results.instance.exports.exported_func(); });

7.2 得到編譯好的npm包引入執(zhí)行

// alert(`Hello, ${name}`)const js = import('./node_modules/@jdl/hello-wasm/hello_wasm.js');js.then(js => {  js.greet('WebAssembly');});

以下為hello_wasm.js文件編譯前源碼

// rustextern crate wasm_bindgen;use wasm_bindgen::prelude::*;#[wasm_bindgen]extern { pub fn alert(s: &str);}#[wasm_bindgen]pub fn greet(name: &str) { alert(&format!('Hello, {}!', name));}

本文從為什么需要WebAssembly、WebAssembly的工作原理、哪些語言可用來創(chuàng)建WebAssembly模塊、WebAssembly可以用在哪里 以及 怎么使用 幾方面簡要介紹了webAssembly。如果之前沒有了解過webAssembly,可以做一些簡要的了解。

參考文獻《WebAssembly 實戰(zhàn)》 —- C. 杰勒德·加倫特

編譯 Rust 為 WebAssembly - WebAssembly | MDN

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多