Javascript編譯目標(biāo)Asm.js的介紹

這篇文章主要介紹“Javascript編譯目標(biāo)Asm.js的介紹”，在日常操作中，相信很多人在Javascript編譯目標(biāo)Asm.js的介紹問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Javascript編譯目標(biāo)Asm.js的介紹”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

正如許多開發(fā)者一樣，我也為Asm.js的前景而感到興奮不已。最近的新聞——Asm.js正 在被Firefox支持——引起了我的興趣。同樣感興趣的還有Mozilla和Epic聲明（mirror）他們已經(jīng)為Asm.js而支持Unreal  Engine 3——并且運(yùn)行十分良好。

獲得一個(gè)C++游戲引擎運(yùn)行Javascript，并使用WebGL來(lái)渲染，這是一個(gè)重大的突破，這個(gè)突破很大程度上歸功于Mozilla開發(fā)的工具鏈，才使得這一切變得可能。

由于Unreal Engine  3開始支持Asm.js，我瀏覽了來(lái)自Twitter，blogs和其他地方的回應(yīng)，當(dāng)一部分開發(fā)者表現(xiàn)出對(duì)這項(xiàng)制造奇跡的技術(shù)躍躍欲試時(shí)，我也看到許多 疑惑：Asm.js是一個(gè)插件嗎？Asm.js能讓我平時(shí)使用的Javascript運(yùn)行的更快嗎？它兼容所有瀏覽器嗎？從這些回應(yīng)中，我認(rèn)為 Asm.js及其相關(guān)技術(shù)很重要，我將解釋這些技術(shù)，好讓開發(fā)者明白發(fā)生了什么以及他們將會(huì)如何從這些技術(shù)中獲益。另外，為了寫出這篇我對(duì)這項(xiàng)技術(shù)的概 覽，我也請(qǐng)教了David Herman（Mozilla研究院的高級(jí)研究員）一大堆關(guān)于Asm.js和如何梳理這些知識(shí)的問題。

什么是 Asm.js?

為了理解 Asm.js 及其適用與瀏覽器的所在，你需要知道它的由來(lái)以及它存在的意義。
Asm.js 來(lái)自于 JavaScript 應(yīng)用的一個(gè)新領(lǐng)域: 編譯成JavaScript的C/C++應(yīng)用. 它是 JavaScript 應(yīng)用的一個(gè)全新流派，由 Mozilla 的 Emscripten項(xiàng)目催生而來(lái)。
Emscripten 將 C/C++ 代碼傳入  LLVM, 并將 LLVM生成的字節(jié)碼轉(zhuǎn)換成 JavaScript (具體的, Asm.js, 是 JavaScript 的一個(gè)子集).

如果被編譯成的 Asm.js 的代碼做了一些渲染工作，那么它幾乎總是由WebGL來(lái)處理的 (并且由 OpenGL 來(lái)渲染).  這樣技術(shù)上就利用了JavaScript 和瀏覽器的好處，但幾乎完全避開了頁(yè)面中Javascript使用的實(shí)際的、常規(guī)的代碼執(zhí)行和渲染路徑.

Asm.js是Javascript的一個(gè)子集，它深度的限制了其所能做的范圍和所能操作的對(duì)象。這樣做才能使得Asm.js的代碼能夠盡可能運(yùn)行的快， 從而盡可能減少各種假定情況的出現(xiàn)，從而能夠把Asmjs代碼直接轉(zhuǎn)變成為匯編代碼。有一個(gè)特別值得注意的是 － Asmjs還只是Javascript  －  不需要瀏覽器的插件或者是別的特性去運(yùn)行它（雖然一個(gè)能夠檢測(cè)出并且優(yōu)化Asmjs代碼的瀏覽器當(dāng)然是要快一些）。它是Javascript的一個(gè)特定的 子集，為性能優(yōu)化而生，特別是為那些需要編譯成為Javascript的應(yīng)用程序來(lái)做優(yōu)化。

***的理解Asmjs工作的方式，就是看看一些Asmjs－編譯化的代碼。讓我們看看這個(gè)函數(shù)，這是從真實(shí)的Asmjs編譯模塊里面提取出來(lái)的函數(shù)（來(lái)自BananaBread demo）。我對(duì)代碼格式做了調(diào)整，所以看起來(lái)更加合乎代碼片段的閱讀，原本它是一個(gè)高度壓縮的JavaScript代碼中的一個(gè)很大的計(jì)算機(jī)二進(jìn)制對(duì)象。

