Mozilla的最新版Firefox浏览器beta版本Firefox Nightly使WebAssembly二进制格式和JavaScript之间的调用更快，因此更容易组合这两种语言。 
 WebAssembly可以作为JavaScript在Web开发中的伴侣，承担性能密集型任务。 但是到目前为止，两种语言之间缓慢的函数调用阻碍了两者的结合。 
 [更深入： 如何开始使用WebAssembly 。 • WebAssembly的下一步是什么 。 • 8个使WebAssembly崭露头角的项目 •那么， WebAssembly的下一步究竟是什么？ | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ] 
 Firefox Nightly beta版使这些调用的运行速度比非嵌入式JavaScript到JavaScript函数调用快。 调用已从JavaScript优化为WebAssembly，反之亦然。 Mozilla还提高了从WebAssembly到内置组件的调用速度，内置组件是诸如Math.random之类的浏览器提供的功能。 
 对来自WebAssembly和JavaScript的调用的优化可分为两类： 

 通过消除组织堆栈框架的不必要工作来减少簿记。 
 通过采用功能之间的最直接路径来绕过中介。 

 Mozilla在提高WebAssembly速度方面的最新努力是在先前强调吞吐量和缩短加载时间的努力之前。 未来的计划要求将WebAssembly嵌入JavaScript。 当前，从JavaScript到WebAssembly的优化调用不会比从JavaScript到JavaScript的调用更快的唯一情况是当JavaScript内联函数时。 内联为函数提供了一种快捷方式，可以反复调用同一函数。 
 Mozilla希望其他浏览器也能效仿，并提高WebAssembly与JavaScript之间的通话速度。 苹果，谷歌和微软都参与了WebAssembly的开发。 

 在哪里下载Firefox Nightly 
 您可以从mozilla.org 下载Firefox Nightly 。 




From: https://www.infoworld.com/article/3313656/webassembly-javascript-links-get-faster-in-firefox.html

