Performance Improvements in Browsers

Performance Improvements in Browsers - Presentation Transcript

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 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 2 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 early 2009 ✦ Features: ✦ ✦ Backwards compatibility with IE 7 ✦ Web Clips (trim out a part of a page and place on desktop) ✦ Process per tab RC1 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 Chrome 1.0 September 2008 ✦ Features: ✦ ✦ Private browsing ✦ Process per tab Chrome 2.0 upcoming ✦ 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 ✦

Common Areas Virtual Machines ✦ ✦ Optimized to run a JavaScript-speciﬁc bytecode Shaping ✦ ✦ Determine if two objects are similar ✦ Optimize behavior based upon that ✦ “Walks like a duck, quacks like a duck” ✦ if ( obj.walks && obj.quacks ) {}

Engine Layers JavaScript Code JavaScript Engine (C++) Virtual Bytecode Machine Machine Code

Bytecode Speciﬁc low-level commands ✦ Written in machine code ✦ a + b; ✦ PLUS( a, b ) { ✦ IF ISSTRING(a) OR ISSTRING(b) { return CONCAT( a, b ); } ELSE { return ADD( a, b ); } }

Shaping Simple JavaScript code: ✦ obj.method() GETPROP( obj, name ) { ✦ IF ISOBJECT(obj) { IF HASPROP(obj, name) return PROP(obj, name); ELSE return PROTO(obj, name) } ELSE { ERROR } }

Shaping (cont.) EXEC( prop ) { ✦ IF ISFN( prop ) { RUN( prop ) } ELSE { ERROR } } After shaping: ✦ RUN( PROP( obj, name ) ) Optimized Bytecode ✦

TraceMonkey Firefox uses an engine called ✦ SpiderMonkey (written in C) Tracing technology layered on for Firefox ✦ 3.1 (dubbed ‘TraceMonkey’) Hyper-optimizes repeating patterns into ✦ bytecode http://ejohn.org/blog/tracemonkey/ ✦

Tracing for ( var i = 0; i < 1000; i++ ) { ✦ var foo = stuﬀ[i][0]; foo = “more stuﬀ ” + someFn( foo ); } function someFn( foo ) { return foo.substr(1); } Loop is costly ✦ ✦ ISNUM(i) ✦ ADD(i, 1) ✦ COMPARE( i, 1000 )

Function Inlining for ( var i = 0; i < 1000; i++ ) { ✦ var foo = stuﬀ[i][0]; foo = “more stuﬀ ” + foo.substr(1); }

SquirrelFish Just-in-time compilation for JavaScript ✦ Compiles a bytecode for common ✦ functionality Specialties: ✦ ✦ Bytecodes for regular expressions (super- fast) http://arstechnica.com/journals/linux.ars/2008/10/07/extreme- ✦ javascript-performance

Chrome V8 Makes extensive use of shaping (fast ✦ property lookups) Hyper-optimized function calls and ✦ recursion Dynamic machine code generation ✦ http://code.google.com/p/v8/ ✦

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/

Network

Network Steve Souders’ UA tool: ✦ http://stevesouders.com/ua/ Also see: 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 ✦ In Opera as well ✦ 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 ✦

Communication

postMessage A way to pass messages amongst multiple ✦ frames and windows Implemented in all browsers (in some ✦ capacity). Sending a message: ✦ iframe.postMessage(“test”, ✦ “http://google.com/”);

postMessage Receiving a Message: ✦ window.addEventListener(”message”, function(e){ ✦ if (e.origin !== “http://example.com:8080“) return; alert( e.data ); }, false);

Cross-Domain XHR Landed in Firefox 3.1, support in IE 8 ✦ Add a header to your content: ✦ Access-Control-Allow-Origin: * XMLHttpRequest can now pull it in, even ✦ across domains https://developer.mozilla.org/En/ ✦ HTTP_Access_Control

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, Firefox 3.0, Opera 9.6 ✦ 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/

Traversal API W3C Speciﬁcation ✦ Implemented in Firefox 3.1 ✦ Some methods: ✦ ✦ .nextElementSibling ✦ .previousElementSibling ✦ .ﬁrstElementChild ✦ .lastElementChild Related: ✦ ✦ .children (All browsers)

Drag and Drop

HTML 5 Dragging Includes full support drag and drop events ✦ Events: dragstart, dragend, dragenter, ✦ dragleave, dragover, drag, drop <div draggable=”true” ✦ ondragstart=”event.dataTransfer.setData (’text/plain’, ‘This text may be dragged’)”> This text <strong>may</strong> be dragged. </div> Only in Firefox 3.1 ✦

Bounding getBoundingClientRect ✦ ✦ Introduced by IE ✦ Seeing a wider introduction Super-fast way to determine the position ✦ of an element Better alternative to manual computation ✦

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! Drop-in usable, huge quality boost. ✦

A Simple Worker var myWorker = new Worker(’my_worker.js’); ✦ myWorker.onmessage = function(event) { alert(”Called back by the worker!\\n”); };

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, Safari ✦ 4): ✦ Video In an extension: ✦ ✦ Web Pages

Data

SQL Storage Part of HTML 5 - a full client-side SQL ✦ database (SQLite) Implemented in WebKit ✦ var database = openDatabase(”db”, “1.0”); ✦ database.executeSql(”SELECT * FROM test”, function(result1) { // do something with the results database.executeSql(”DROP TABLE test”); });

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/

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/