Performance Improvements in

BrowsersJohn Resig

http://ejohn.org/ - http://twitter.com/jeresig/

About Me✦ Work for the Mozilla Corporation (Firefox!)

✦ Do a lot of JavaScript performance analysis✦ Dromaeo.com is my performance test suite

✦ Tests the performance of JavaScript engines✦ Tests the performance of browser DOM

✦ Work on Firebug (great developer tool)

✦ Creator of the jQuery JavaScript Library✦ http://jquery.com/✦ Used by Microsoft, Google, Adobe, Nokia,

IBM, Intel, CBS News, NBC, etc.

Upcoming Browsers✦ The browsers:

✦ Firefox 3.1✦ Safari 4✦ Internet Explorer 8✦ Opera 10✦ Google Chrome

✦ Defining characteristics:✦ Better performance✦ Advanced JavaScript engines

Firefox 3.1✦ Set to be released Spring 2009✦ Goals:

✦ Performance improvements✦ Video and Audio tags✦ Private browsing

✦ Beta 1 just released✦ http://developer.mozilla.org/En/Firefox_3.1_for_developers

Safari 4✦ Released in conjunction with OS X 10.6✦ Features:

✦ Performance improvements✦ Desktop Apps✦ ACID 3 compliance✦ Revamped dev tools

✦ Preview seeded to developers✦ http://webkit.org/blog/

Internet Explorer 8✦ Released late 2008/early 2009✦ Features:

✦ Backwards compatibility with IE 7✦ Web Clips (trim out a part of a page and

place on desktop)✦ Process per tab

✦ Beta 2 recentlyreleased

✦ http://www.microsoft.com/windows/internet-explorer/beta/readiness/new-features.aspx

Opera 10✦ Unspecified release schedule (2009?)✦ Features:

✦ ACID 3 compliance✦ Video and Audio tags

✦ Opera 9.6 recently released✦ http://labs.opera.com/

Google Chrome✦ Released September 2008✦ Features:

✦ Private browsing✦ Process per tab

✦ Next release schedule unknown✦ http://googlechromereleases.blogspot.com/

Process Per Tab✦ Most browsers have a single process

✦ Share memory, resources✦ Pages rendered using threads

✦ IE 8 and Chrome split tabs into individual processes

✦ What does this change?✦ Pages can do more processing

✦ (Not block the UI or other tabs)✦ Tabs consume more memory

Process Per Tab✦ Examples of changes, in Chrome.✦ Timer speed is what you set it to.

✦ Browsers cap the speed to 10ms.✦ setInterval(fn, 1);

✦ Can do more non-stop processing, without warning:while (true) {}

✦ Chrome has a process manager (like the OS process manager - see CPU, Memory)

JavaScript Engines✦ New wave of engines:

✦ Firefox: TraceMonkey✦ Safari: SquirrelFish (Extreme)✦ Chrome: V8

✦ Continually leap-frogging each other

Measuring Speed✦ SunSpider

✦ Released by the WebKit team last fall✦ Focuses completely on JavaScript

✦ Dromaeo✦ Released by Mozilla this spring✦ Mix of JavaScript and DOM

✦ V8 Benchmark✦ Released by Chrome team last month✦ Lots of recursion testing

✦ Quality: http://ejohn.org/blog/javascript-benchmark-quality/

http://ejohn.org/blog/javascript-performance-rundown/

http://ejohn.org/blog/javascript-performance-rundown/

http://ejohn.org/blog/javascript-performance-rundown/

Recent Numbers

http://arstechnica.com/journals/linux.ars/2008/10/07/extreme-javascript-performance

Recent Numbers

http://arstechnica.com/journals/linux.ars/2008/10/07/extreme-javascript-performance

Network

Network✦ Steve Souders is the man.✦ http://stevesouders.com/ua/

✦ YSlow

Simultaneous Conn.✦ Number of downloads per domain✦ Should be at least 4

✦ FF 2, IE 6, and IE 7 are 2✦ Safari is 4✦ Everyone else is 6-7

✦ Max connections: Number of simultaneous downloads✦ Firefox, Opera: 25-30✦ Everyone else: 50-60

Parallel Scripts✦ Download scripts simultaneously✦ Even though they must execute in order✦ <script defer>

✦ From Internet Explorer✦ Just landed for Firefox 3.1✦ Replacement for JavaScript-based

loading

Redirect Caching✦ A simple request:

http://foo.com ->http://www.foo.com ->http://www.foo.com/

✦ Very costly, should be cached.✦ Chrome and Firefox do well here.