function Vb(d) {     d = d | 0;     var e = 0, f = 0, h = 0, j = 0, k = 0, l = 0, m = 0, n = 0,     o = 0, p = 0, q = 0, r = 0, s = 0;     e = i;     i = i + 12 | 0;     f = e | 0;     h = d + 12 | 0;     j = c[h >> 2] | 0;     if ((j | 0) > 0) {     c[h >> 2] = 0;     k = 0     } else {     k = j     }     j = d + 24 | 0;     if ((c[j >> 2] | 0) > 0) {     c[j >> 2] = 0     }     l = d + 28 | 0;     c[l >> 2] = 0;     c[l + 4 >> 2] = 0;     l = (c[1384465] | 0) + 3 | 0;     do {     if (l >>> 0 < 26) {     if ((4980736 >>> (l >>> 0) & 1 | 0) == 0) {     break     }     if ((c[1356579] | 0) > 0) {     m = d + 4 | 0;     n = 0;     while (1) {     o = c[(c[1356577] | 0) + (n << 2) >> 2] | 0;     do {     if (a[o + 22 | 0] << 24 >> 24 == 24) {     if (!(Vp(d, o | 0) | 0)) {     break     }     p = (c[m >> 2] | 0) + (((c[h >> 2] | 0) - 1 | 0) * 40 & -1) + 12 | 0;     q = o + 28 | 0;     c[p >> 2] = c[q >> 2] | 0;     c[p + 4 >> 2] = c[q + 4 >> 2] | 0;     c[p + 8 >> 2] = c[q + 8 >> 2] | 0;     c[p + 12 >> 2] = c[q + 12 >> 2] | 0;     c[p + 16 >> 2] = c[q + 16 >> 2] | 0;     c[p + 20 >> 2] = c[q + 20 >> 2] | 0;     c[p + 24 >> 2] = c[q + 24 >> 2] | 0     }     } while (0);     o = n + 1 | 0;     if ((o | 0) < (c[1356579] | 0)) {     n = o     } else {     break     }     }     r = c[h >> 2] | 0     } else {     r = k     } if ((r | 0) == 0) {     i = e;     return     }     n = c[j >> 2] | 0;     if ((n | 0) >= 1) {     i = e;     return     }     m = f | 0;     o = f + 4 | 0;     q = f + 8 | 0;     p = n;     while (1) {     g[m >> 2] = 0.0;     g[o >> 2] = 0.0;     g[q >> 2] = 0.0;     Vq(d, p, f, 0, -1e3);     n = c[j >> 2] | 0;     if ((n | 0) < 1) {     p = n     } else {     break     }     }     i = e;     return     }     } while (0);     if ((c[1356579] | 0) <= 0) {     i = e;     return     }     f = d + 16 | 0;     r = 0;     while (1) {     k = c[(c[1356577] | 0) + (r << 2) >> 2] | 0;     do {     if (a[k + 22 | 0] << 24 >> 24 == 30) {     h = b[k + 14 >> 1] | 0;     if ((h - 1 & 65535) > 1) {     break     }     l = c[j >> 2] | 0;     p = (c[1384465] | 0) + 3 | 0;     if (p >>> 0 < 26) {     s = (2293760 >>> (p >>> 0) & 1 | 0) != 0 ? 0 : -1e3     } else {     s = -1e3     } if (!(Vq(d, l, k | 0, h << 16 >> 16, s) | 0)) {     break     }     g[(c[f >> 2] | 0) + (l * 112 & -1) + 56 >> 2] = +(b[k + 12 >> 1] << 16 >> 16 | 0);     h = (c[f >> 2] | 0) + (l * 112 & -1) + 60 | 0;     l = k + 28 | 0;     c[h >> 2] = c[l >> 2] | 0;     c[h + 4 >> 2] = c[l + 4 >> 2] | 0;     c[h + 8 >> 2] = c[l + 8 >> 2] | 0;     c[h + 12 >> 2] = c[l + 12 >> 2] | 0;     c[h + 16 >> 2] = c[l + 16 >> 2] | 0;     c[h + 20 >> 2] = c[l + 20 >> 2] | 0;     c[h + 24 >> 2] = c[l + 24 >> 2] | 0     }     } while (0);     k = r + 1 | 0;     if ((k | 0) < (c[1356579] | 0)) {     r = k     } else {     break     }     }     i = e;     return     }

