偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

你知道WebAssembly嗎?

開發(fā) 前端
VM 只能加載 JS 運行,JS 可能足夠滿足我們的需求,但如今JS會有各種各樣的原生性能的領(lǐng)域,比如3D 游戲、VR/AR、計算機視覺、圖片/視頻編輯等,并且,下載和解析體積比較大的JS是很困難的。

為什么要說WebAssembly呢?

其實對于我而言,之前有了解過 WebAssembly,知道他很強大,但是沒有實際的使用過。偶然間在調(diào)研和使用 ffmpeg 的過程中,看到了很多瀏覽器端的方案,都是使用了 WebAssembly,原來已經(jīng)有很多實際的應(yīng)用真的在使用它,那么它是不是 web 的未來呢?這篇文章主要就是帶大家走進 WebAssembly,網(wǎng)上有很多類似的文章,但對于大多數(shù)的前端同學(xué)來說可能有難以理解的地方,所以本次文章盡量用通俗易懂的方式帶大家了解 WebAssembly。

WebAssembly 是什么?

「官方的解釋」:WebAssembly/wasm WebAssembly 或者 wasm 是一個可移植、體積小、加載快并且兼容 Web 的全新格式,是由主流瀏覽器廠商組成的 W3C 社區(qū)團體制定的一個新的規(guī)范。

「我們來通俗的解釋」:WebAssembly 能夠把非 JavaScript 代碼運行在瀏覽器中,這些代碼可以是C、C++、Rust等等。

WebAssembly 如何與 Web兼容的?

WebAssembly 提供了一種在網(wǎng)絡(luò)平臺以接近本地速度的方式運行多種語言編寫的代碼的方式。

圖片

WebAssembly原理

Web 平臺可以看成有兩個部分:

VM,用于運行 Web 應(yīng)用代碼,例如 JS 引擎運行 JS 代碼??

Web API,例如 DOM、CSSOM、WebGL、IndexedDB、Web Audio API?

在以前,VM 只能加載 JS 運行,JS 可能足夠滿足我們的需求,但如今JS會有各種各樣的原生性能的領(lǐng)域,比如3D 游戲、VR/AR、計算機視覺、圖片/視頻編輯等,并且,下載和解析體積比較大的JS是很困難的。

隨著 WebAssembly 的出現(xiàn),上述提到的 VM 現(xiàn)在可以加載兩種類型的代碼執(zhí)行:JavaScript 和 WebAssembly。

雖然同樣運行在瀏覽器中,但是 WebAssembly 不是用來替代 Javascript 的,他們其實是相輔相成的。WebAssembly 會被編譯進你的瀏覽器,在你的 CPU 上以接近原生的速度運行。你可以直接在 JavaScript 中將它們當作模塊來用。也就是說,你可以通過 WebAssembly來充分利用編譯代碼的性能,同時保持 JavaScript 的靈活性。WebAssembly 其實是一種中間格式。

JS 是高層次的語言,靈活且極具表現(xiàn)力,動態(tài)類型、不需要編譯步驟,并且有強大的生態(tài),非常易于編寫 Web 應(yīng)用。

WebAssembly 是一種低層次、類匯編的語言,使用一種緊湊的二級制格式,能夠以近乎原生的性能運行,并提供了低層次的內(nèi)存模型,是 C++、Rust 等語言的編譯目標,使得這類語言編寫的代碼能夠在 Web 上運行。

WebAssembly 的特性?

  • 「快速、高效、可移植」—— 通過利用常見的硬件能力,WebAssembly 代碼在不同平臺上能夠以接近本地速度運行。
  • 「可讀、可調(diào)試」—— WebAssembly 是一門低階語言,但是它確實有一種人類可讀的文本格式(其標準即將得到最終版本),這允許通過手工來寫代碼,看代碼以及調(diào)試代碼。
  • 「保持安全」—— WebAssembly 被限制運行在一個安全的沙箱執(zhí)行環(huán)境中。像其他網(wǎng)絡(luò)代碼一樣,它遵循瀏覽器的同源策略和授權(quán)策略。
  • 「不破壞網(wǎng)絡(luò)」—— WebAssembly 的設(shè)計原則是與其他網(wǎng)絡(luò)技術(shù)和諧共處并保持向后兼容。

WebAssembly 和 JavaScript?

我們先來看下 WebAssembly 在瀏覽器中的位置:

圖片

WebAssembly在瀏覽器中的位置

  • WebAssembly 和 JavaScript 在同一個層次執(zhí)行,也就是JS Engine
  • 和 JavaScript 一樣,能夠操作 WebAPI

