摘要：運(yùn)行時(shí)環(huán)境與大多數(shù)應(yīng)用程序所期望的環(huán)境不同。不過(guò)程序是要手動(dòng)交換緩沖區(qū)的。第一個(gè)主題介紹代碼可移植性與限制第二個(gè)主題介紹的運(yùn)行時(shí)環(huán)境第三個(gè)主題第一篇文章介紹連接和第三個(gè)主題第二篇文章介紹第四個(gè)主題介紹文件和文件系統(tǒng)第六個(gè)主題介紹如何調(diào)試代碼

翻譯：云荒杯傾
本文是Emscripten-WebAssembly專欄系列文章之一，更多文章請(qǐng)查看專欄。
也可以去作者的博客閱讀文章。

Emscripten運(yùn)行時(shí)環(huán)境與大多數(shù)C/C++應(yīng)用程序所期望的環(huán)境不同。Emscripten努力抽象和減輕這些差異，因此在一般的代碼中，可以用很少或沒(méi)有更改來(lái)編譯。

本文描述了一些差異和由此產(chǎn)生的API限制，并概述了您可能需要對(duì)C/C++代碼做出的一些更改。

Emscripten為瀏覽器環(huán)境實(shí)現(xiàn)了簡(jiǎn)單的DirectMedia Layer API(SDL)，它提供了對(duì)音頻、鍵盤、鼠標(biāo)、操縱桿和圖形硬件的底層訪問(wèn)。使用了SDL的應(yīng)用程序通常不需要為了在瀏覽器中運(yùn)行做輸入/輸出方面的更改。

不過(guò)，我們對(duì)glut, glfw, glew 和 xlib等庫(kù)有一些支持上的限制。

不使用SDL或其他api的應(yīng)用程序可以使用Emscripten特有的API來(lái)輸入和輸出，他們是:

html5.h，它定義了Emscripten底層膠水綁定以使得本地代碼可以與HTML5事件進(jìn)行交互，包括訪問(wèn)鍵盤、鼠標(biāo)、滾輪、設(shè)備方向、電池級(jí)別、振動(dòng)等。

多媒體和圖形API，包括OpenGL和EGL。

很多C/C++代碼使用libc和libcxx中的同步文件系統(tǒng)APIs來(lái)訪問(wèn)本地文件系統(tǒng)中的代碼。這是有問(wèn)題的，因?yàn)闉g覽器是不會(huì)讓代碼直接訪問(wèn)主機(jī)系統(tǒng)上的文件的，而且JavaScript只支持異步文件訪問(wèn)（在web worker之外）。

Emscripten 提供了libc和libcxx的一種實(shí)現(xiàn)，并且提供了一個(gè)虛擬文件系統(tǒng)，這樣正常的C/C++代碼可以在不需要修改的情況下被編譯然后運(yùn)行。開(kāi)發(fā)者需要做的只是將文件集合在預(yù)加載階段打包放到這個(gè)虛擬文件系統(tǒng)。

NOTE:
文件數(shù)據(jù)在  “編譯期間”  打包，并在 “ 代碼運(yùn)行之前 ” 使用異步JavaScript api下載到虛擬文件系統(tǒng)中。
編譯后的代碼發(fā)出“文件”調(diào)用操作，實(shí)際上只是調(diào)用程序內(nèi)存。

默認(rèn)文件系統(tǒng)(MEMFS)在內(nèi)存存儲(chǔ)文件，如果文件做了修改但是頁(yè)面reload了，則修改的工作就白做了。如果想永久地存儲(chǔ)文件的更改，那么開(kāi)發(fā)人員可以安裝IDBFS文件系統(tǒng)，該系統(tǒng)允許在瀏覽器中持久化數(shù)據(jù)。
如果是在node.js中運(yùn)行代碼，開(kāi)發(fā)人員可以安裝NODEFS，它可以讓代碼直接訪問(wèn)本地文件系統(tǒng)。

Emscripten也有一個(gè)API支持同步文件獲取。

更多信息

瀏覽器事件模型使用合作模式的多任務(wù)處理——每個(gè)事件都有一個(gè)運(yùn)行的“turn”，然后必須將控制權(quán)返回給瀏覽器事件循環(huán)，這樣其他事件就可以處理了。HTML頁(yè)面掛起的一個(gè)常見(jiàn)原因是JavaScript未完成并且未將控制權(quán)返回給瀏覽器。

圖形化C++應(yīng)用程序通常在一個(gè)無(wú)限循環(huán)中運(yùn)行。在循環(huán)的每個(gè)迭代中，應(yīng)用程序執(zhí)行事件獲取、處理和渲染，接著是延遲(“等待”)以保持幀速率為常數(shù)。無(wú)限循環(huán)在瀏覽器環(huán)境中是一個(gè)問(wèn)題，因?yàn)闆](méi)有辦法把控制權(quán)返回到瀏覽器以執(zhí)行其他代碼。通常是在一段時(shí)間之后，瀏覽器將通知用戶該頁(yè)面被卡住并提供停止或關(guān)閉它的操作。

同樣，js中的webGL API也需要當(dāng)上一個(gè)事件完成之后，才開(kāi)始運(yùn)行的，然后自動(dòng)渲染并且交換緩沖區(qū)。不過(guò)OpenGL C++程序是要手動(dòng)交換緩沖區(qū)的。

這個(gè)問(wèn)題的標(biāo)準(zhǔn)解決方案是定義一個(gè)C函數(shù)，它執(zhí)行主循環(huán)的一次迭代(不包括“延遲”)。對(duì)于本機(jī)編譯，可以在無(wú)限循環(huán)中調(diào)用這個(gè)函數(shù)，從而有效地保持行為不變。

