The slides from Vaugham Hong's Nov 2016 VanJS talk on embedding V8.

1. How Javascript V8 Works

2. Who am I?
• Vaugham Hong
• Electronic Arts - rendering / systems
• BigPark / Microsoft - gameplay / scripting
• ConquerMobile, AlkanAir, Colligo , nGrain…etc. - full
stack
• uForis VR - full stack

3. ! web_dev

4. VR x V8
• Explored 360 panoramas /
videos and 3D spaces
• Early 2014 - Custom
markup to create static
connected 3D spaces
• eg. Model, Portal, Video,
Image elements
• Early 2015 - V8 JS
integration
• Dynamic spaces

5. VR x V8
• Shader Toys
• Youtube

6. VR x V8
• Chromium
• Emulator

7. How Javascript V8 Works

8. What is V8?
• V8 is Google’s high performance Javascript engine
• Desktop Chrome September, 2008 (55% MS 2016)
• Android Chrome September, 2012 (80% MS 2016)
• Node.JS

9. Embedding V8
App
Load / Run Script
JS to Native
Function Call
Initialize
Native to JS
Function Call
Destroy
V8

10. Embedding V8
INCLUDED NOT INCLUDED
Array
Math
Date
Number
Object
…
DOM
WebGL
require

11. Today
• JIT
• Full compiler
• Optimized compiler
• Garbage collection
• New space - scavenge
• Old space - mark-sweep / mark-compact

12. V8 JIT Overview
• Compile one function at a time - as they are
encountered
• Constant startup latency
• Never compile code that is unreachable
• Two compilers
• Full compiler
• Optimization compiler (CrankShaft)

13. Full Compiler
• Goal - Spit out machine code as quickly as possible
• Don’t worry too much about optimizations
• No intermediate language / No byte code
• Javascript => Machine Code
• Profile for hot functions
Javascript
Machine
Code
Parse JS Code-GenAST

14. Hot-ness
• Counter based profiling
• Decrement counter exiting functions
• Flag for optimization when reaching 0
• Deterministic

15. Optimized Compiler
• Goal - spit out optimized machine code
• Hydrogen IL - includes type info, scope info for
optimizations (Inlining, dead code elimination, range
analysis, static type inference, …etc.)
• Lithium IL - optimized ready for machine code generation
Javascript
Machine
Code
Parse JS
Scope
AnalysisAST
Graph
Gen
L. ILOptimizationH. IL
Code
Gen

16. De-optimization
• V8 could decide to go back to un-optimized code
• Adding / deleting properties may void optimization contract
• Too many de-optimizations and V8 may stop optimizing entirely
• Constructs like try / catch will make code ineligible for optimizations
• https://github.com/vhf/v8-bailout-reasons
• Un-optimized code will run GC a little hotter
Un-Optimized Optimized

17. V8 GC Overview
• Automatic lifetime management
• How do you allocate objects?
• How / when do you deallocate objects?
• Generational GC
• Young / old objects

18. GC “Spaces”
NEW
SPACE
OLD
SPACE
OBJECT
TYPE Young Old
OBJECT
SIZE
Small Small - Large
COLLECTION
FREQUENCY
High Low
COLLECTION
TIME
Short Long
HEAP
SIZE
1-8 MB Sky’s the limit
Each space contains a set of 1MB pages

19. New Space
• Stack based allocator
• Collect when full
• Uses Cheney’s “Stop-and-
copy” algorithm to reclaim
memory
NEW
SPACE
OBJECT
TYPE
Young
OBJECT
SIZE
Small
COLLECTION
FREQ High
COLLECTION
TIME Short
SIZE 1-8 MB

20. New Space
Scavenge
Empty
To Space
From Space

21. New Space
Scavenge
Allocate A, B, C
To Space
From Space
A CB

22. New Space
Scavenge
Not enough space allocating D
Pause GC and scavenge
To Space
From Space
A CB D

23. New Space
Scavenge
Swap To and From Space
To Space
From Space
A CB

24. New Space
Scavenge
To Space
From Space
A C
Retain Live Objects

25. New Space
Scavenge
Allocate D
To Space
From Space
A C D

26. Pointer Discovery
• Pointers
• Data (eg. strings, numbers)
0x2144AC80
0x3426D100
0x057SCC10
0x31054AD0
0x00A2FF11
0x122AD100
0x00A2FFA1
0x00A2FA11

27. Pointer Discovery
Tagged Pointers
• 32-bit V8 allocations are 4
byte aligned
• Last two bits of an address
are always zero
• Use last two bits to encode
hidden data
• 00 - data
• 01 - pointer
0x04
0x00
0x08
0x0C
0x10
0x1C 11100
10000
01100
01000
00100
00000
Hex Binary
0x2144AC80
0x3426D100
0x057SCC10
0x31054AD0
0x00A2FF11
0x122AD100
0x00A2FFA1
0x00A2FA11

28. Pointer Discovery
Tagged Pointers
0x31054AD0 0x31054AD0
Data
0x00A2FF11 0x00A2FF10
Pointer

29. Pointer Discovery
Tagged Pointers
data
pointer
data
pointer
pointer
0x2144AC80
0x3426D100
0x057SCC10
0x31054AD0
0x00A2FF11
0x122AD100
0x00A2FFA1
0x00A2FA11

30. Old Space
• Free-list based
• Collect on threshold size
• Mark-Sweep to reclaim
memory
• Mark-Compact to reclaim
pages
OLD
SPACE
OBJECT
TYPE
Old
OBJECT
SIZE
Any
COLLECTION
FREQ Low
COLLECTION
TIME Long
SIZE Sky’s the limit

31. Old Space
Mark Phase
data
pointer
data
pointer
pointer
0
0
0
0
0
0
0
data
pointer
data
pointer
pointer
1
0
0
1
1
1
1

32. Old Space
Sweep
D
E
F
G
A
B
C
1
0
0
0
1
1
0
F
G
Page Free List
D
E
F
G
A
B
C
1
0
0
0
1
1
0
F
G
Page Free List
C
E

33. Old Space
Compact
pointer
data
data
data
pointer
data
pointer
pointer
data
data
data
data
Page 1
Page 2
Page 1
Page 2
Reclaim

34. Wrap Up
• Cooperate with the JIT
• Write scripts that stay optimized
• De-optimization puts pressure on GC
• Pre allocate as much as possible
• Don’t let allocations pile up and force collection
cycles

35. uForis + V8
• Live editing with Javascript
• Natively backed scene management, particle systems,
physics, rendering, material systems, async I/O, …etc.
• CommonJS compliant => NPM module support
• 1000 FPS!
• Platforms
• Oculus, Vive, Cardboard, GearVR
• Win32, OSX, iOS, Android

36. Questions?
• LinkedIn - https://ca.linkedin.com/in/vaughamhong
• E-mail - vaugham@uforis.com
• Twitter - vaughamhong

37. We are hiring!
• Interested in joining the virtual reality industry?
• Want to find ways to help apply virtual reality in
practical business problems?
• Highly organized, efficient, and excited about how
virtual reality software development works?
• We'd love to hear from you!
• http://www.uforis.com/careers