JavaScript运行c语言,让C代码在浏览器中运行——JavaScript惨遭抛弃？

转载自:www.blog.csdn.net/sinat_32582203/article/details/73355211

WebAssembly作为一种新兴的Web技术，相关的资料和社区还不够丰富，但其为web开发提供了一种崭新的思路和工作方式，未来是很有可能大放光彩的。

使用WebAssembly，我们可以在浏览器中运行一些高性能、低级别的编程语言，可用它将大型的C和C++代码库比如游戏、物理引擎甚至是桌面应用程序导入Web平台。

截至目前为止，我们已经可以在Chrome、Firefox中使用WebAssembly，Edge和Safari对它的支持也基本完成。这意味着很快，就能在所有流行的浏览器中运行wasm了。

在这篇文章中，我们将会演示如何将简单的C代码编译为wasm，并将其包含在网页中。在此之前，我们先来直观的了解下WebAssembly是如何工作的。

WebAssembly是如何工作的？

这里不涉及过多技术性的问题。我们知道，在今天的浏览器中，JavaScript是在虚拟机(VM)中执行的，该虚拟机能够最大化地优化代码并压榨每一丝的性能，这也使得JavaScript称为速度最快的动态语言之一。但尽管如此，它还是无法与原生的C/C++代码相媲美。所以，WebAssembly就出现了。

Wasm同样在JavaScript虚拟机中运行，但是它表现得更好。两者可以自由交互、互不排斥，这样你就同时拥有了两者最大的优势——JavaScript巨大的生态系统和有好的语法，WebAssembly接近原生的表现性能。

大多数程序员会选择使用C语言来编写WebAssembly模块，并将其编译成.wasm文件。这些.wasm文件并不能直接被浏览器识别，所以它们需要一种称为JavaScript胶接代码(glue code，用于连接相互不兼容的软件组件，详见：http://whatis.techtarget.com/definition/glue-code)的东西来加载。

随着未来WebAssembly框架和本地wasm模块支持的发展，这一过程可能会有所缩短。

开发前准备

编写WebAssembly需要不少的工具，但作为一个程序员，下面的工具你应该大部分都已经有了。

1、支持WebAssembly的浏览器，新版的Chrome或者Firefox均可(可以在此查看各个浏览器对某项内容的支持情况：http://caniuse.com/#feat=wasm)。

2、C到WebAssembly的编译器，推荐使用Emscripten(https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html)，安装这个工具费时费力费空间，但没办法，这是目前为止最好的选择，请仔细阅读安装说明，需占用约1GB的硬盘空间。

3、一个C编译器/开发环境，比如Linux下的GCC，OS X下的Xcode，Windows下的Visual Studio。

4、一个简单的本地web服务器，Linux/OS X下使用

python -m SimpleHTTPServer 9000

命令即可，Windows下可安装IIS服务。

一、编写C代码

下面我们编写一个非常简单的C语言例子，它将会返回1-6的随机数，在你所使用的工作目录下，创建一个dice-roll.c文件。

#include#include#include#include// 一旦WASM模块被加载，main()中的代码就会执行intmain(int argc, char ** argv){printf("WebAssembly module loaded\n");}// 返回1-6之间的一随机数int EMSCRIPTEN_KEEPALIVE roll_dice(){srand ( time(NULL) );return rand() % 6 + 1;}

当我们将其编译为wasm并且在浏览器中加载时，

main

函数会自动执行，其中的

printf

将会被翻译成

console.log

。

我们想要

roll_dice

函数能够在JavaScript中随时调用，为此，我们需要在函数名前添加

EMSCRIPTEN_KEEPALIVE

标记以告诉Emscripten我们的意图。

二、将C编译为WebAssembly

现在我们已经有了C代码，接下来需要将它编译成wasm，不仅如此，我们还需要生成相应的JavaScript胶接代码以便能够真正运行起来。

这里我们必须使用Emscripten编译器，你会发现有大量的命令行参数和编译方法可选，经过实践，我们找到了下面这个最友好最实用的组合：

emcc dice-roll.c -s WASM=1 -O3 -o index.js

各个参数含义如下：

emcc——代表Emscripten编译器；dice-roll.c——包含C代码的文件；-s WASM=1——指定使用WebAssembly；-O3——代码优化级别，3已经是很高的级别了；-o index.js——指定生成包含wasm模块所需的全部胶接代码的JS文件；

需要注意的是，尽管上面的emcc选项能够很好地应对我们这个例子，但在更复杂的情况下，好需要使用不同的方法，可查看官方文档了解更多内容：http://kripken.github.io/emscripten-site/docs/tools_reference/emcc.html#emccdoc。

三、在浏览器中加载WebAssembly代码

现在我们将回到熟悉的web开发领域，在当前文件夹创建index.html文件，引入相关的js文件与CSS文件。

WebAssembly 示例