從技術(shù)上說(shuō)，這是Javascript代碼，但是我們已經(jīng)看到這段代碼一點(diǎn)都不像大多我們正?？吹降牟僮鱀OM的Javascript。通過看這段代碼，我們可以發(fā)現(xiàn)幾件事：

• 這段特定的代碼只能處理數(shù)值。事實(shí)上這是所有Asm.js代碼的情形。Asm.js只能處理被挑出的幾種不同的數(shù)值類型，而沒有提供其他的數(shù)據(jù)類型（包括字符串，布爾型和對(duì)象）。

• 所有外部數(shù)據(jù)在一個(gè)稱為堆的對(duì)象中存儲(chǔ)并被引用。堆在本質(zhì)上是一個(gè)大數(shù)組(應(yīng)當(dāng)是一個(gè)在性能上高度優(yōu)化的類型化數(shù)組)。所有的數(shù)據(jù)在這個(gè)數(shù)組中存儲(chǔ)——有效的替代了全局變量，結(jié)構(gòu)體，閉包和其他形式的數(shù)據(jù)存儲(chǔ)。

• 當(dāng)訪問和賦值變量時(shí)，結(jié)果被統(tǒng)一的強(qiáng)制轉(zhuǎn)換成一種特定類型。例如f = e | 0;給變量f賦值e，但它也確保了結(jié)果的類型是一個(gè)整數(shù)（|0把值轉(zhuǎn)換成整數(shù)，確保了這點(diǎn)）。這也發(fā)生在浮點(diǎn)型上——注意0.0和g[...] = +（...)的使用.

• 看看從數(shù)據(jù)結(jié)構(gòu)中寫入讀出的值，用c表示的數(shù)據(jù)結(jié)構(gòu)好像是一個(gè)Int32Array（存儲(chǔ)32位整數(shù)，因?yàn)檫@些值總是通過|0被轉(zhuǎn)換成或者轉(zhuǎn)換自一個(gè)整數(shù)），g好像是一個(gè)Float32Array（存儲(chǔ)32位浮點(diǎn)數(shù)，因?yàn)檫@些值總是通過包裹上+(...)轉(zhuǎn)換成浮點(diǎn)數(shù)）。

這么做以后，結(jié)果就是高度優(yōu)化，并且可以直接從Asm.js語(yǔ)法轉(zhuǎn)換成匯編，而不必像常常要對(duì)Javascript做的那樣解釋它。它有效地削減了使像Javascript之類的的動(dòng)態(tài)語(yǔ)言緩慢的東西：例如需要垃圾收集器和動(dòng)態(tài)類型。

作為一個(gè)更容易理解的Asm.js代碼示例，我們來(lái)看看一個(gè)Asm.js規(guī)范上的例子：

function DiagModule(stdlib, foreign, heap) {         "use asm";               // Variable Declarations         var sqrt = stdlib.Math.sqrt;               // Function Declarations         function square(x) {             x = +x;             return +(x*x);         }               function diag(x, y) {             x = +x;             y = +y;             return +sqrt(square(x) + square(y));         }               return { diag: diag };     }

看看這個(gè)模塊，它完全能讓人理解！閱讀這些代碼，我們能更好的理解Asm.js模塊的結(jié)構(gòu)。一個(gè)模塊包含在一個(gè)函數(shù)中，它以頂部的"use asm";指令開始。它提示解釋器這個(gè)函數(shù)里所有的東西可以被當(dāng)成Asm.js處理，并可以直接被編譯成匯編代碼。

注意在函數(shù)頂部的三個(gè)參數(shù)：stdlib，foreigh和heap。stdlib對(duì)象包含了很多內(nèi)建數(shù)學(xué)函數(shù)的引用。foreign提供了自定義用戶功能（例如在WebGL中繪制圖形）的訪問。***，heap給了你一個(gè)ArrayBuffer，它可以通過很多透鏡（例如Int32Array和Float32Array）來(lái)觀察。

該模塊剩下的被分成了三部分：變量聲明，函數(shù)聲明，還有***把函數(shù)導(dǎo)出暴露給用戶的一個(gè)對(duì)象。

導(dǎo)出是尤其要去理解的一個(gè)重點(diǎn)，因?yàn)樗茸屗心K中的代碼被當(dāng)成Asm.js處理，又使得代碼可以被其他普通的Javascript代碼使用。因此，在理論上你可以通過使用上面的DiagModule代碼，寫下如下代碼：

document.body.onclick = function() {     function DiagModule(stdlib){"use asm"; ... return { ... };}     var diag = DiagModule({ Math: Math }).diag;     alert(diag(10, 100)); };

