Performance Improvements in Browsers
•
28 likes•3,870 views
A talk I gave October 2008 at the Web Experience Forum in Boston.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
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 ✦ 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.
- 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 1 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 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
- 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 ✦ Released September 2008 ✦ Features: ✦ Private browsing ✦ Process per tab ✦ Next release schedule unknown ✦ 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. 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/
- 16. Recent Numbers http://arstechnica.com/journals/linux.ars/2008/10/07/extreme-javascript-performance
- 17. Recent Numbers http://arstechnica.com/journals/linux.ars/2008/10/07/extreme-javascript-performance
- 18. Network
- 19. Network ✦ Steve Souders is the man. ✦ http://stevesouders.com/ua/ ✦ YSlow
- 20. 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
- 21. 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
- 22. 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.
- 23. Link Prefetching ✦ <link rel=”prefetch” href=”someimg.png”/> ✦ Pre-load resources for later use ✦ (images, stylesheets) ✦ Currently only in Firefox ✦ Replacement for JavaScript preloading
- 24. DOM Navigation
- 25. 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
- 27. 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.
- 29. 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.
- 30. Styling and Effects ✦ Lots of commons styling effects ✦ Can be replaced and simplified by the browser ✦ Drastically simplify pages and improve their performance
- 31. Rounded Corners ✦ CSS 3 specification ✦ Implemented in Safari, Firefox, Opera ✦ -moz-border-radius: 5px; ✦ -webkit-border-radius: 5px; ✦ Can replace clumsy, slow, old methods.
- 32. 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.
- 33. Example Shadows ✦ Demos: http://maettig.com/code/css/text- shadow.html http://webkit.org/blog/86/box-shadow/
- 34. 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.
- 35. 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.
- 36. 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
- 37. Shapes and Paths ✦ NOT vectors (unlike SVG) ✦ Rectangles ✦ Arcs ✦ Lines ✦ Curves ✦ Charts:
- 38. Fill and Stroke ✦ All can be styled (similar to CSS) ✦ Stroke styles the path (or outline) ✦ Fill is the color of the interior ✦ Sparklines:
- 39. Canvas Embedding ✦ Canvases can consume: ✦ Images ✦ Other Canvases ✦ Will be able to consume (Firefox 3.1): ✦ Video ✦ In an extension: ✦ Web Pages
- 40. Data
- 41. 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)
- 42. Performance ✦ Encoding: ✦ Decoding:
- 43. New Measurements
- 44. 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/
- 45. 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/
- 46. Questions? ✦ John Resig http://ejohn.org/ http://twitter.com/jeresig/