Знакомство с WebAssembly
1 like366 views
Документ обсуждает WebAssembly (wasm), новый бинарный формат, который позволяет запускать код в браузере быстрее, чем JavaScript, и с минимальной конфигурацией. Он обеспечивает высокую производительность и безопасность, поддерживает кросс-платформенность и предназначен для удобства разработки. Появление WebAssembly в 2017 году ознаменовало отказ от других технологий, таких как PNaCl, и обеспечило поддержку в ведущих браузерах.
![18
var wasmCode = new Uint8Array(
[0,97,115,109,1,0,0,0,1,134,128,128,128,0,1,96,1,127,1,127,3,130,128,128,128,0,1,0,4,
132,128,128,128,0,1,112,0,0,5,131,128,128,128,0,1,0,1,6,129,128,128,128,0,0,7,144,128
,128,128,0,2,6,109,101,109,111,114,121,2,0,3,102,105,98,0,0,10,203,128,128,128,0,1,19
7,128,128,128,0,1,1,127,2,64,32,0,65,1,106,34,1,65,3,79,13,0,32,1,65,2,116,65,12,106,
40,2,0,15,11,2,64,32,0,65,1,72,13,0,32,0,65,127,106,16,0,32,0,65,126,106,16,0,106,15,
11,32,0,65,2,106,16,0,32,1,16,0,107,11,11,146,128,128,128,0,1,0,65,12,11,12,1,0,0,0,0
,0,0,0,1,0,0,0]);
var wasmModule = new WebAssembly.Module(wasmCode);
var wasmInstance = new WebAssembly.Instance(wasmModule, []);
console.log(wasmInstance.exports.fib(10));
WASM – минимальный код](https://image.slidesharecdn.com/webassembly1-171018225028/85/WebAssembly-18-320.jpg)
![21
Плоская модель памяти
Один блок памяти – программа, глобальные переменные, стек, куча
Расширяемый блок
Доступен из JS как массив чисел, на чтение и на запись
ПАМЯТЬ
0 max
Code / Data Globals Stack Heap
78965
HEAP8[78965]
HEAP8, HEAP16, HEAP32
HEAPU8, HEAPU16, HEAPU32
HEAPF32, HEAPF64](https://image.slidesharecdn.com/webassembly1-171018225028/85/WebAssembly-21-320.jpg)
Знакомство с WebAssembly
- 2. 2 КТО Никита Зимин nzeemin Программист 20 лет опыта C/C++, затем .NET https://nzeemin.github.io/ Вопросы – в конце доклада
- 3. 3 ОПРОС
- 4. 4 WebAssembly (WASM) – новый бинарный формат, позволяющий запускать код в браузере. ЧТО ТАКОЕ WebAssembly?
- 5. 5 Задача / проблема: Быстро исполнять код в браузере Требования: – Быстрее чем JavaScript, в идеале со скоростью родного кода нашего процессора – Zero configuration – решение «из коробки», без установки, нужен только браузер – Безопасно – не должно создавать новых угроз – Кросс-платформенно – Удобно для разработчиков ПРОБЛЕМА
- 6. 6 Победили: JavaScript V8 HTML5 СИТУАЦИЯ Проиграли: ActiveX Flash Silverlight и другие плагины Другие попытки решения: NaCl – Native Client (Google, 2011) PNaCl – Portable Native Client – LLVM IR subset asm.js (Mozilla, 2013)
- 7. 7 Решение: Родной код прямо в браузере Примеры: ActiveX, NaCl Плохо: нет портируемости, проблемы с безопасностью РЕШЕНИЕ 1
- 8. 8 Решение: Код для виртуальной машины Примеры: Java Applets, Silverlight и др. Плохо: нужен плагин/runtime ⇒ нет zero configuration РЕШЕНИЕ 2
- 9. 9 ЧТО НЕ ТАК с JavaScript? Компилирует в машинный код “горячие” функции на основе статистики Де-оптимизирует, если тип изменился function foo(a, b) { … } foo(12, 34) // вызываем несколько раз => compile foo("orange", "black“) // deoptimization https://www.youtube.com/watch?v=p-iiEDtpy6I
- 10. 10 КОНВЕЙЕР
- 11. 11 Появился в 2010 году, в 2013 публично доступен • Компилируется из C/C++ • Подмножество JavaScript ⇒ работает уже сейчас, везде • Некоторые браузеры уже давно оптимизируют asm.js лучше JS • Медленнее чем родной код примерно в 1,5-2 раза (50-67%) C/C++ ⇒ LLVM ⇒ Emscripten ⇒ asm.js http://asmjs.org/faq.html asm.js
- 12. 12 C/C++ int f(int i) { return i + 1; } asm.js asm.js function f(i) { 'use asm'; i = i|0; return (i + 1)|0; }
- 13. 13 • Скорость почти как родной код • Эффективность бинарный формат, быстрый парсинг и компиляция • Портируемость все браузеры и операционки • Безопасность запуск в sandbox • Удобство отладки поддержка отладки в браузерах • Открытый стандарт ЦЕЛИ разработки WebAssembly
- 14. 14 Бинарный формат НЕ язык программирования, а байт-код Загружается в браузер и исполняется в браузере Исполняется виртуальной машиной НЕ имеет ничего общего с Web кроме того что общается с JS ЧТО ЭТО ТАКОЕ?
- 15. 15 DEMO
- 16. 16 int fib(int n) { if (n == 0) { return 0; } else { if ((n == -1) || (n == 1)) { return 1; } else { if (n > 0) { return fib(n - 1) + fib(n - 2); } else { return fib(n + 2) - fib(n + 1); } } } } https://wasdk.github.io/WasmFiddle/ https://mbebenita.github.io/WasmExplorer/ DEMO WasmFiddle – пример
- 17. 17 (module (table 0 anyfunc) (memory $0 1) (data (i32.const 12) "010000000000000001000000") (export "memory" (memory $0)) (export "fib" (func $fib)) (func $fib (param $0 i32) (result i32) (local $1 i32) (block $label$0 (br_if $label$0 (i32.ge_u (tee_local $1 (i32.add (get_local $0) (i32.const 1) ) ) (i32.const 3) ) ) (return (i32.load (i32.add (i32.shl (get_local $1) (i32.const 2) ) (i32.const 12) ) ) DEMO WasmFiddle – Text Format (WAST)
- 18. 18 var wasmCode = new Uint8Array( [0,97,115,109,1,0,0,0,1,134,128,128,128,0,1,96,1,127,1,127,3,130,128,128,128,0,1,0,4, 132,128,128,128,0,1,112,0,0,5,131,128,128,128,0,1,0,1,6,129,128,128,128,0,0,7,144,128 ,128,128,0,2,6,109,101,109,111,114,121,2,0,3,102,105,98,0,0,10,203,128,128,128,0,1,19 7,128,128,128,0,1,1,127,2,64,32,0,65,1,106,34,1,65,3,79,13,0,32,1,65,2,116,65,12,106, 40,2,0,15,11,2,64,32,0,65,1,72,13,0,32,0,65,127,106,16,0,32,0,65,126,106,16,0,106,15, 11,32,0,65,2,106,16,0,32,1,16,0,107,11,11,146,128,128,128,0,1,0,65,12,11,12,1,0,0,0,0 ,0,0,0,1,0,0,0]); var wasmModule = new WebAssembly.Module(wasmCode); var wasmInstance = new WebAssembly.Instance(wasmModule, []); console.log(wasmInstance.exports.fib(10)); WASM – минимальный код
- 19. 19 ИСПОЛНЕНИЕ в браузере HTML JavaScript WebAssembly Заменит JavaScript? Нет.
- 20. 20 ИСПОЛНЕНИЕ в браузере JS WASM JS API
- 21. 21 Плоская модель памяти Один блок памяти – программа, глобальные переменные, стек, куча Расширяемый блок Доступен из JS как массив чисел, на чтение и на запись ПАМЯТЬ 0 max Code / Data Globals Stack Heap 78965 HEAP8[78965] HEAP8, HEAP16, HEAP32 HEAPU8, HEAPU16, HEAPU32 HEAPF32, HEAPF64
- 22. 22 C/C++ ⇒ LLVM ⇒ Emscripten ⇒ ⇒ WASM + (supporting JS code) Emscripten
- 23. 23 LLVM – Low Level Virtual Machine Front-EndC/C++ code IR Back-End machine code Clang x86/x86-64 Intermediate Representation Emscripten Fastcomp
- 24. 24 http://emscripten.org/ 1. Download 2. Unzip 3. > emsdk update 4. > emsdk install latest 5. > emsdk activate latest Установка Emscripten
- 25. 25 Компиляция в asm.js: > emcc -O1 fib.c -o fib.html Компиляция в wasm: > emcc -O1 fib.c -o fib.html -s WASM=1 DEMO: Emscripten
- 26. 26 • С/С++ standard libraries • SDL 2 – input/audio/video • OpenGL, EGL ⇒ WebGL • OpenAL – audio • Эмуляция файловой системы • EM_ASM("JS code") • Workers • ... Emscripten возможности
- 27. 27 • Март 2017 – WebAssembly Cross-browser consensus and end of Browser Preview • Май 2017 – Команда Chromium отказалась от PNaCl в пользу WebAssembly https://blog.chromium.org/2017/05/goodbye-pnacl-hello- webassembly.html • Сентябрь – Вышел Safari 11 с поддержкой WebAssembly https://webkit.org/blog/7956/new-webkit-features-in-safari-11/ WebAssembly в 2017 году
- 28. 28 • Chrome – с версии 57 (май 2017) • Firefox – с версии 52 (март 2017) • Safari – с версии 11 (сентябрь 2017) • MS Edge – с версии 15 (апрель 2017) (включить опцию “Experimental JavaScript Features”) • Internet Explorer – нет • Старые браузеры – polyfill (но пока его нет) Поддержка в БРАУЗЕРАХ
- 29. 29 • Threads • SIMD • Exceptions • Garbage Collection БУДУЩЕЕ WebAssembly
- 30. 30 • Уменьшить время загрузки • Поднять скорость вычислений • Использовать готовый код на C/C++ ПРИМЕНЕНИЕ WebAssembly
- 31. 31 1.Применять WASM уже сейчас, если вы к этому готовы 2.Использовать asm.js сейчас, перейти на WASM в будущем 3.Отдавать asm.js либо WASM, в зависимости от браузера ВАРИАНТЫ использования
- 32. 32 1.WASM решает поставленную задачу 2.WASM – именно то, чего нехватало 3.WASM можно использовать уже сейчас готовы ли вы к этому? ВЫВОДЫ
Editor's Notes
- #4: Кто из вас: Писал/пишет на JavaScript ? Писал/пишет на C/C++ ? Слышал что-нибудь про asm.js? Уже использовал asm.js? Слышал что-нибудь про WebAssembly? Уже компилировал в WebAssembly?