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

Single-threaded

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

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

Milliseconds

12FPS = 84ms

24FPS = 42ms

48FPS = 21ms

60FPS = 16ms

2012

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

20ms/frame

...by CSS Margins

19ms/frame

...by CSS Top/Left

23ms/frame

...by CSS Transform

Less than 1ms/frame!

Fast Path

Fast Path


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

Milliseconds

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

"Reflow"?

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.

Jank-Free(.org).

Conclusion (1 of 2)

1998 Browsers Are Finally Dying...

~1990sDocuments
~2000sVM, AJAX
~2010sAnimation engine

Conclusion (2 of 2)

...but 1998 Browsers Aren't Dead Yet

so learn how browsers work to make them fast.

<end>

matthew@holloway.co.nz

http://holloway.nz/what-a-browser-is