根據(jù)上圖,我們先來看下 JavaScript 在 Web 中所做的工作:

圖片

每個圖形大概的表示每個階段消耗的時間,JS 在 Web 中主要經(jīng)過了這些過程

  • 解析(parse)、編譯+優(yōu)化(compile + optimize)、重新優(yōu)化(re-optimize)、執(zhí)行(execute)、垃圾回收(garbage collection)

我們再來看下 WebAssembly 在 Web 中所做的工作:

圖片

  • 解碼(parse)、編譯+優(yōu)化(compile + optimize)、執(zhí)行(execute)

因為 Wasm 的特性和它特殊的格式,在很多情況下,Wasm 比 Javascript 要更快

  • 獲取 Wasm 花費的時間更少,因為它比 JavaScript 更緊湊,特有的二進制格式有效地減小了包體積,進一步提升了瀏覽器的加載速度。
  • 解碼 Wasm 花費的時間更少。
  • 編譯和優(yōu)化,因為 Wasm 更接近機器代碼。
  • 不需要重新優(yōu)化,因為 Wasm 內(nèi)置了類型和其他信息,因此 JS 引擎不需要去推測它。
  • 執(zhí)行通常需要更少的時間,因為 Wasm 的指令集更適合機器。
  • 由于內(nèi)存是手動管理的,因此不需要垃圾收集。

WebAssembly 的使用?

「WebAssembly 編寫和使用過程:」

圖片

  • 各種語言當前有分別對應(yīng)的不同編譯工具,能夠?qū)⒋a編譯為 wasm 格式的文件,如果所對應(yīng)的需求所使用的 wasm 是比較常見的庫,比如 ffmpeg,那么可以在 github 上找到很多已經(jīng)編譯好的 wasm 文件。
  • 有文件后,可以通過 fetch 或者 等方式獲取 wasm 文件內(nèi)容,并得到一份 ArrayBuffer。
  • 將得到的 ArrayBuffer 編譯為瀏覽器可執(zhí)行的模塊,并實例化
  • 到這里就可以調(diào)用從 Wasm 模塊內(nèi)導(dǎo)出的方法了

下面我們具體看下每一步中的實際例子:

  1. 首先需要配置編譯 WASM 所需要的環(huán)境,你首先需要先編譯 LLVM,這是運行后續(xù)工具的先決條件。
  • Git。
  • CMake
  • 系統(tǒng)編譯工具。Linux上,安裝 GCC。OS X 上,安裝 Xcode。Windows 上安裝 Visual Studio 2015 Community with Update 3 或更新版本。
  • Python 2.7.x,在 Linux 和 OS X上,很可能已經(jīng)裝好了??催@里。
  1. 接下來,您需要通過源碼自己編譯一個 Emscripten。運行下列命令來自動化地使用 Emscripten SDK。(因為下面用c舉例,所以使用 c 語言的 Wasm 編譯工具 Emscripten)。

安裝程序會設(shè)置所有 Emscripten 運行所需要的環(huán)境變量。

git clone https://github.com/juj/emsdk.git
cd emsdk

# 在 Linux 或者 Mac macOS 上
./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
./emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit
# 如果在你的 macos 上獲得以下錯誤
Error: No tool or SDK found by name 'sdk-incoming-64bit'
# 請執(zhí)行
./emsdk install latest
# 按照提示配置環(huán)境變量即可
./emsdk activate latest


# 在 Windows 上
emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit

# 注意:Windows 版本的 Visual Studio 2017 已經(jīng)被支持,但需要在 emsdk install 需要追加 --vs2017 參數(shù)。

  1. 編寫C代碼(這里用C舉例)

#include <stdio.h>

int main(int argc, char ** argv){
printf("Hello World\n");
}

  1. 轉(zhuǎn)到一個已經(jīng)配置過 Emscripten 編譯環(huán)境的終端窗口中,進入剛剛保存 hello.c 文件的文件夾中,然后運行下列命令:

emcc hello.c -s WASM=1 -o hello.html

  1. 經(jīng)過上面步驟就可以得到 .wasm 文件,下面我們使用 fetch 來加載和運行 wasm,我們先來看一下代碼。

function fetchAndInstantiate(url, importObject) {
return fetch(url).then(response
response.arrayBuffer()
).then(bytes
WebAssembly.instantiate(bytes, importObject)
).then(results
results.instance
);
}

  • 首先我們使用 fetch 函數(shù)來獲取了 wasm 文件內(nèi)容,函數(shù)返回了 response 對象
  • 我們使用 arrayBuffer 函數(shù)把 response 轉(zhuǎn)換為帶類型數(shù)組
  • 最后使用 WebAssembly.instantiate 函數(shù)來進一步編譯和實例化數(shù)組。