但在Emscripten編譯的代碼中，我們使用emscripten_set_main_loop()來(lái)獲得環(huán)境，從而以指定頻率調(diào)用相同的函數(shù)。迭代仍然是“無(wú)限的”，但現(xiàn)在可以在迭代之間運(yùn)行其他代碼，而且瀏覽器不會(huì)掛起。

下面給個(gè)示例：

int main() {
...
#ifdef __EMSCRIPTEN__
  // void emscripten_set_main_loop(em_callback_func func, int fps, int simulate_infinite_loop);
  emscripten_set_main_loop(one_iter, 60, 1);
#else
  while (1) {
    one_iter();
    // Delay to keep frame rate constant (using SDL)
    SDL_Delay(time_to_next_frame());
  }
#endif
}

// The "main loop" function.
void one_iter() {
  // process input
  // render to screen
}

NOTE:
當(dāng)你使用SDL時(shí)，您可能需要設(shè)置主循環(huán)。你也應(yīng)該注意:
1. As the page is shut, it will force a final direct call to the main loop, giving it a chance to
 notice the SDL_QUIT event. If you do not use a main loop, your app will close before you have
 had an opportunity to notice this event.
2.There are limitations to what you can do as the page shuts (in onunload). Some actions like
 showing alerts are banned by browsers at this point.

當(dāng)你的Emscripten編譯后程序已經(jīng)加載完畢后，就開(kāi)始預(yù)加載文件的階段。（可以通過(guò)emcc --preload-file設(shè)置要預(yù)加載的文件，也可以使用 FS.createPreloadedFile()手動(dòng)加載），在這個(gè)階段進(jìn)行文件安裝。

您可以使用addRunDependency()添加額外的操作，這是一個(gè)依賴項(xiàng)計(jì)數(shù)器，他要在編譯后的代碼運(yùn)行之前執(zhí)行。當(dāng)這些已經(jīng)完成，您可以調(diào)用removeRunDependency()來(lái)刪除已完成的依賴項(xiàng)。

一般來(lái)說(shuō)，不需要添加額外的操作，預(yù)加載幾乎能滿足你的需求。

當(dāng)滿足所有依賴項(xiàng)時(shí)，Emscripten將調(diào)用run()函數(shù)，run()函數(shù)將調(diào)用您的main()函數(shù)。main()函數(shù)應(yīng)該用于執(zhí)行初始化任務(wù)，并且通常main()要調(diào)用emscripten_set_main_loop()(如上所述)。然后主循環(huán)函數(shù)將按請(qǐng)求的頻率被調(diào)用。

您可以通過(guò)多種方式影響主循環(huán)的操作:

emscripten_push_main_loop_blocker()添加一個(gè)函數(shù)，該函數(shù)阻塞主循環(huán)，直到攔截器完成為止。舉個(gè)例子，當(dāng)你加載一個(gè)新的游戲級(jí)別的時(shí)候，這是有用的。一個(gè)游戲級(jí)別完成，你放一個(gè)一些阻塞塊來(lái)做解包文件，生成數(shù)據(jù)結(jié)構(gòu)

等操作。當(dāng)所有阻塞塊完成，主循環(huán)就可以重新開(kāi)始一個(gè)新等級(jí)的游戲。emscripten_push_main_loop_blocker()可以和emscripten_set_main_loop_expected_blockers()函數(shù)一起使用，這能讓用戶知道進(jìn)度。

emscripten_pause_main_loop()會(huì)暫停主循環(huán)，emscripten_resume_main_loop()重新開(kāi)始主循環(huán)。不推薦使用這兩個(gè)函數(shù)，因?yàn)樗麄兤鋵?shí)是blocker函數(shù)（上面那條）的更底層替代品。

*emscripten_async_call()讓你在特定間隔調(diào)用一個(gè)函數(shù)。這個(gè)是在模擬requestAnimationFrame（默認(rèn)）和setTimeout。

這里有很多其他方法來(lái)控制執(zhí)行

Emscripten中內(nèi)存模型是Typed Arrays Mode 2。他使用單種類型數(shù)組表達(dá)內(nèi)存，不過(guò)提供了多種類型視圖來(lái)讀取內(nèi)存。（HEAPU8、HEAPU16、HEAPU32等）。

NOTE:
Typed Arrays Mode 2是Fastcomp編譯器支持的唯一內(nèi)存模型，它是舊編譯器的默認(rèn)內(nèi)存模型。
與本項(xiàng)目所嘗試的其他內(nèi)存模型相比，它適用于許多的任意編譯后的代碼，而且速度相對(duì)較快。

這個(gè)模型以與普通C和C++相同的方式在內(nèi)存中l(wèi)ays out items，它和C/C++使用相同數(shù)量的內(nèi)存。

這個(gè)模型允許您使用違背 load-store consistency假設(shè)的代碼。由于不同的視圖顯示了相同的數(shù)據(jù)，所以您可以(比方說(shuō))編寫一個(gè)32位的整數(shù)，然后從中間讀取一個(gè)字節(jié)，它就像在大多數(shù)平臺(tái)上本地構(gòu)建C或C++那樣工作。

Emscripten代碼移植主題系列文章是emscripten中文站點(diǎn)的一部分內(nèi)容。
第一個(gè)主題介紹代碼可移植性與限制
第二個(gè)主題介紹Emscripten的運(yùn)行時(shí)環(huán)境
第三個(gè)主題第一篇文章介紹連接C++和JavaScript
第三個(gè)主題第二篇文章介紹embind
第四個(gè)主題介紹文件和文件系統(tǒng)
第六個(gè)主題介紹Emscripten如何調(diào)試代碼