This document discusses efforts to improve the performance of JavaScript for web applications. It introduces ASM.JS, a subset of JavaScript that can be optimized to perform closer to native machine code by taking advantage of static typing. It also discusses Native Client (NaCl) and Portable Native Client (PNaCl), which allow C and C++ code to be run securely in the browser by compiling to an intermediate representation. Finally, it introduces WebAssembly as a new binary format for code that aims to be faster than JavaScript, have an AST-like structure, and support being run directly in the browser or through just-in-time compilation. The document argues that while JavaScript will still be important for web pages, it may no longer

1. War of Native Speed on Web
Bekket McClane @ SITCON2016

2. WHO AM I?

3. 2

4. Bekket McClane

5. mshockwave

6. Department of Computer Science
Sophomore

7. Dormitory Guardian

8. Android Developer (App/System)

9. Dragon Slaughter

10. FACT-1:
Web Pages Need
Javascript

11. FACT-2:
Javascript is
Pretty Slow

12. E.g. Web Page Games

13. ASM.JS

14. BRIEF INTRODUCTION
▸2x~ faster than normal JS
▸NOT a new language
(Strict subset of JS)
▸Nearly static type

15. KEY:
IT’S ALL ABOUT
TYPE

16. KEY:
IT’S ALL ABOUT
TYPE
Why types important?

17. STATIC TYPE

18. STATIC TYPE
I know how to handle these two variables

19. STATIC TYPE
Not allowed
I know how to handle these two variables

20. STATIC TYPE
I know what type it returns
Not allowed
I know how to handle these two variables

21. DYNAMIC TYPE (Assume No Optimization Applied)

22. DYNAMIC TYPE
How should I handle x?
(Assume No Optimization Applied)

23. DYNAMIC TYPE
How should I handle x?
(Assume No Optimization Applied)

24. DYNAMIC TYPE
What type it returns?
How should I handle x?
(Assume No Optimization Applied)

25. OPTIMIZE DYNAMIC TYPE
▸ Better Type Inference
(At Runtime)
▸ Do As Much Static Analyze
▸ Inline Cache

26. HOW ASM.JS
FIX THIS?

27. IN SHORT:
(Try To) Ensure Each
Variables’ Type

28. EXAMPLE

29. EXAMPLE
x, y are both integers (32-bits)

30. EXAMPLE
x, y are both integers (32-bits)
So (x + y) has the same type, too

31. NO MORE
TYPE CHECK

32. FACT:
No Object Type
in ASM.js

33. FACT:
No Object Type
in ASM.js

34. Use Raw Memory
To Store Data

35. AKA:
Manage Memory
Manually
Just Like C/C++

36. BONUS:
No Garbage Collection!!
(No GC Latency)

37. PROPERTIES

38. PROPERTIES
▸ Explicit Type

39. PROPERTIES
▸ Explicit Type
▸ No Object Type

40. PROPERTIES
▸ Explicit Type
▸ No Object Type
▸ Manage Memory Manually

41. PROPERTIES
▸ Explicit Type
▸ No Object Type
▸ Manage Memory Manually
Hard To Write Asm.js From Scratch

42. TOOL:

43. C/C++ LLVM EMSCRIPTEN Asm.js
Emscripten Flow
LLVM IR

44. BENCHMARKS

45. Lower is Better

46. Native Client

47. BRIEF INTRODUCTION
▸AOT Compile
▸Portable(PNaCl) / Non-Portable
▸Use LLVM IR

48. LLVM IR
However,
Native Client Only Use A Subset of LLVM IR
C/C++,
Haskell etc. LLVM IR x86, ARM,
MIPS etc.
Platform neutral (In PNaCl)

49. NaCl
‣ Package prebuilt platform-dependent
binary images (one for each architecture).
‣ Only package LLVM bitcode, compile into
(platform-dependent) executable before
execution.
PNaCl

50. Manifest Example (NaCl)
Platform Dependent

51. Manifest Example (PNaCl)
Platform Independent

52. Usage

53. API
Platform Neutral
Pepper API
(For Both C, C++)

54. HOWEVER…
Wrong Expectation
On LLVM IR
At The Beginning?

55. LLVM IR is NOT Designed
as Tool for Cross-Platform
(e.g. Java bytecode)
FACT:

56. Evidences (In IR)

57. Evidences (In IR)
▸ Target Triple / Target Data Layout
(e.g. x86_64-apple-macosx10.11.0)

58. Evidences (In IR)
▸ Target Triple / Target Data Layout
(e.g. x86_64-apple-macosx10.11.0)
▸ Explicit Calling Convention

59. Evidences (In IR)
▸ Target Triple / Target Data Layout
(e.g. x86_64-apple-macosx10.11.0)
▸ Explicit Calling Convention
▸ Target Dependent Attributes

60. WebAssembly

61. BRIEF INTRODUCTION
▸In binary format
▸AST-like structure
▸Interpret, AOT or JIT

62. USE WITH CAUTIOUS
First Commit: Spring, 2015

63. Low-Level Instructions

64. Low-Level Instructions
Explicit Type

65. AST-like Structure
S-expression
Pros: Fast Parsing (Interpreting)

66. SandBox Memory Model
One Large Linear Virtual Memory
‣ Simple Memory Access
‣ A Linear Address Space per Module
‣ Secure

67. Dynamic Link
‣ Useful for CDN
(Only need to downloaded once)
‣ Use alternative invoke instruction
call_import
‣ Will Define Proper ABI In Future

68. TOOLS

69. v8 support
‣ Run wasm(binary form) in v8!
https://github.com/v8/v8/tree/master/src/wasm

70. sexpr-wasm-prototype
‣ Turn (human readable) s-expression
To binary format wasm
‣ Use with v8
https://github.com/WebAssembly/sexpr-wasm-prototype

71. SUMMARY
▸ We still need static type to aid
performance
▸ Binary format would become the
future trends
▸ JS would work with other
solutions in parallel

72. FACT:
Web Pages Need
Javascript

73. FACT:
Javascript
won’t be
the only player
anymore

74. It’s gonna be fun!
Thank you

75. CONTACT
▸ github / bitbucket: mshockwave
▸ mshockwave.blogspot.tw
▸ yihshyng223@gmail.com
▸ www.facebook.com/bekket.mcclane