我正在使用webassembly,到目前为止,我能够管理emscripten将我的测试c项目编译为wasm文件
em提供了2个文件,即
mainTest.js mainTest.wasm
当我在我的html页面加载mainTest.js然后我得到一个名为的Java脚本对象
“模块”.
我确实找到了如何从javascript调用c / wasm方法,例如：
var myTestInteger = Module._callMyTestMethod();
并从中读取字符串
Module.wasmMemory.buffer
,但我不明白如何从C代码调用javascript.
即我希望能够像这样做：
#ifdef __cplusplus
extern "C" {
#endif
extern void testExternJSMethod();
int main()
{
cout << " Hello From my Test1 !" << endl;
testExternJSMethod();
return 0;
}
int EMSCRIPTEN_KEEPALIVE callMyTestMethod(){
return 26;
}
#ifdef __cplusplus
}
#endif
我正在加载另一个名为utils.js的js文件中的my js方法testExternMethod
function testExternMethod() {
console.log("Hello from testExternMethod!" + )
}
在这里我想从c调用JavaScript testExternJSMethod.
当我在Firefox中运行页面时,在调试器控制台中获得“-1”.
那么我在这种情况下缺少什么？不幸的是,Mozilla文档只给出了那些S表达式而不是C表示的例子.
我在例子中缺少什么？即在c中我用extern关键字定义了方法,即
extern void testExternJSMethod();
但我觉得这不是我必须做的全部.
我相信我应该以某种方式将该java脚本方法以某种方式链接到模块,但我不知道如何.
Module.asm给了我出口.哪种方法调用应该给我进口？因为我相信这个_testExternJSMethod()应​​该在某些导入方法中,我无法弄清楚如何实现它.
解决方法:
我不完全确定您的用例,但是您缺少能够使用函数testExternalJSMethod的重要步骤.你有两个选择：
选项1  – 图书馆
1  – 用c / c定义你的功能.
extern void testExternalJSMethod();
2  – 创建一个名为myLibrary.js的文件
3  – 需要使用以下代码将JS函数添加到库文件中的LibraryManager：
function makeAlert(text) {
alert(text);
}
if (typeof mergeInto !== 'undefined') mergeInto(LibraryManager.library, {
testExternalJSMethod: function() {
makeAlert("Hello world");
}
});
4  – 如果testExternalJSMethod依赖于其自身范围之外的任何内容(例如,上面的makeAlert),请确保在html页面中包含该脚本
5  – 在emcc命令中添加选项–js-library,并在myLibrary.js的相对路径后立即添加
emcc ... --js-library myLibrary.js
选项2  – 传递指针
1  – 在c / c中定义你的javascript函数类型
typedef void testExternalJSMethod()
2  – 无论你想在哪里使用这个函数,接受一个int参数,它将是函数指针,并将指针强制转换为你的函数
void passFnPointer(int ptr) {
((testExternalJSMethod*)ptr)();
}
3  – 使用emscripten的addFunction()并存储其返回值(指针在c / c中)
var fnPtr = Module.addFunction(function () {
alert("You called testExternalJSMethod");
});
4  – 使用步骤3中存储的指针值传递给我们的函数passFnPointer
var passFnPointer = Module.cwrap('passFnPointer', 'undefined', ['number']);
passFnPointer(fnPtr);
5  – 向emcc命令添加选项-s RESERVED_FUNCTION_POINTERS
emcc ... -s RESERVED_FUNCTION_POINTERS=10
结论
在完成其中一个选项中的所有步骤之后,您将能够通过c / c调用testExternalJSMethod()而无需使用emscripten_run_script()或EM_ASM()
标签：javascript,c11,emscripten,webassembly
来源： https://codeday.me/bug/20190715/1464914.html

                    

                    

                    
                    
                    
说明：本系列文章转载自《C/C++面向wasm编程——Emscripten工程实践》系列教程（名字太长，转载以《WebAssembly编程实践》为题）。
本教程原文地址：https://3dgen.cn/cppwasm-book/。
作者：丁尔男，Github @3dgen
作者：柴树杉，Github @chai2010，Twitter @chaishushan
项目地址：https://github.com/3dgen/cppwasm-book
----------------------------------------------------------------------------------
2.1 JavaScript调用C函数
一个具备实用功能的WebAssembly模块，必然提供了供外部调用的函数接口。在1.3中，我们展示了通过Module._main()调用C/C++入口main()函数的方法——假如main()函数存在的话。本节将介绍普通C函数导出，供JavaScript使用的方法。
2.1.1 定义函数导出宏
为了方便函数导出，我们需要先定义一个函数导出宏，该宏需要完成以下功能：
使用C风格符号修饰。我们知道，由于引入了多态、重载、模板等特性，C++语言环境下的符号修饰策略（既函数、变量在最终编译成果中的名字的生成规则）非常复杂，并且不同的C++编译器有着各自的符号修饰策略，如果不做额外处理，我们在C++中创建函数的时候，很难预知它在最终编译成果中的名字——这与C语言环境完全不同。因此当我们试图将main()函数之外的全局函数导出至JavaScript时，必须强制使用C风格的符号修饰，以保持函数名称在C/C++环境以及JavaScript环境中有统一的对应规则。
避免函数因为缺乏引用而导致在编译时被优化器删除。如果某个导出函数仅供JavaScript调用，而在C/C++环境中从未被使用，开启某些优化选项（比如-O2以上）时，函数有可能被编译器优化删除，因此需要提前告知编译器：该函数必须保留，不能删除，不能改名。
为了保持足够的兼容性，宏需要根据不同的环境——原生NativeCode环境与Emscripten环境、纯C环境与C++环境等——自动切换合适的行为。
info main()作为C/C++程序的主入口，其符号修饰策略是特殊的，因此即使在C++中不作特殊约束，其最终的符号仍然是_main()，无需按上述第1点进行处理。
tips 正如序中提到的，编写既可以在C/C++原生NativeCode环境中使用、又可以在Emscripten环境中使用的“对编译目标不敏感”的模块是本书坚持的理念，上述第3点要求正是该理念的产物。后续章节同理，不再赘述。
为了满足上述要求，定义EM_PORT_API宏如下：
#ifndef EM_PORT_API#    if defined(__EMSCRIPTEN__)#        include <emscripten.h>#        if defined(__cplusplus)#            define EM_PORT_API(rettype) extern "C" rettype EMSCRIPTEN_KEEPALIVE#        else#            define EM_PORT_API(rettype) rettype EMSCRIPTEN_KEEPALIVE#        endif#    else#        if defined(__cplusplus)#            define EM_PORT_API(rettype) extern "C" rettype#        else#            define EM_PORT_API(rettype) rettype#        endif#    endif#endif
在上述代码中：
__EMSCRIPTEN__宏用于探测是否是Emscripten环境
__cplusplus用于探测是否C++环境
EMSCRIPTEN_KEEPALIVE是Emscripten特有的宏，用于告知编译器后续函数在优化时必须保留，并且该函数将被导出至JavaScript
使用EM_PORT_API定义函数声明：
EM_PORT_API(int) Func(int param);
在Emscripten中最终将被展开如下：
#include <emscripten.h>extern "C" int EMSCRIPTEN_KEEPALIVE Func(int param);
2.1.2 在JavaScript中调用C导出函数
根据1.3中对胶水代码的分析，我们知道JavaScript环境中的Module对象已经封装了C环境导出的函数，封装方法的名字是下划线_加上C环境的函数名。例如我们创建C代码文件export1.cc如下：
//export1.cc#ifndef EM_PORT_API#    if defined(__EMSCRIPTEN__)#        include <emscripten.h>#        if defined(__cplusplus)#            define EM_PORT_API(rettype) extern "C" rettype EMSCRIPTEN_KEEPALIVE#        else#            define EM_PORT_API(rettype) rettype EMSCRIPTEN_KEEPALIVE#        endif#    else#        if defined(__cplusplus)#            define EM_PORT_API(rettype) extern "C" rettype#        else#            define EM_PORT_API(rettype) rettype#        endif#    endif#endif#include <stdio.h>EM_PORT_API(int) show_me_the_answer() {    return 42;
}

