What A Browser Is

KHTML, Webkit/WebCore 1998 → Now
Gecko 1997 → Now
Trident/Spartan 1997 → ?
the community speaks

~1998 Browser Architecture

1998 Browsers...

...are 2015 Browsers


The '24FPS ought to be enough for anybody' myth

(see 100fps.com for more on perception of motion)


12FPS = 84ms

24FPS = 42ms

48FPS = 21ms

60FPS = 16ms


New Contenders

2012 Browsers

Blink 2013 → Now
Servo 2012 →
Apple ?

Google Blink

Google Leave Webkit Behind

via Contributions In Browser Engines.pdf

Google Blink

Mozilla Servo

Our goal is nothing less than building the fastest and most secure browser engine, and we aim to succeed by miles, not inches. We aim for double the performance of current engines, with no crashes.

Mozilla Servo

see also Parallel Browser Report.pdf (thanks Evan)

Q. Why Care About Animation?

A. User Expectations

...trying to do that
in a browser.

Benchmarking Animation

Animating by jQuery


...by CSS Margins


...by CSS Top/Left


...by CSS Transform

Less than 1ms/frame!

Fast Path

Fast Path

transform: translate(x,y);
transform: rotate(deg);
transform: scale(n);


Reflow +
Style recalc +
JavaScript +
Garbage collection +
= 16ms to do EVERYTHING


Reflow is the process by which the geometry of the layout engine's formatting objects are computed

- Chris Waterson, Mozilla

What Causes Reflow?

  • Changing geometry of nodes. E.g.
    • display:none || block
    • border:none  || 1px
  • IE only: Changing a .className or inline style, or content in a display:none

Misc Tips

Profiling dev tools.

Use CPU-efficient templating.

Debounce frequent events.

Velocity.js or GSAP, not jQuery.animate().

rAF or CSS animation, not setTimeout, never setInterval.

ASM.js / SIMD.js / Web Workers.


Conclusion (1 of 2)

1998 Browsers Are Finally Dying...

~2000sVM, AJAX
~2010sAnimation engine

Conclusion (2 of 2)

...but 1998 Browsers Aren't Dead Yet

so learn how browsers work to make them fast.