Performance Improvements in Browsers

17,215 views

Published on

A talk I gave October 2008 at the Web Experience Forum in Boston.

Published in: Technology
3 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total views
17,215
On SlideShare
0
From Embeds
0
Number of Embeds
1,223
Actions
Shares
0
Downloads
348
Comments
3
Likes
28
Embeds 0
No embeds

No notes for slide

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/
  13. http://ejohn.org/blog/javascript-performance-rundown/
  14. http://ejohn.org/blog/javascript-performance-rundown/
  15. http://ejohn.org/blog/javascript-performance-rundown/
  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
  26. Speed Results http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
  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.
  28. Speed Results http://www2.webkit.org/perf/slickspeed/
  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/

×