JAVASCRIPT ENGINE
AND WEBASSEMBLY
2016.2.18
동국대학교 멀티미디어공학과 이창환
(yich@dongguk.edu)
http://www.slideshare.net/yich/web-assembly
Contents
• Source Code Executions
• JavaScript Engine on FireFox
• WebAssembly
2
Source Code Executions
• Interpret
• Compile
• Interpret + Compile
• JIT(Just-in-time)
• AOT(ahead-of-time compile)
• etc.
3
4
http://image.slidesharecdn.com/principlesofcompilerdesign-120121013909-phpapp01/95/principles-of-compiler-design-24-728.jpg?cb=1327110100
JavaScript Engine
• SpiderMonkey
• A JavaScript engine in Mozilla Gecko applications
• JavaScriptCore
• A JavaScript interpreter and JIT originally derived from KJS(Konqueror’s Engine).
• Used in the WebKit project
• V8
• A JavaScript engine used in Google Chrome, Node.js, and V8.NET.
• Chakra (JScript9)
• A JScript engine used in Internet Explorer.
• Chakra
• A JavaScript engine used in Microsoft Edge.
• Carakan
• A JavaScript engine developed by Opera Software ASA
• Tamarin
• An ActionScript and ECMAScript engine used in Adobe Flash.
• Nashorn
• A JavaScript engine used in Oracle Java Development Kit (JDK) since version 8.
• Rhino
• One of several JavaScript engines from Mozilla, using the Java platform.
5
SpiderMonkey
• From Netscape and Firefox
• History of SpiderMonkey
• TraceMonkey: first javascript JIT, Firefox 3.5
• JägerMonkey: whole-method JIT, FireFox 4
• IonMonkey: Optimization
• OdinMonkey: asm.js
6
emscripten
• Emscripten
• http://kripken.github.io/emscripten-site/
• C/C++ -> JavaScript
• LLVM based Transpiler
• asm.js
• http://asmjs.org
• From Mozilla
• native performance from browser apps.
• C/C++ -> javascript
• Not javascript
7
http://ejohn.org/blog/asmjs-javascript-compile-target/
Typed Array / SIMD.js
• TypedArray
• https://www.khronos.org/registry/typedarray/specs/latest/
• WebGL
• SIMD.js (Single Instruction Multiple Data)
• https://hacks.mozilla.org/2014/10/introducing-simd-js/
8
WebAssembly
• Why? ASM.JS is not enough?
• A binary format can be decoded A binary format can be decoded much
faster than JavaScript; 20x faster
• Avoiding the simultaneous Avoiding the simultaneous ASM.JS
constrains constrains: AOT-compatibility and redundant optimization
• High-Level Goals of WASM
• Binary format also considering mobile and IoT
• Incremental implementation Incremental implementation
• Same functionality as ASM.JS
• A polyfill library to translates WASM code into JavaScript
• Languages other than C/C++
• Compatabile with existing Web Platform
• Synchronous calls to and from JavaScript
• Same security policy Same security policy
• Access Same Web API accessible to JavaScript
9
References
• List of ECMAScript engines,
https://en.wikipedia.org/wiki/List_of_ECMAScript_engines
• SpiderMonkey JavaScript Engine,
http://new.whiteinternet.com/web-
development/spidermonkey
• WebAssembly
• http://webassembly.github.io/
• https://github.com/webassembly
• Web Assembly 기술 동향,
http://www.html5forum.or.kr/api/filedown.jsp?filename=07
_WebAssembly.pdf&folder=upload/board , HTML5Forum
웹 고속화 기술과 킬러웹앱 컨퍼런스
10

JavaScript Engine and WebAssembly

  • 1.
    JAVASCRIPT ENGINE AND WEBASSEMBLY 2016.2.18 동국대학교멀티미디어공학과 이창환 (yich@dongguk.edu) http://www.slideshare.net/yich/web-assembly
  • 2.
    Contents • Source CodeExecutions • JavaScript Engine on FireFox • WebAssembly 2
  • 3.
    Source Code Executions •Interpret • Compile • Interpret + Compile • JIT(Just-in-time) • AOT(ahead-of-time compile) • etc. 3
  • 4.
  • 5.
    JavaScript Engine • SpiderMonkey •A JavaScript engine in Mozilla Gecko applications • JavaScriptCore • A JavaScript interpreter and JIT originally derived from KJS(Konqueror’s Engine). • Used in the WebKit project • V8 • A JavaScript engine used in Google Chrome, Node.js, and V8.NET. • Chakra (JScript9) • A JScript engine used in Internet Explorer. • Chakra • A JavaScript engine used in Microsoft Edge. • Carakan • A JavaScript engine developed by Opera Software ASA • Tamarin • An ActionScript and ECMAScript engine used in Adobe Flash. • Nashorn • A JavaScript engine used in Oracle Java Development Kit (JDK) since version 8. • Rhino • One of several JavaScript engines from Mozilla, using the Java platform. 5
  • 6.
    SpiderMonkey • From Netscapeand Firefox • History of SpiderMonkey • TraceMonkey: first javascript JIT, Firefox 3.5 • JägerMonkey: whole-method JIT, FireFox 4 • IonMonkey: Optimization • OdinMonkey: asm.js 6
  • 7.
    emscripten • Emscripten • http://kripken.github.io/emscripten-site/ •C/C++ -> JavaScript • LLVM based Transpiler • asm.js • http://asmjs.org • From Mozilla • native performance from browser apps. • C/C++ -> javascript • Not javascript 7 http://ejohn.org/blog/asmjs-javascript-compile-target/
  • 8.
    Typed Array /SIMD.js • TypedArray • https://www.khronos.org/registry/typedarray/specs/latest/ • WebGL • SIMD.js (Single Instruction Multiple Data) • https://hacks.mozilla.org/2014/10/introducing-simd-js/ 8
  • 9.
    WebAssembly • Why? ASM.JSis not enough? • A binary format can be decoded A binary format can be decoded much faster than JavaScript; 20x faster • Avoiding the simultaneous Avoiding the simultaneous ASM.JS constrains constrains: AOT-compatibility and redundant optimization • High-Level Goals of WASM • Binary format also considering mobile and IoT • Incremental implementation Incremental implementation • Same functionality as ASM.JS • A polyfill library to translates WASM code into JavaScript • Languages other than C/C++ • Compatabile with existing Web Platform • Synchronous calls to and from JavaScript • Same security policy Same security policy • Access Same Web API accessible to JavaScript 9
  • 10.
    References • List ofECMAScript engines, https://en.wikipedia.org/wiki/List_of_ECMAScript_engines • SpiderMonkey JavaScript Engine, http://new.whiteinternet.com/web- development/spidermonkey • WebAssembly • http://webassembly.github.io/ • https://github.com/webassembly • Web Assembly 기술 동향, http://www.html5forum.or.kr/api/filedown.jsp?filename=07 _WebAssembly.pdf&folder=upload/board , HTML5Forum 웹 고속화 기술과 킬러웹앱 컨퍼런스 10