Javascript編譯目標Asm.js的介紹

這篇文章主要介紹“Javascript編譯目標Asm.js的介紹”，在日常操作中，相信很多人在Javascript編譯目標Asm.js的介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Javascript編譯目標Asm.js的介紹”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

獲得一個C++游戲引擎運行Javascript，并使用WebGL來渲染，這是一個重大的突破，這個突破很大程度上歸功于Mozilla開發的工具鏈，才使得這一切變得可能。

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

什么是 Asm.js?

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

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

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

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

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     }

從技術上說，這是Javascript代碼，但是我們已經看到這段代碼一點都不像大多我們正常看到的操作DOM的Javascript。通過看這段代碼，我們可以發現幾件事：

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

• 所有外部數據在一個稱為堆的對象中存儲并被引用。堆在本質上是一個大數組(應當是一個在性能上高度優化的類型化數組)。所有的數據在這個數組中存儲——有效的替代了全局變量，結構體，閉包和其他形式的數據存儲。

• 當訪問和賦值變量時，結果被統一的強制轉換成一種特定類型。例如f = e | 0;給變量f賦值e，但它也確保了結果的類型是一個整數（|0把值轉換成整數，確保了這點）。這也發生在浮點型上——注意0.0和g[...] = +（...)的使用.

• 看看從數據結構中寫入讀出的值，用c表示的數據結構好像是一個Int32Array（存儲32位整數，因為這些值總是通過|0被轉換成或者轉換自一個整數），g好像是一個Float32Array（存儲32位浮點數，因為這些值總是通過包裹上+(...)轉換成浮點數）。

這么做以后，結果就是高度優化，并且可以直接從Asm.js語法轉換成匯編，而不必像常常要對Javascript做的那樣解釋它。它有效地削減了使像Javascript之類的的動態語言緩慢的東西：例如需要垃圾收集器和動態類型。

作為一個更容易理解的Asm.js代碼示例，我們來看看一個Asm.js規范上的例子：

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 };     }

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

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

該模塊剩下的被分成了三部分：變量聲明，函數聲明，還有***把函數導出暴露給用戶的一個對象。

導出是尤其要去理解的一個重點，因為它既讓所有模塊中的代碼被當成Asm.js處理，又使得代碼可以被其他普通的Javascript代碼使用。因此，在理論上你可以通過使用上面的DiagModule代碼，寫下如下代碼：

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

這帶來了一個Asm.js模塊DiagModule，它被Javascript解釋器特殊處理，但仍然能夠被其他Javascript代碼使用（我們仍能訪問并使用它，比如一個單擊事件處理程序）。

性能如何？

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

基于目前***測試，可以看出Asm.js在性能上有很大的提升。考慮到現在僅僅是Asm.js的最初開發階段，相信在不久的將來就會有更大的性能提升。

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

使用情況

需要說明的是現在幾乎所有基于Asm.js的應用都是C/C++應用使用Emscripten編譯的。可以肯定的說，在不久的將來，這類即將運行在 Asm.js的應用，將會從可以在瀏覽器中運行這一可移植性中獲益，但是在支持javascript方面有一定復雜度的應用將不可行。

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

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

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

• 支持javascript的SQLite，能夠在Node.js中運行。

• NaCL：一個網絡加密解密的庫。

Asm.js支持

就像之前提到的那樣，現在只有nightly版本的Firefox支持Asm.js的優化。

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

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

Asm.js與Web開發

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

為了能讓一般的開發者使用，需要一些更能讓人接受的中間語言。目前LLJS已經逐漸實現向Asm.js編譯了。需要注意的是，LLJS這樣的語言同樣與常規的Javascript有很大區別，會讓許多Javascript開發者感到困擾。即使是用LLJS這樣更加友好的語言，編寫Asm.js必須要對復雜的代碼進行優化，這恐怕只有資深開發者能夠勝任了。

就算有了LLJS或者別的語言來幫助我們編寫Asm.js，我們也沒有同樣性能優異的DOM可以使用。理想的環境應該是將LLJS與DOM一起編譯產生單一的可執行二進制文件。我還想不出這樣做性能會有多好，但是我想這么做！

與David Herman的問答

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

Asm.js的目標是什么？你們這個計劃的目標人群是哪些？

創建一個利于用戶訪問版本的Asm.js是否合理呢，比如一個更新版本的LLJS？或者是擴展目前項目的范圍，而不僅僅是一個編譯器的目標語言？

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

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

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

Asm.js的功能還會變動么？隨著越來越多編譯器開發者的加入，你贊不贊同加入更多的附加功能（比如更高級的數據結構）？

可以做出JavaScript-to-Asm.js轉譯器么，它會被做出來么?

現在Asm.js還不能進行與有關DOM和瀏覽器的操作。創建一個Emscripten到Ams.js版本的DOM（就像DOM.js）如何？

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

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

到此，關于“Javascript編譯目標Asm.js的介紹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！