EM_PORT_API(float) add(float a, float b) {    return a + b;
}
使用emcc命令将其编译为wasm：
emcc export1.cc -o export1.js
创建页面export1.html如下：
<!doctype html><html>
  <head>
    <meta charset="utf-8">
    <title>Emscripten:Export1</title>
  </head>
  <body>
    <script>
    Module = {};
    Module.onRuntimeInitialized = function() {      console.log(Module._show_me_the_answer());      console.log(Module._add(12, 1.0));
    }    </script>
    <script src="export1.js"></script>
  </body></html>
发布并使用浏览器打开上述网页后，我们将在开发者面板的控制台得到以下输出：
42
13
需要注意的是，JavaScript是弱类型语言，在调用函数时，并不要求调用方与被调用方的签名一致，这与C/C++有本质性的不同。例如在C环境中，以下调用都不符合语法：
int k = show_me_the_answer(10);float f1 = add(12, 12, 12);float f2 = add(12);
但是在JavaScript环境中，如果给出的参数个数多于函数形参个数，多余的参数被舍弃（从左至右）；如果参数个数少于形参个数，不足的参数会自动以undefined填充。因此下列JavaScript调用都是合法的：
      console.log(Module._show_me_the_answer(10));      console.log(Module._add(2, 3, 4));      console.log(Module._add(12));
其输出为：
42
5
NaN
注意第三个调用，虽然语法上是合法的，但是由于缺少的参数以undefined填充而不是0值填充，因此函数返回结果为NaN。
tips 注意我们在页面中使用了1.3中介绍的onRuntimeInitialized回调的方式注入测试代码。为了省略无关信息方便阅读，在不产生歧义的情况下后续章节将不再重复列出回调注入的完整代码以及EM_PORT_API宏的定义。
WebAssembly编程实践(1.4)胶水代码初探
WebAssembly编程实践(1.3)胶水代码初探
WebAssembly编程实践(1.2)Hello World!
WebAssembly编程实践(1.1)安装Emscripten
欢迎关注玄说前端公众号
QQ群：850038125
                

