Your SlideShare is downloading. ×
0
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Performance Improvements in Browsers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Performance Improvements in Browsers

20,958

Published on

A presentation that I gave on January 2009 at Google.

A presentation that I gave on January 2009 at Google.

Published in: Technology
5 Comments
64 Likes
Statistics
Notes
No Downloads
Views
Total Views
20,958
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
965
Comments
5
Likes
64
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  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/ ✦
  23. http://ejohn.org/blog/javascript-performance-rundown/
  24. http://ejohn.org/blog/javascript-performance-rundown/
  25. http://ejohn.org/blog/javascript-performance-rundown/
  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 ✦
  38. Speed Results http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
  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. Speed Results http://www2.webkit.org/perf/slickspeed/
  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/

×