這帶來(lái)了一個(gè)Asm.js模塊DiagModule，它被Javascript解釋器特殊處理，但仍然能夠被其他Javascript代碼使用（我們?nèi)阅茉L問并使用它，比如一個(gè)單擊事件處理程序）。

性能如何？

現(xiàn)在Asm.js唯一的實(shí)現(xiàn)就是nightly versions of Firefox（而且也只是針對(duì)特定的幾個(gè)平臺(tái)）。原來(lái)的數(shù)字告訴我們Ams.js的性能是非常非常不錯(cuò)的。對(duì)于復(fù)雜的應(yīng)用（比如上面的游戲）性能僅僅比普通C++編譯的慢兩倍（可以和Java或者C#相媲美）。實(shí)際上，這已經(jīng)比目前瀏覽器的運(yùn)行時(shí)環(huán)境要快很多了，幾乎是***版的Firefox或者Chrome執(zhí)行速度的4~10倍。

基于目前***測(cè)試，可以看出Asm.js在性能上有很大的提升?？紤]到現(xiàn)在僅僅是Asm.js的最初開發(fā)階段，相信在不久的將來(lái)就會(huì)有更大的性能提升。

看到Asm.js和當(dāng)前的Firefox和Chrome引擎的性能差距是很有意思的。一個(gè)4~10倍的性能差異是非常巨大的（就好像拿這些瀏覽器和IE6 做性能對(duì)比一樣）。有趣的是雖然有這么大的性能差異，但是許多的Asm.js演示例子仍然是可以在Chrome和Firefox——這些代表著當(dāng)前 Javascript先進(jìn)技術(shù)的引擎——上使用的。這也就是說(shuō)他們的性能明顯不如一個(gè)運(yùn)行著優(yōu)化過的Asm.js代碼的瀏覽器相提并論。

使用情況

需要說(shuō)明的是現(xiàn)在幾乎所有基于Asm.js的應(yīng)用都是C/C++應(yīng)用使用Emscripten編譯的?？梢钥隙ǖ恼f(shuō)，在不久的將來(lái)，這類即將運(yùn)行在 Asm.js的應(yīng)用，將會(huì)從可以在瀏覽器中運(yùn)行這一可移植性中獲益，但是在支持javascript方面有一定復(fù)雜度的應(yīng)用將不可行。

到目前為止，大部分的使用情況下，代碼性能是至關(guān)重要的：比如運(yùn)行游戲，圖像，處理語(yǔ)言翻譯和庫(kù)。從一個(gè)關(guān)于Emscripten項(xiàng)目列表的概覽可以看到許多即將被廣大開發(fā)者使用的技術(shù)。

• 許多游戲引擎已經(jīng)被支持。一個(gè)好的演示也許就是BananaBread FPS游戲（源代碼），它可以直接在瀏覽器中運(yùn)行，支持多玩家和機(jī)器人。

• 支持javascript的LaTeX，即textlive.js，使用Emscripten，允許你完全在你的瀏覽器中編輯PDF文檔。

• 支持javascript的SQLite，能夠在Node.js中運(yùn)行。

• NaCL：一個(gè)網(wǎng)絡(luò)加密解密的庫(kù)。

Asm.js支持

就像之前提到的那樣，現(xiàn)在只有nightly版本的Firefox支持Asm.js的優(yōu)化。

但是，要注意Asm.js格式的Javascript代碼仍然是Javascript，雖然其存在一些限制。這樣，其他的瀏覽器即使不支持Asm.js仍可以將其作為普通的Javascript代碼運(yùn)行。

有關(guān)代碼性能重要而令人不解的一點(diǎn)是：如果瀏覽器不支持typed array或者不能對(duì)Asm.js代碼進(jìn)行特殊的編譯，Asm.js的性能會(huì)變的很差。當(dāng)然，這并不止針對(duì)Asm.js，如果沒有這些特性，瀏覽器的性能在其他方面也會(huì)收到影響。

Asm.js與Web開發(fā)

你可能已經(jīng)看出來(lái)了，上面的Asm.js代碼不是手工輸入的的。Asm.js需要一些特殊的工具來(lái)編寫，而且其開發(fā)和編寫普通的 Javascript代碼有很大區(qū)別。目前一般的Asm.js應(yīng)用都是從C/C++編譯到Javascript的，很顯然它們都不會(huì)與DOM進(jìn)行任何交 互，而是直接與WebGL打交道。

