becavalier/book-diso-webassembly

A book related repository which name is 《深入浅出 WebAssembly》

About Me

Please refer here for my blog articles, mostly are written in Chinese though :)

Main Projects:

• cgc: an experimental Garbage Collector for C language.
• cpplax: the C++ implementation for language Lax.
• twvm: an experimental WebAssembly virtual machine.
• brainfuck-jit-interpreter: a handwritten Brainfuck JIT interpreter, mainly used for demonstration.
• os-paw: a tool for diagnosing and playing with OS.
• vhd-reader: a tool for reading the meta information of a VHD file.
• Zoomage.js: an open-source library for image zooming by touch gestures on HTML5 pages.
• tiny-http-echo-server: a mini HTTP Echo Server, just for educational purposes.
• shdb: a simple and lightweight key-value pair DB for shell programming.
• universal-toolbox: a universal toolbox for developers, which is highly integrated, efficient, and simple.

book-diso-webassembly's Issues

p23 typo: lzay parsing

第P23页, 倒数第三行.

Lzay Parsing 应该为 Lazy Parsing

p145 'br_if指令' 表述歧义

在第145页的'br_if指令'小结

br_if指令在执行时，会首先从当前数据栈容器中取出位于栈顶的元素并进行值判断。
若该元素的值不为0，则会进行相应的中断跳转；
-否则会继续执行该指令段后面的指令
+否则会继续执行该指令段内br_if后面的指令

感觉原句存在歧义

p25 node -trace_parse app.js

请问你的node是哪个版本？这个参数在我的11.13.0是无效的

一本不错的书

没想到作者竟然是女装大佬

另外书中处处透露着秀技术的气息

第七章7.3.4 touch事件Demo和7.4.2事件Demo无法运行

emcc版本号：(emscripten 1.38.30 : 1.38.30)
错误：
使用书上提示命令

# 7.3.4
 emcc html5_touch.cc --bind -s WASM=1 -o html5_touch.html
# 7.4.2
emcc sdl.cc -s WASM=1 -s FORCE_FILESYSTEM=1 -s USE_SDL=2 --preload-file hello_sdl.bmp -o sdl.html

行html时提示如下错误，

sdl.html:1246 Rules for selecting event targets in HTML5 API are changing: instead of using document.getElementById() that only can refer to elements by their DOM ID, new event target selection mechanism uses the more flexible function document.querySelector() that can look up element names, classes, and complex CSS selectors. Build with -s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=1 to change to the new lookup rules. See emscripten-core/emscripten#7977 for more details.

在emscripten-core/emscripten#7977 查看需要添加-s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=1参数，添加后，会报\

