Performance Improvements in Browsers
•
65 likes•12,136 views
This document summarizes upcoming improvements and new features in web browsers, including Firefox 3.1, Safari 4, Internet Explorer 8, Opera 10, and Google Chrome. Many of the browsers are focusing on better JavaScript performance through new engines like TraceMonkey and V8. New features include process per tab, postMessage for cross-domain communication, HTML5 drag and drop, and the Canvas element for offloading rendering to the client. Overall the browsers are aiming to improve speed, compatibility, and the user experience through these new features and technologies.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (15)
Similar to Performance Improvements in Browsers
Similar to Performance Improvements in Browsers (20)
More from jeresig
More from jeresig (20)
Recently uploaded
Recently uploaded (20)
Performance Improvements in Browsers
- 1. Performance Improvements in Browsers John Resig http://ejohn.org/ - http://twitter.com/jeresig/
- 2. 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.
- 3. Upcoming Browsers The browsers: ✦ ✦ Firefox 3.1 ✦ Safari 4 ✦ Internet Explorer 8 ✦ Opera 10 ✦ Google Chrome Defining characteristics: ✦ ✦ Better performance ✦ Advanced JavaScript engines
- 4. 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 ✦
- 5. 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/ ✦
- 6. 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
- 7. Opera 10 Unspecified release schedule (2009?) ✦ Features: ✦ ✦ ACID 3 compliance ✦ Video and Audio tags Opera 9.6 recently released ✦ http://labs.opera.com/ ✦
- 8. Google Chrome Chrome 1.0 September 2008 ✦ Features: ✦ ✦ Private browsing ✦ Process per tab Chrome 2.0 upcoming ✦ http://googlechromereleases.blogspot.com/ ✦
- 9. 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
- 10. 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)
- 11. JavaScript Engines New wave of engines: ✦ ✦ Firefox: TraceMonkey ✦ Safari: SquirrelFish (Extreme) ✦ Chrome: V8 Continually leap-frogging each other ✦
- 12. Common Areas Virtual Machines ✦ ✦ Optimized to run a JavaScript-specific 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 ) {}
- 13. Engine Layers JavaScript Code JavaScript Engine (C++) Virtual Bytecode Machine Machine Code
- 14. Bytecode Specific 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 ); } }
- 15. 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 } }
- 16. Shaping (cont.) EXEC( prop ) { ✦ IF ISFN( prop ) { RUN( prop ) } ELSE { ERROR } } After shaping: ✦ RUN( PROP( obj, name ) ) Optimized Bytecode ✦
- 17. 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/ ✦
- 18. Tracing for ( var i = 0; i < 1000; i++ ) { ✦ var foo = stuff[i][0]; foo = “more stuff ” + someFn( foo ); } function someFn( foo ) { return foo.substr(1); } Loop is costly ✦ ✦ ISNUM(i) ✦ ADD(i, 1) ✦ COMPARE( i, 1000 )
- 19. Function Inlining for ( var i = 0; i < 1000; i++ ) { ✦ var foo = stuff[i][0]; foo = “more stuff ” + foo.substr(1); }
- 20. 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
- 21. 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/ ✦
- 22. 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/ ✦
- 26. Network
- 27. Network Steve Souders’ UA tool: ✦ http://stevesouders.com/ua/ Also see: YSlow ✦
- 28. 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
- 29. 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
- 30. 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. ✦
- 31. Link Prefetching <link rel=”prefetch” href=”someimg.png”/> ✦ Pre-load resources for later use ✦ ✦ (images, stylesheets) Currently only in Firefox ✦ Replacement for JavaScript preloading ✦
- 32. Communication
- 33. 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/”);
- 34. postMessage Receiving a Message: ✦ window.addEventListener(”message”, function(e){ ✦ if (e.origin !== “http://example.com:8080“) return; alert( e.data ); }, false);
- 35. 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
- 36. DOM Navigation
- 37. 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, Firefox 3.0, Opera 9.6 ✦ Drop-in replacement for existing queries ✦
- 39. 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.
- 41. Traversal API W3C Specification ✦ Implemented in Firefox 3.1 ✦ Some methods: ✦ ✦ .nextElementSibling ✦ .previousElementSibling ✦ .firstElementChild ✦ .lastElementChild Related: ✦ ✦ .children (All browsers)
- 42. Drag and Drop
- 43. 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 ✦
- 44. Bounding getBoundingClientRect ✦ ✦ Introduced by IE ✦ Seeing a wider introduction Super-fast way to determine the position ✦ of an element Better alternative to manual computation ✦
- 45. 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. ✦
- 46. A Simple Worker var myWorker = new Worker(’my_worker.js’); ✦ myWorker.onmessage = function(event) { alert(”Called back by the worker!n”); };
- 47. Styling and Effects Lots of commons styling effects ✦ Can be replaced and simplified by the ✦ browser Drastically simplify pages and improve ✦ their performance
- 48. Rounded Corners CSS 3 specification ✦ Implemented in Safari, Firefox, Opera ✦ ✦ -moz-border-radius: 5px; ✦ -webkit-border-radius: 5px; Can replace clumsy, slow, old methods. ✦
- 49. 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. ✦
- 50. Example Shadows Demos: http://maettig.com/code/css/text- ✦ shadow.html http://webkit.org/blog/86/box-shadow/
- 51. 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. ✦
- 52. 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. ✦
- 53. 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 ✦
- 54. Shapes and Paths NOT vectors (unlike SVG) ✦ Rectangles ✦ Arcs ✦ Lines ✦ Curves ✦ Charts: ✦
- 55. Fill and Stroke All can be styled (similar to CSS) ✦ Stroke styles the path (or outline) ✦ Fill is the color of the interior ✦ Sparklines: ✦
- 56. Canvas Embedding Canvases can consume: ✦ ✦ Images ✦ Other Canvases Will be able to consume (Firefox 3.1, Safari ✦ 4): ✦ Video In an extension: ✦ ✦ Web Pages
- 57. Data
- 58. 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”); });
- 59. 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)
- 60. Performance Encoding: ✦ Decoding: ✦
- 61. New Measurements
- 62. 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/
- 63. Paint Events
- 64. 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/
- 65. Questions? John Resig ✦ http://ejohn.org/ http://twitter.com/jeresig/