Performance Improvements in Browsers

Performance Improvements in Browsers John 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 ✦ Deﬁning 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 recently released ✦ http://www.microsoft.com/ windows/internet-explorer/ beta/readiness/new-features.aspx

Opera 10 ✦ Unspeciﬁed 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/

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 ﬁnding 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 ﬁnd 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 speciﬁcation ✦ 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.html http://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 oﬀset 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 ﬁrst 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) ✦ Oﬄoad 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/

Performance Improvements in Browsers

2 comments

Notes on slide 1

25 Favorites