為了能讓一般的開發(fā)者使用，需要一些更能讓人接受的中間語(yǔ)言。目前LLJS已經(jīng)逐漸實(shí)現(xiàn)向Asm.js編譯了。需要注意的是，LLJS這樣的語(yǔ)言同樣與常規(guī)的Javascript有很大區(qū)別，會(huì)讓許多Javascript開發(fā)者感到困擾。即使是用LLJS這樣更加友好的語(yǔ)言，編寫Asm.js必須要對(duì)復(fù)雜的代碼進(jìn)行優(yōu)化，這恐怕只有資深開發(fā)者能夠勝任了。

就算有了LLJS或者別的語(yǔ)言來(lái)幫助我們編寫Asm.js，我們也沒有同樣性能優(yōu)異的DOM可以使用。理想的環(huán)境應(yīng)該是將LLJS與DOM一起編譯產(chǎn)生單一的可執(zhí)行二進(jìn)制文件。我還想不出這樣做性能會(huì)有多好，但是我想這么做！

與David Herman的問答

我寫信給David Herman（Mozilla Research的高級(jí)研究員），向他詢問了一些問題。他們是如何將Asm.js的各部分結(jié)合在一起的？他們又希望用戶從中得到什么呢？他親切地深入回答了這些問題，有些回復(fù)很有趣。我希望你們也同樣能從中獲得啟發(fā)。

Asm.js的目標(biāo)是什么？你們這個(gè)計(jì)劃的目標(biāo)人群是哪些？

創(chuàng)建一個(gè)利于用戶訪問版本的Asm.js是否合理呢，比如一個(gè)更新版本的LLJS？或者是擴(kuò)展目前項(xiàng)目的范圍，而不僅僅是一個(gè)編譯器的目標(biāo)語(yǔ)言？

有一個(gè)討論是關(guān)于，在目前支持Asm.js的瀏覽器和不支持的瀏覽器之間，會(huì)出現(xiàn)一種因此更新而形成的性能的分界，類似與 2008/2009年中所發(fā)生的JavaScript性能競(jìng)爭(zhēng)。雖然技術(shù)上來(lái)看，Asm.js的代碼在現(xiàn)實(shí)中，可以運(yùn)行于任意兩者之上，而性能的不同，對(duì) 于大多數(shù)的場(chǎng)合而言將會(huì)有有明顯的不同（譯者注：原詞是too crippling，意思大致是嚴(yán)重的傷害）。那么對(duì)于這種分界，以及高度限制Javascript，為什么你選擇了Javascript作為編譯的目標(biāo)？為什么不是另一種取代javascript的語(yǔ)言或者是一種插件？（譯者注：作者似乎是想說(shuō)明，Javascript的限制對(duì)于所有瀏覽器都會(huì)有影響，那么對(duì)于不支持Asm.js的瀏覽器會(huì)有所傷害，所以為什么不選擇別的語(yǔ)言或者是插件，這樣就會(huì)只影響自己的產(chǎn)品）

拿Asm.js和Google的Native Client做比較，你覺得如何？他們似乎都有這類似的目標(biāo)，同時(shí)Asmjs有著可以運(yùn)行在任何支持javascript的地方的優(yōu)勢(shì)。有過對(duì)于兩者之間的任何性能比較么？

Emscripten是另一個(gè)Mozilla項(xiàng)目，也是Asm.js的主要兼容代碼的貢獻(xiàn)者。有多少Asm.js的開發(fā)被Emscripten的項(xiàng)目需求所支配？Emscripten又從引擎的提升上獲得了什么益處？

Asm.js的功能還會(huì)變動(dòng)么？隨著越來(lái)越多編譯器開發(fā)者的加入，你贊不贊同加入更多的附加功能（比如更高級(jí)的數(shù)據(jù)結(jié)構(gòu)）？

可以做出JavaScript-to-Asm.js轉(zhuǎn)譯器么，它會(huì)被做出來(lái)么?

現(xiàn)在Asm.js還不能進(jìn)行與有關(guān)DOM和瀏覽器的操作。創(chuàng)建一個(gè)Emscripten到Ams.js版本的DOM（就像DOM.js）如何？

編寫Asm.js代碼與編寫一般的Javascript代碼相比確實(shí)十分困難，你有什么工具可以提供給開發(fā)者和編譯器作者呢？

我覺得你們很樂于和其他瀏覽器廠商一起工作，你們的合作和討論進(jìn)展如何？

到此，關(guān)于“Javascript編譯目標(biāo)Asm.js的介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！