sdl.html:1246 exception thrown: SyntaxError: Failed to execute 'querySelector' on 'Document': The provided selector is empty.,Error: Failed to execute 'querySelector' on 'Document': The provided selector is empty.
at __findEventTarget (http://localhost:8081/sdl/sdl.js:6853:101)
at __findCanvasEventTarget (http://localhost:8081/sdl/sdl.js:6859:56)
at _emscripten_set_canvas_element_size (http://localhost:8081/sdl/sdl.js:6879:20)
at wasm-function[738]:271
at wasm-function[1025]:3063
at wasm-function[280]:128
at wasm-function[283]:49
at Object.Module._main (http://localhost:8081/sdl/sdl.js:9790:33)
at Object.callMain (http://localhost:8081/sdl/sdl.js:10086:30)
at doRun (http://localhost:8081/sdl/sdl.js:10144:60)
printErr @ sdl.html:1246
callMain @ sdl.js:10106
doRun @ sdl.js:10144
(anonymous) @ sdl.js:10155
setTimeout (async)
run @ sdl.js:10151
runCaller @ sdl.js:10063
removeRunDependency @ sdl.js:1694
receiveInstance @ sdl.js:1788
receiveInstantiatedSource @ sdl.js:1815
Promise.then (async)
createWasm @ sdl.js:1831
Module.asm @ sdl.js:1864
(anonymous) @ sdl.js:9661
17:11:54.241 sdl.js:218 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': The provided selector is empty.
at __findEventTarget (http://localhost:8081/sdl/sdl.js:6853:101)
at __findCanvasEventTarget (http://localhost:8081/sdl/sdl.js:6859:56)
at _emscripten_set_canvas_element_size (http://localhost:8081/sdl/sdl.js:6879:20)
at wasm-function[738]:271
at wasm-function[1025]:3063
at wasm-function[280]:128
at wasm-function[283]:49
at Object.Module._main (http://localhost:8081/sdl/sdl.js:9790:33)
at Object.callMain (http://localhost:8081/sdl/sdl.js:10086:30)
at doRun (http://localhost:8081/sdl/sdl.js:10144:60)

暂时没找到可解决的方案

test(7).js:2404 LinkError: WebAssembly.instantiate(): table import 25 is smaller than initial 30, got 14

p135，typo，lable

这一页有好几个地方都把label写成了lable。

错误：编译参数错误

P352，P355，关于ccal的编译参数
-s EXPORTED_RUNTIME_METHODS='["ccall"]'
不应该有单引号，正确的如下：
-s EXPORTED_RUNTIME_METHODS=["ccall"]

对于data段的描述存在疑惑

书中第181页，举例说“i32.const 16 指出该内存段需要填充的数据偏移量为16个32位整数的长度，即64字节。“

想请问一下，这里是指偏移为64个字节，还是初始化的数据占64个字节，也就是offset和length的区别。

个人觉得对于data段讲得不是很清楚，从data段的功能而言——初始化内存，是既需要offset也需要length的，并且数据的存储是否遵循小端序等等也没有提及，希望作者能给一个例子，描述得更清楚一些~

非常感谢！

关于Webassembly的性能

你好，请教一下，如果我有一个计算量比较密集的包，已经用TS实现了，现在期望能有更高的性能，转成Webassembly是合理的吗？

我现在打算重构这个包，有以下几个想法：

1. 用一门后端语言写，如Go / Rust，但是不确定是否合理，担心编译出来之后的性能反倒不如原生JS。

2. 用TS写，通过 AssemblyScript 转成 wasm，但我不知道AssemblyScript是否成熟了？因为我记得一年多前还有人评价这个项目还只是个玩具。

3. 还是老办法，用TS写转成JS。

所以，用JS写出来的代码 跟 用其他编程语言转的wasm相比，谁的性能更高？

谢谢！

关于第15页最后两行产生式的疑问

原文是

E -> d|Epd
S -> ve(d|Epd)

如果写成

E -> d|Epd
S -> veE

岂不是更简洁？为什么要多展开一层呢？

在下才疏学浅，请航大指教😯

test(7).js:1267 Uncaught RangeError: WebAssembly.Memory(): could not allocate memory

用一个dll文件和一个c文件编译的wasm文件和js文件，在生成的胶水代码创建WebAssembly.Memory()报错

请问对于编库产生的wasm文件如何调用

emconfigure cmake .. -G "NMake Makefiles" 生成Makefile
emmake nmake 生成js文件和wasm文件

如何能像emcc编译时一样添加ccall方法来调用接口

或者有无解决方式例子，万分感谢

run WebAssembly Standalone type report TypeError

参照书中第5章5.2.1，构建Standalone类型的 wasm，在火狐和google浏览器中运行生成的html文件，报 TypeError: exportFuncAdd is not a function。

但是直接使用你在git上提供的 html 和 wasm，却能正常运行。书中的编译命令
emcc emscripten-standalone.cc -Os -s WASM=1 -o emscripten-standalone.js ，不知道是不是emcc 版本问题，还是编译方式需要调整？

我的emcc 版本为
emcc (Emscripten gcc/clang-like replacement) 1.38.31 (commit 55ad1c4502293cc0f6ce8d5a249c941eee604269)

[Emscripten] Use "-s MODULARIZE" to initialize module in an async style.

It seems like the latest Emscripten toolchain has a decision to remove the "--post-js" option, here we can use "-s MODULARIZE" to initialize module as a replacement. FYI:

modularize.cc

#include <emscripten.h>
#include <iostream>

using namespace std;

int main (int argc, char **argv) {
  cout << "Hello, Emscripten!" << endl;
  return 0;
}

extern "C" int EMSCRIPTEN_KEEPALIVE add (int x, int y) {
  return x + y;
}

modularize.html (generated by "emcc", need to revise)

...
<script async type="text/javascript" src="module.js"></script>
<script>
  window.onload = function() {
    MyModule().then(function(Module) {
      console.log(Module['asm']['_add'](1, 2));
    });
  }
</script>
...

CMD:

sudo emcc modularize.cc -s WASM=1 -o modularize.html -O3 -s MODULARIZE=1 -s 'EXPORT_NAME="MyModule"'

*BTW, we can also use --pre-js param to append JavaScript code into the resulting script file.