展开查看详情
1 . JS WA
郭力恒
面向未来的原生化web开发
cutting edge frontend skills
2018.4.20
3 .1995 年
前端网页时代
Javascript诞生 Brendan Eich
2008年V8诞生 即时编译JIT
前端 时代
App
...
4 . 两个问题
性能 移动设备，视频，游戏
单一语言
Typescript, Clojurescript, Coffeescript, Elem...
5 . 原生化技术
ActiveX，NPAPI
NaCl
6 . 2013 asmjs
function add(x, y) {
x = x|0;
y = y|0;
return (x + y)|0;
}
7 . 2015
0x00 0x61 0x73 0x6d 0x01 0x00 0x00
0x00 0x01 0x07 0x01 0x60 0x02 0x7f
0x7f 0x01 0x7f 0x03 0x02 0x01 0x00
0x07 0x07 0x01 0x03 0x61 0x64 0x64
0x00 0x00 0x0a 0x09 0x01 0x07 0x00
0x20 0x00 0x20 0x01 0x6a 0x0b
8 .(module
(func
(export "add")
(param $lhs i32)
(param $rhs i32)
(result i32)
(get_local $lhs)
(get_local $rhs)
(i32.add)))
9 .https://gliheng.github.io/rust-wasm/sdl2-mandelbrot
10 . WebAssembly.instantiate(bufferSource, importObject)
WebAssembly.instantiate(buffer, {})
.then(result => result.instance)
.then(mod => {
mod.exports.add(100, 1000);
});
WebAssembly.instantiateStreaming(fetch('app.wasm'), importObject)
11 .WebAssembly.instantiate(bufferSource, importObject)
WebAssembly.instantiate(bufferSource, {
constants: {
},
n: 9 数字
函数
console: {
log: function(arg) {
console.log(">>>", arg);
}
},
内存对象
js: {
mem: new WebAssembly.Memory({
initial:10, maximum:100
})
}
});
13 . let memory = new WebAssembly.Memory({
initial: 1024, maximum: 10240
});
js memory
wasm memroy
Data Heap Stack
let HEAP8 = new Int8Array(memory.buffer);
let HEAP16 = new Int16Array(memory.buffer);
let HEAP32 = new Int32Array(memory.buffer);
let HEAPU8 = new Uint8Array(memory.buffer);
let HEAPU16 = new Uint16Array(memory.buffer);
let HEAPU32 = new Uint32Array(memory.buffer);
let HEAPF32 = new Float32Array(memory.buffer);
let HEAPF64 = new Float64Array(memory.buffer);
14 . js wasm
C
C++ +
Rust Compiler wasm js
16 . An LLVM-to-JavaScript Compiler
Compiler Emscripten
C++
LLVM ASMJS WASM + js
RUST
Binaryen
17 .#include <stdio.h>
int main()
{
printf("hello world!");
return 0;
}
emcc hello_world.c
-o hello_world.html
-s WASM=1
20 . 文件IO
FILE *file = fopen("./file.txt", "rb");
while (!feof(file)) {
char c = fgetc(file);
if (c != EOF) {
putchar(c);
}
}
fclose(file);
22 .emcc --preload-file ./assets/
23 . 网络IO
BSD sockets API (WebSocket backend)
listen failed: Not supported
emscripten_async_wget
emscripten_fetch
24 . 图形界面
DOM
Canvas
OpenGL ES ，SDL，游戏引擎
Canvas App, Canvas Game
25 . 事件循环
while( true ) {
while (SDL_PollEvent(&e)) {
}
}
26 . emscripten_set_main_loop
emscripten_pause_main_loop
emscripten_cancel_main_loop
int main(int argc, char *argv[])
{
emscripten_set_main_loop(iter, 0, 1);
}
void iter()
{
SDL_Event e;
while (SDL_PollEvent(&e)) {
}
}
requestAnimationFrame
27 .> emcc --show-ports
使用C库
Available ports:
zlib (USE_ZLIB=1; zlib license)
libpng (USE_LIBPNG=1; zlib license)
SDL2 (USE_SDL=2; zlib license)
SDL2_image (USE_SDL_IMAGE=2; zlib license)
ogg (USE_OGG=1; zlib license)
vorbis (USE_VORBIS=1; zlib license)
bullet (USE_BULLET=1; zlib license)
freetype (USE_FREETYPE=1; freetype license)
SDL2_ttf (USE_SDL_TTF=2; zlib license)
SDL2_net (zlib license)
Binaryen (Apache 2.0 license)
cocos2d
emcc -s USE_SDL=2 -s USE_SDL_IMAGE=2 main.cpp
29 . 是Mozilla发起的一个开源项目。
Rust
目标是构建高效，安全的系统级编程语言。
热门城市
