Content

Web Browser
Rendering Engine
- Blink (WebKit)
- Others
JavaScript Engine
- V8
- Others

(back to plan)

References

A Reference Architecture for Web Browsers. Alan Grosskurth & Michael W. Godfrey. University of Waterloo. http://grosskurth.ca/papers/browser-refarch.pdf
How Browsers Work - Part 1 - Architecture. Vineet Gupta. http://archive.li/YOGPn
Web-Browser Architecture. Nguyen Quang. Saltlux. 2015-05. http://www.slideshare.net/quangntta/web-browser-architecture-49196378
Mobile Browser Internals. (Understanding Blink Rendering Engine). Hyungwook Lee. Naver Labs. 2014-01. http://www.slideshare.net/HyungwookLee/mobilebrowserinternal-20140122
Official blog of the V8 JavaScript engine. http://v8project.blogspot.be/
- V8 Release 5.6. 2016-12-02. http://v8project.blogspot.be/2016/12/v8-release-56.html
Implementing a JavaScript Engine. Kris Mok. Azul Systems. 2013-11-10. http://www.slideshare.net/RednaxelaFX/implement-js-krystalmok20131110
How Browsers Work: Behind the scenes of modern web browsers. Tali Garsiel & Paul Irish. HTML5 Rocks Tutorials. 2011-08-05. https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Web Browser

Chrome

images/web-browser-architecture-13-1024.jpg

Firefox

images/web-browser-architecture-12-1024.jpg

Internet Explorer (pre-Edge)

$images/web-browser-architecture-14-1024.jpg$

Rendering Engine

Blink (WebKit)

images/web-browser-architecture-23-1024.jpg

Other rendering engines

Gecko (Firefox)
Trident (Internet Explorer)
EdgeHTML (Edge)
WebKit (Safari)

JavaScript Engine

Components of a JavaScript Engine

AST (Abstract Syntax Tree): tree representation of the code structure
FFI (Foreign Function Interface): translates calls between 2 languages
GC (Garbage Collector): manages heap memory

JavaScript Engine: flow of processing

images/main-qimg-ab2a954b51c404efe66cdc7681da6b85.png

V8

https://github.com/v8/v8/wiki/Design%20Elements http://thibaultlaurens.github.io/javascript/2013/04/29/how-the-v8-engine-works/ http://stackoverflow.com/a/12987881/318354 http://websrv0a.sdu.dk/ups/SCM/slides/lecture_03_mads_ager.pdf

V8: Interpreter

https://github.com/v8/v8/wiki/Interpreter > Design document

V8: Compilers

baseline compiler "full-codegen" → quick-and-dirty
2010: + CrankShaft → focus on hot-spots
2015: + TurboFan → improved performance, asm.js

https://github.com/v8/v8/wiki/TurboFan http://wingolog.org/archives/2011/07/05/v8-a-tale-of-two-compilers

V8: Ignition pipeline

As of Dec-2016:

→ avoids memory overhead of the compilation

JavaScript is first compiled to "concise" bytecode
smaller than native code
high performance interpreter delivers performance close to current compilers

V8: Garbage Collector

The problem:

in general, determining if a piece of memory is used or not is an undecidable problem
memory management may be manual (tedious and error prone) or automatic

Garbage Collection:

a type of automatic memory management
based on "Mark-and-Sweep" algorithms
- start from a list of "roots"
- browse the reference tree and mark each object as "active"
- all other objects are inactive and may be reclaimed

This is similar to Java.

V8: Orinoco GC

Orinoco (since V8 5.0, Chrome 50)

Generational GC: Young/Old generations

promotion after 2 generation (= "Evacuation")
spaces partitioned in fixed size blocks ("pages")
evacuation in parallel, on a page by page basis
old compaction in parallel, on a page by page basis

Improved pointers tracking

speeds up objects relocation

Black allocation

speeds up marking of objects in old generation
(promoted objects are considered active by default)

https://blog.risingstack.com/javascript-garbage-collection-orinoco/
http://v8project.blogspot.be/2016/04/jank-busters-part-two-orinoco.html

Other JavaScript engines

Monkey (Gecko, Netscape/Mozilla/Firefox)
- Spidermonkey (legacy): first ever JavaScript engine
- TraceMonkey: first JIT compiler
- JägerMonkey: improvement of TraceMonkey, superseded by IonMonkey
- IonMonkey: current engine with Gecko
Chakra (Trident, Internet Explorer)
SquirrelFish (WebKit, Safari) (was: JavaScriptCore)

Web Performance Tuning - Browser architecture