在之前的教程中，我们讨论了如何从 Web 浏览器中的 JavaScript 应用程序访问 WebAssembly 函数。
然而，或许你已经注意到，服务器端的 WebAssembly 有很多很好的用例，尤其是人工智能、区块链和大数据应用方向。
在这个例子中，将展示如何将 Rust 中编写的 WebAssembly 函数集成到服务器上的 node.js 应用程序中。
我们以微服务的方式提供 WebAssembly 函数。
演示应用程序的结构如下：
主机应用程序是一个用 JavaScript 编写的 node.js web 应用程序，调用 WebAssembly 函数
WebAssembly 字节码程序是用 Rust 编写的，由 node.js 的 web 应用程序调用。
设置
与前面的教程一样，我们使用 wasm-pack 工具编译 Rust 源代码并生成相应的 JavaScript 模块。这种模块使得在 JavaScript 和 Rust 函数之间传递复杂的动态数据变得非常容易。想要深入了解的同学，可以阅读《WebAssembly 中的字符串》。
接下来，按照下面的步骤安装Rust和wasm-pack 工具。
# Install Rust
$ sudo apt-get update
$ sudo apt-get -y upgrade
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ source $HOME/.cargo/env
# Install wasm-pack tools
$ curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
Rust 写的 WebAssembly 程序
在这个示例中，Rust 程序在“hello” 后面追加输入字符串。
创建一个新的cargo项目。
注意：由于这个程序是从主机应用程序调用的，而不是作为独立的可执行文件运行，因此我们将创建一个 hello 项目。
···
$ cargo new --lib hello
$ cd hello
编辑 Cargo.toml 文件添加 [lib] 部分. 它告诉编译器在哪能找到库的源代码，以及如何生成字节码输出。同时，我们也需要在这添加 wasm-bindgen 的依赖项。这是使用 wasm-pack的用途，生成绑定 JavaScript 的 rust webassembly程序
[lib]
name = "hello_lib"
path = "src/lib.rs"
crate-type =["cdylib"]
[dependencies]
wasm-bindgen = "0.2.50"
下面是Rust 程序 src/lib.rs 的内容。实际上，我们可以在这个库文件中定义多个外部函数，并且所有这些函数都可以通过 WebAssembly 在主机 JavaScript 应用程序中使用。
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn say(s: String) -> String {
let r = String::from("hello ");
return r + &s;
}
接下来，您可以将 Rust 源代码编译成 WebAssembly 字节码，并为 node.js 主机环境生成相应的 JavaScript 模块。
$ wasm-pack build --target nodejs
结果是以下三个文件.
.wasm 文件是 WebAssembly 字节码程序;
.js 文件用于 JavaScript 模块;
Pkg / hello lib bg. wasm
Pkg / hello lib bg. js
Pkg / hello lib.js
Node.Js 主机应用程序
接下来，让我们为 node.js web 应用程序创建一个节点文件夹，复制生成的 JavaScript 模块文件。
$mkdir node
$cp pkg / hello lib bg. wasm node /
$cp pkg / hello lib bg. js node /
$cp pkg / hello lib.js node /
使用生成的 hello_lib.js， 在 JavaScript 中调用 WebAssembly 函数是非常容易的。
下面是节点应用程序 app.js。 它只是从生成的模块中导入 say () 函数。 节点应用程序从传入的 httpget 请求中获取 name 参数，并用“ hello name”进行响应。
const { say } = require('./hello_lib.js');
const http = require('http');
const url = require('url');
const hostname = '127.0.0.1';
const port = 8080;
const server = http.createServer((req, res) => {
const queryObject = url.parse(req.url,true).query;
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end(say(queryObject['name']));
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
按照以下方式启动 node.js 应用服务器。
$ node app.js
Server running at http://127.0.0.1:8080/
然后，就可以测试了。
$ curl http://127.0.0.1:8080/?name=Wasm
hello Wasm
下一步是什么呢？
现在 Web 服务可以将计算量大、不安全和新颖的硬件访问任务转移到 WebAssembly 中。 我相信，将有更多用例将会出现。 敬请期待！