Link Prefetching✦ <link rel=”prefetch” href=”someimg.png”/>✦ Pre-load resources for later use

✦ (images, stylesheets)✦ Currently only in Firefox✦ Replacement for JavaScript preloading

DOM Navigation

Class Name✦ New method:

getElementsByClassName✦ Works just like:

getElementsByTagName✦ Fast way of finding elements by their class

name(s):<div class=”person sidebar”></div>

✦ document.getElementsByClassName(“sidebar”)

✦ Safari 3.1 and Firefox 3.0✦ Drop-in replacement for existing queries

Speed Results

http://ejohn.org/blog/getelementsbyclassname-speed-comparison/

Selectors API✦ querySelectorAll✦ Use CSS selectors to find DOM elements✦ document.querySelectorAll(“div p”)✦ Good cross-browser support

✦ IE 8, Safari 4, FF 3, Opera 10✦ Drop-in replacement for JavaScript

libraries.

Speed Results

http://www2.webkit.org/perf/slickspeed/

JavaScript Threads✦ JavaScript has always been single-threaded✦ Limited to working linearly✦ New HTML 5 Web Workers✦ Spawn JavaScript threads✦ Run complicated work in the background

✦ Doesn’t block the browser!✦ Demo: http://ejohn.org/apps/threads/✦ Drop-in usable, huge quality boost.

Styling and Effects✦ Lots of commons styling effects✦ Can be replaced and simplified by the

browser✦ Drastically simplify pages and improve

their performance

Rounded Corners✦ CSS 3 specification

✦ Implemented in Safari, Firefox, Opera✦ -moz-border-radius: 5px;✦ -webkit-border-radius: 5px;

✦ Can replace clumsy, slow, old methods.

Shadows✦ Box Shadows

✦ Shadow behind a div✦ -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)

✦ Text Shadows✦ Shadow behind some text✦ text-shadow: -1px -1px #666, 1px 1px #FFF;

✦ Implemented in WebKit, Firefox✦ Can replace clumsy, slow, old methods.

Example Shadows

✦ Demos: http://maettig.com/code/css/text-shadow.htmlhttp://webkit.org/blog/86/box-shadow/

Custom Fonts✦ Load in custom fonts✦ Can load TrueType fonts✦ Implemented in Safari and Firefox✦ Demo: http://ejohn.org/apps/fontface/

blok.html✦ Can replace using Flash-based fonts.

Transforms and Animations✦ Transforms allow you to rotate, scale, and

offset an element✦ -webkit-transform: rotate(30deg);

✦ Animations allow you to morph an element using nothing but CSS✦ -webkit-transition: all 1s ease-in-out;

✦ Implemented in WebKit and Firefox✦ Demo: http://www.the-art-of-web.com/css/

css-animation/✦ Can replace JS animations, today.

Canvas✦ Proposed and first implemented by Apple

in WebKit✦ A 2d drawing layer

✦ With possibilities for future expansion✦ Embedded in web pages (looks and

behaves like an img element)✦ Works in all browsers (IE with ExCanvas)✦ Offload rendering to client✦ Better user interaction

Shapes and Paths✦ NOT vectors (unlike SVG)✦ Rectangles✦ Arcs✦ Lines✦ Curves

✦ Charts:

Fill and Stroke✦ All can be styled (similar to CSS)✦ Stroke styles the path (or outline)✦ Fill is the color of the interior✦ Sparklines:

Canvas Embedding✦ Canvases can consume:

✦ Images✦ Other Canvases

✦ Will be able to consume (Firefox 3.1):✦ Video

✦ In an extension:✦ Web Pages

Data

Native JSON✦ JSON is a format for transferring data✦ (Uses JavaScript syntax to achieve this.)✦ Has been slow and a little hacky.✦ Browser now have native support in

Firefox 3.1 and IE 8✦ Drop-in usable, today

✦ JSON.encode(object)✦ JSON.decode(string)

Performance✦ Encoding:

✦ Decoding:

New Measurements

Painting✦ When something is physically drawn to

the screen✦ Hard to quantify without more

information✦ Firefox 3.1 includes a new event:

MozAfterPaint✦ Demo: http://ejohn.org/blog/browser-

paint-events/

Reflow✦ CSS has lots of boxes in it✦ Position of boxes is constantly recomputed

and repositioned (before being painted)✦ This is reflow

✦ Demo: http://dougt.wordpress.com/2008/05/24/what-is-a-reflow/

Questions?✦ John Resig

http://ejohn.org/http://twitter.com/jeresig/