WebAssembly 對象是原生提供的包含了所有 WebAssembly 相關(guān)功能的命名空間 其中 WebAssembly.Instance 對象是一個有狀態(tài)的、可執(zhí)行的模塊的實例。實例對象包含所有的能夠從 JavaScript 調(diào)用到 WebAssembly 代碼的導(dǎo)出的 WebAssembly 函數(shù)。MDN WebAssembly API參考

圖片

  1. 我們可以使用上面的函數(shù)來運行我們自己的 wasm 文件。

fetchAndInstantiate('myModule.wasm', importObject)
.then((instance) => {
// 調(diào)用導(dǎo)出函數(shù):
instance.exports.exported_func();

// 或者獲取導(dǎo)出內(nèi)存的緩存內(nèi)容:
const i32 = new Uint32Array(instance.exports.memory.buffer);

// 或者獲取導(dǎo)出表格中的元素:
const table = instance.exports.table;
console.log(table.get(0)());
})

總結(jié)一下上面的內(nèi)容,其實就是兩種語言之間以 wasm 為橋梁進行了一次通信:

圖片

上面的整個步驟就是我們從環(huán)境搭建到最后使用 wasm 文件的流程,當前你所使用的語言可能不同,所使用的編譯工具自然也不同。并且以上只是最簡單的使用方式,如果考慮到性能、優(yōu)化等問題,還有很深的內(nèi)容值得探討。

WebAssembly 的應(yīng)用?

figma - 基于瀏覽器的多人實時協(xié)作 UI 設(shè)計工具

- https://www.figma.com/

Google Earth — 支持各大瀏覽器的 3D 地圖,而且運行流暢

- https://earth.google.com/web/?

WebAssembly 的兼容性?

可以看到的是,很多現(xiàn)代瀏覽器對于 WebAssembly 的支持越來越好,未來的趨勢對于 Webassembly 來說是向好的

圖片

總結(jié)?

當前 WebAssembly 大多數(shù)被用在對原生能力有很高要求的地方,或者是將一些應(yīng)用程序移植到 Web,但是 WebAssembly 并不僅僅局限在瀏覽器,它還被應(yīng)用在使代碼跨平臺、跨設(shè)備工作。

WebAssembly 到底是不是 web 的未來?現(xiàn)在來看的話,它還在發(fā)展階段,首先要解決的問題其實就是各瀏覽器的兼容性,其次就是性能問題。我認為它并不是用來取代 JS 的,但是極有可能演變?yōu)?ES6 之后 Web 的新拐點。

參考文獻?

WASM中文網(wǎng)

- https://www.wasm.com.cn/

MDN WebAssembly概念

- https://developer.mozilla.org/zh-CN/docs/WebAssembly/Concepts

W3C Web 中文興趣組 · WebAssembly 線上研討會2020年8月29日

- https://www.w3.org/2020/08/29-chinese-web-wasm.minutes.html?

記一次完整 C++ 項目編譯成 WebAssembly 的實踐

- https://developer.aliyun.com/article/740902

責任編輯:武曉燕 來源: 大轉(zhuǎn)轉(zhuǎn)FE
相關(guān)推薦

2018-01-10 08:27:00

2010-11-23 10:21:53

跳槽

2023-02-25 16:02:48

2022-06-01 07:10:43

遞歸字典極限

2010-09-17 16:16:05

無線接入技術(shù)

2013-06-27 10:09:21

大數(shù)據(jù)

2024-03-08 13:33:08

PG數(shù)據(jù)安全

2023-12-20 08:23:53

NIO組件非阻塞

2022-09-22 14:55:31

前端JavaScripthis

2022-09-26 13:10:17

JavaScriptthis

2010-09-17 15:32:09

Linux網(wǎng)絡(luò)協(xié)議棧

2015-12-01 13:33:51

UnikernelLinux運維

2022-10-24 09:57:02

runeGo語言

2024-04-30 09:02:48

2023-04-26 10:21:04

2021-11-12 05:59:23

容災(zāi)備份5G

2021-02-19 07:59:21

數(shù)據(jù)埋點數(shù)據(jù)分析大數(shù)據(jù)

2023-12-12 08:41:01

2021-10-08 21:00:52

數(shù)據(jù)弱引用對象

2022-06-29 08:32:04

游標MySQL服務(wù)器
點贊
收藏

51CTO技術(shù)棧公眾號