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...
Upcoming Browsers
    The browsers:
✦
    ✦ Firefox 3.1
    ✦ Safari 4
    ✦ Internet Explorer 8
    ✦ Opera 10
    ✦ Goog...
Firefox 3.1
    Set to be released Spring 2009
✦

    Goals:
✦
    ✦ Performance improvements
    ✦ Video and Audio tags
 ...
Safari 4
    Released in conjunction with OS X 10.6
✦

    Features:
✦
    ✦ Performance improvements
    ✦ Desktop Apps
 ...
Internet Explorer 8
    Released early 2009
✦

    Features:
✦
    ✦ Backwards compatibility with IE 7
    ✦ Web Clips (tr...
Opera 10
    Unspecified release schedule (2009?)
✦

    Features:
✦
    ✦ ACID 3 compliance
    ✦ Video and Audio tags

  ...
Google Chrome
    Chrome 1.0 September 2008
✦

    Features:
✦
    ✦ Private browsing
    ✦ Process per tab

    Chrome 2....
Process Per Tab
    Most browsers have a single process
✦
    ✦ Share memory, resources
    ✦ Pages rendered using threads...
Process Per Tab
    Examples of changes, in Chrome.
✦

    Timer speed is what you set it to.
✦
    ✦ Browsers cap the spe...
JavaScript Engines
    New wave of engines:
✦
    ✦ Firefox: TraceMonkey
    ✦ Safari: SquirrelFish (Extreme)
    ✦ Chrome...
Common Areas
    Virtual Machines
✦
    ✦ Optimized to run a JavaScript-specific
      bytecode
    Shaping
✦
    ✦ Determi...
Engine Layers

          JavaScript Code


       JavaScript Engine (C++)


                                  Virtual
    ...
Bytecode
    Specific low-level commands
✦

    Written in machine code
✦

    a + b;
✦

    PLUS( a, b ) {
✦
      IF ISST...
Shaping
    Simple JavaScript code:
✦
    obj.method()
    GETPROP( obj, name ) {
✦
      IF ISOBJECT(obj) {
        IF HA...
Shaping (cont.)
    EXEC( prop ) {
✦
      IF ISFN( prop ) {
        RUN( prop )
      } ELSE {
        ERROR
      }
    ...
TraceMonkey
    Firefox uses an engine called
✦
    SpiderMonkey (written in C)
    Tracing technology layered on for Fire...
Tracing
    for ( var i = 0; i < 1000; i++ ) {
✦
      var foo = stuff[i][0];
      foo = “more stuff ” + someFn( foo );
   ...
Function Inlining
    for ( var i = 0; i < 1000; i++ ) {
✦
      var foo = stuff[i][0];
      foo = “more stuff ” + foo.subs...
SquirrelFish
    Just-in-time compilation for JavaScript
✦

    Compiles a bytecode for common
✦
    functionality
    Spe...
Chrome V8
    Makes extensive use of shaping (fast
✦
    property lookups)
    Hyper-optimized function calls and
✦
    re...
Measuring Speed
    SunSpider
✦
    ✦ Released by the WebKit team last fall
    ✦ Focuses completely on JavaScript

    Dr...
http://ejohn.org/blog/javascript-performance-rundown/
http://ejohn.org/blog/javascript-performance-rundown/
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
    ✦...
Parallel Scripts
    Download scripts simultaneously
✦

    Even though they must execute in order
✦

    <script defer>
✦...
Redirect Caching
    A simple request:
✦
    http://foo.com ->
    http://www.foo.com ->
    http://www.foo.com/
    Very ...
Link Prefetching
    <link rel=”prefetch” href=”someimg.png”/>
✦

    Pre-load resources for later use
✦
    ✦ (images, st...
Communication
postMessage
    A way to pass messages amongst multiple
✦
    frames and windows
    Implemented in all browsers (in some
...
postMessage
    Receiving a Message:
✦

    window.addEventListener(”message”, function(e){
✦
      if (e.origin !== “http...
Cross-Domain XHR
    Landed in Firefox 3.1, support in IE 8
✦

    Add a header to your content:
✦
    Access-Control-Allo...
DOM Navigation
Class Name
    New method:
✦
    getElementsByClassName
    Works just like:
✦
    getElementsByTagName
    Fast way of fin...
Speed Results




http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
Selectors API
    querySelectorAll
✦

    Use CSS selectors to find DOM elements
✦

    document.querySelectorAll(“div p”)
...
Speed Results




http://www2.webkit.org/perf/slickspeed/
Traversal API
    W3C Specification
✦

    Implemented in Firefox 3.1
✦

    Some methods:
✦
    ✦ .nextElementSibling
    ...
Drag and Drop
HTML 5 Dragging
    Includes full support drag and drop events
✦

    Events: dragstart, dragend, dragenter,
✦
    draglea...
Bounding
    getBoundingClientRect
✦
    ✦ Introduced by IE
    ✦ Seeing a wider introduction

    Super-fast way to deter...
JavaScript Threads
    JavaScript has always been single-threaded
✦

    Limited to working linearly
✦

    New HTML 5 Web...
A Simple Worker
    var myWorker = new Worker(’my_worker.js’);  
✦
    myWorker.onmessage = function(event) {  
      aler...
Styling and Effects
    Lots of commons styling effects
✦

    Can be replaced and simplified by the
✦
    browser
    Drasti...
Rounded Corners
    CSS 3 specification
✦




    Implemented in Safari, Firefox, Opera
✦
    ✦ -moz-border-radius: 5px;
  ...
Shadows
    Box Shadows
✦
    ✦ Shadow behind a div
        -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)
    ✦


   ...
Example Shadows




    Demos: http://maettig.com/code/css/text-
✦
    shadow.html
    http://webkit.org/blog/86/box-shado...
Custom Fonts
    Load in custom fonts
✦

    Can load TrueType fonts
✦

    Implemented in Safari and Firefox
✦

    Demo:...
Transforms and Animations
    Transforms allow you to rotate, scale, and
✦
    offset an element
    ✦ -webkit-transform: r...
Canvas
    Proposed and first implemented by Apple
✦
    in WebKit
    A 2d drawing layer
✦
    ✦ With possibilities for fu...
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...
Canvas Embedding
    Canvases can consume:
✦
    ✦ Images
    ✦ Other Canvases

    Will be able to consume (Firefox 3.1, ...
Data
SQL Storage
    Part of HTML 5 - a full client-side SQL
✦
    database (SQLite)
    Implemented in WebKit
✦

    var datab...
Native JSON
    JSON is a format for transferring data
✦
    ✦ (Uses JavaScript syntax to achieve this.)
    ✦ Has been sl...
Performance
    Encoding:
✦




    Decoding:
✦
New Measurements
Painting
    When something is physically drawn to
✦
    the screen
    Hard to quantify without more
✦
    information
  ...
Paint Events
Reflow
    CSS has lots of boxes in it
✦

    Position of boxes is constantly recomputed
✦
    and repositioned (before bei...
Questions?
    John Resig
✦
    http://ejohn.org/
    http://twitter.com/jeresig/
Upcoming SlideShare
Loading in...5
×

Performance Improvements in Browsers

21,052

Published on

A presentation that I gave on January 2009 at Google.

Published in: Technology
5 Comments
65 Likes
Statistics
Notes
No Downloads
Views
Total Views
21,052
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
966
Comments
5
Likes
65
Embeds 0
No embeds

No notes for slide

Performance Improvements in Browsers

  1. 1. Performance Improvements in Browsers John Resig http://ejohn.org/ - http://twitter.com/jeresig/
  2. 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. 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. 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. 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. 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. 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. 8. Google Chrome Chrome 1.0 September 2008 ✦ Features: ✦ ✦ Private browsing ✦ Process per tab Chrome 2.0 upcoming ✦ http://googlechromereleases.blogspot.com/ ✦
  9. 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. 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. 11. JavaScript Engines New wave of engines: ✦ ✦ Firefox: TraceMonkey ✦ Safari: SquirrelFish (Extreme) ✦ Chrome: V8 Continually leap-frogging each other ✦
  12. 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. 13. Engine Layers JavaScript Code JavaScript Engine (C++) Virtual Bytecode Machine Machine Code
  14. 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. 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. 16. Shaping (cont.) EXEC( prop ) { ✦ IF ISFN( prop ) { RUN( prop ) } ELSE { ERROR } } After shaping: ✦ RUN( PROP( obj, name ) ) Optimized Bytecode ✦
  17. 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. 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. 19. Function Inlining for ( var i = 0; i < 1000; i++ ) { ✦ var foo = stuff[i][0]; foo = “more stuff ” + foo.substr(1); }
  20. 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. 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. 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/ ✦
  23. 23. http://ejohn.org/blog/javascript-performance-rundown/
  24. 24. http://ejohn.org/blog/javascript-performance-rundown/
  25. 25. http://ejohn.org/blog/javascript-performance-rundown/
  26. 26. Network
  27. 27. Network Steve Souders’ UA tool: ✦ http://stevesouders.com/ua/ Also see: YSlow ✦
  28. 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. 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. 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. 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. 32. Communication
  33. 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. 34. postMessage Receiving a Message: ✦ window.addEventListener(”message”, function(e){ ✦ if (e.origin !== “http://example.com:8080“) return; alert( e.data ); }, false);
  35. 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. 36. DOM Navigation
  37. 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 ✦
  38. 38. Speed Results http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
  39. 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.
  40. 40. Speed Results http://www2.webkit.org/perf/slickspeed/
  41. 41. Traversal API W3C Specification ✦ Implemented in Firefox 3.1 ✦ Some methods: ✦ ✦ .nextElementSibling ✦ .previousElementSibling ✦ .firstElementChild ✦ .lastElementChild Related: ✦ ✦ .children (All browsers)
  42. 42. Drag and Drop
  43. 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. 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. 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. 46. A Simple Worker var myWorker = new Worker(’my_worker.js’);   ✦ myWorker.onmessage = function(event) {   alert(”Called back by the worker!n”);   };  
  47. 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. 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. 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. 50. Example Shadows Demos: http://maettig.com/code/css/text- ✦ shadow.html http://webkit.org/blog/86/box-shadow/
  51. 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. 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. 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. 54. Shapes and Paths NOT vectors (unlike SVG) ✦ Rectangles ✦ Arcs ✦ Lines ✦ Curves ✦ Charts: ✦
  55. 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. 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. 57. Data
  58. 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. 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. 60. Performance Encoding: ✦ Decoding: ✦
  61. 61. New Measurements
  62. 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. 63. Paint Events
  64. 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. 65. Questions? John Resig ✦ http://ejohn.org/ http://twitter.com/jeresig/
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×