广发证券 郭力恒 - 《面向未来的原生化Web开发》

展开查看详情

1. JS WA 郭力恒 面向未来的原生化web开发 cutting edge frontend skills 2018.4.20

2.wasm 前世今生

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 }) } });

12.

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

15.wasm 开发

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

18.

19.浏览器运行环境 异步 受限的IO

20. 文件IO FILE *file = fopen("./file.txt", "rb"); while (!feof(file)) { char c = fgetc(file); if (c != EOF) { putchar(c); } } fclose(file);

21.FS API

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

28.C/C++ Rust Go

29. 是Mozilla发起的一个开源项目。 Rust 目标是构建高效,安全的系统级编程语言。