Your SlideShare is downloading. ×
0
New Features       Coming in       Browsers                  John Resighttp://ejohn.org/ - http://twitter.com/jeresig/    ...
About Me✦   Work for the Mozilla Corporation (Firefox!)    ✦ Do a lot of JavaScript work    ✦ Dromaeo.com is my performanc...
Upcoming Browsers✦   The browsers:    ✦ Firefox 3.5    ✦ Safari 4    ✦ Internet Explorer 9 (?)    ✦ Opera 10    ✦ Google C...
Firefox 3.5✦   Set to be released Summer 2009✦   Goals:    ✦ Performance improvements    ✦ Video and Audio tags    ✦ Priva...
Safari 4✦   Released in conjunction with OS X 10.6✦   Features:    ✦ Performance improvements    ✦ Desktop Apps    ✦ ACID ...
Internet Explorer 8✦   Released early 2009✦   Features:    ✦ Backwards compatibility with IE 7    ✦ Web Clips (trim out a ...
Opera 10✦   Unspecified release schedule (2009?)✦   Features:    ✦ ACID 3 compliance    ✦ Video and Audio tags✦   Opera 9.6...
Google Chrome✦   Chrome 1.0 September 2008✦   Features:    ✦ Private browsing    ✦ Process per tab✦   Chrome 2.0 upcoming✦...
Process Per Tab✦   Most browsers have a single process    ✦ Share memory, resources    ✦ Pages rendered using threads✦   I...
Process Per Tab✦   Examples of changes, in Chrome.✦   Timer speed is what you set it to.    ✦ Browsers cap the speed to 10...
JavaScript Engines✦   New wave of engines:    ✦ Firefox: TraceMonkey    ✦ Safari: SquirrelFish (Extreme)    ✦ Chrome: V8✦ ...
Common Areas✦   Virtual Machines    ✦ Optimized to run a JavaScript-specific      bytecode✦   Shaping    ✦ Determine if two...
Engine Layers          JavaScript Code       JavaScript Engine (C++)                                  Virtual             ...
Bytecode✦   Specific low-level commands✦   Written in machine code✦   a + b;✦   PLUS( a, b ) {      IF ISSTRING(a) OR ISSTR...
Shaping✦   Simple JavaScript code:    obj.method()✦   GETPROP( obj, name ) {      IF ISOBJECT(obj) {        IF HASPROP(obj...
Shaping (cont.)✦   EXEC( prop ) {      IF ISFN( prop ) {        RUN( prop )      } ELSE {        ERROR      }    }✦   Afte...
TraceMonkey✦   Firefox uses an engine called    SpiderMonkey (written in C)✦   Tracing technology layered on for Firefox  ...
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.substr(1)...
SquirrelFish✦   Just-in-time compilation for JavaScript✦   Compiles a bytecode for common    functionality✦   Specialties:...
Chrome V8✦   Makes extensive use of shaping (fast    property lookups)✦   Hyper-optimized function calls and    recursion✦...
Measuring Speed✦   SunSpider    ✦ Released by the WebKit team last fall    ✦ Focuses completely on JavaScript✦   Dromaeo  ...
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
Parallel Scripts✦   Download scripts simultaneously✦   Even though they must execute in order✦   <script defer>    ✦ From ...
Link Prefetching✦   <link rel=”prefetch” href=”someimg.png”/>✦   Pre-load resources for later use    ✦ (images, stylesheet...
Communication
postMessage✦   A secure way to pass string messages    amongst multiple frames and windows✦   Implemented in all browsers ...
postMessage✦   Sending a message:✦   iframe.postMessage(“test”,      “http://google.com/”);✦   Receiving a Message:✦   win...
Cross-Domain XHR✦   Landed in Firefox 3.5, support in IE 8✦   Add a header to your content:    Access-Control-Allow-Origin...
DOM Navigation
Class Name✦   New method:    getElementsByClassName✦   Works just like:    getElementsByTagName✦   Fast way of finding elem...
Speed Resultshttp://ejohn.org/blog/getelementsbyclassname-speed-comparison/
Selectors API✦   querySelectorAll✦   Use CSS selectors to find DOM elements✦   document.querySelectorAll(“#foo > p”)✦   Goo...
Speed Resultshttp://www2.webkit.org/perf/slickspeed/
Traversal API✦   W3C Specification✦   Implemented in Firefox 3.5✦   Some methods:    ✦ .nextElementSibling    ✦ .previousEl...
Styling and Effects✦   Lots of commons styling effects✦   Can be replaced and simplified by the    browser✦   Drastically sim...
Rounded Corners✦   CSS 3 specification✦   Implemented in Safari, Firefox, Opera    ✦ -moz-border-radius: 5px;    ✦ -webkit-...
Shadows✦   Box Shadows    ✦ Shadow behind a div    ✦   -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)✦   Text Shadows ...
Example Shadows✦   Demos: http://maettig.com/code/css/text-    shadow.html    http://webkit.org/blog/86/box-shadow/
Custom Fonts✦   Load in custom fonts✦   Can load TrueType fonts✦   Implemented in Safari and Firefox✦   Demo: http://ejohn...
Transforms and Animations✦   Transforms allow you to rotate, scale, and    offset an element    ✦ -webkit-transform: rotate...
Data
SQL Storage✦   Part of HTML 5 - a full client-side SQL    database (SQLite)✦   Implemented in WebKit✦   var database = ope...
Native JSON✦   JSON is a format for transferring data    ✦ (Uses JavaScript syntax to achieve this.)    ✦ Has been slow an...
Performance✦   Encoding:✦   Decoding:
Canvas✦   Proposed and first implemented by Apple    in WebKit✦   A 2d drawing layer    ✦ With possibilities for future exp...
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 of the i...
Canvas Embedding✦   Canvases can consume:    ✦ Images    ✦ Other Canvases✦   Will be able to consume (Firefox 3.5, Safari ...
JavaScript Threads✦   JavaScript has always been single-threaded✦   Limited to working linearly✦   New HTML 5 Web Workers✦...
A Simple Worker✦   var myWorker = new Worker(’my_worker.js’);      myWorker.onmessage = function(event) {        alert(”Ca...
Questions?✦   John Resig    http://ejohn.org/    http://twitter.com/jeresig/    jeresig@gmail.com✦   Mozilla will be at th...
Upcoming SlideShare
Loading in...5
×

New Features Coming in Browsers (RIT '09)

574

Published on

Talk I gave in May 2009 at RIT.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
574
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "New Features Coming in Browsers (RIT '09)"

  1. 1. New Features Coming in Browsers John Resighttp://ejohn.org/ - http://twitter.com/jeresig/ jeresig@gmail.com
  2. 2. About Me✦ Work for the Mozilla Corporation (Firefox!) ✦ Do a lot of JavaScript work ✦ Dromaeo.com is my performance test suite ✦ Tests the performance of JavaScript engines ✦ Tests the performance of browser DOM ✦ TestSwarm.com is an application for distributed JavaScript testing.✦ 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.5 ✦ Safari 4 ✦ Internet Explorer 9 (?) ✦ Opera 10 ✦ Google Chrome 2✦ Defining characteristics: ✦ Better performance ✦ Advanced JavaScript engines
  4. 4. Firefox 3.5✦ Set to be released Summer 2009✦ Goals: ✦ Performance improvements ✦ Video and Audio tags ✦ Private browsing✦ Beta 4 just released✦ http://developer.mozilla.org/En/Firefox_3.5_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✦ http://www.microsoft.com/ windows/internet-explorer/ beta/readiness/new-features.aspx✦ No details on IE 9, yet.
  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.5 (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. Parallel Scripts✦ Download scripts simultaneously✦ Even though they must execute in order✦ <script defer> ✦ From Internet Explorer ✦ Just landed for Firefox 3.5 ✦ In Opera as well ✦ Replacement for JavaScript-based loading
  29. 29. Link Prefetching✦ <link rel=”prefetch” href=”someimg.png”/>✦ Pre-load resources for later use ✦ (images, stylesheets)✦ Currently only in Firefox✦ Replacement for JavaScript preloading
  30. 30. Communication
  31. 31. postMessage✦ A secure way to pass string messages amongst multiple frames and windows✦ Implemented in all browsers (in some capacity). addEventListener(“message”,...) postMessage(“hi!”)
  32. 32. postMessage✦ Sending a message:✦ iframe.postMessage(“test”, “http://google.com/”);✦ Receiving a Message:✦ window.addEventListener(”message”, function(e){ if (e.origin !== “http://example.com:8080“) return; alert( e.data ); }, false);
  33. 33. Cross-Domain XHR✦ Landed in Firefox 3.5, 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
  34. 34. DOM Navigation
  35. 35. 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
  36. 36. Speed Resultshttp://ejohn.org/blog/getelementsbyclassname-speed-comparison/
  37. 37. Selectors API✦ querySelectorAll✦ Use CSS selectors to find DOM elements✦ document.querySelectorAll(“#foo > p”)✦ Good cross-browser support ✦ IE 8, Safari 3, FF 3.5, Opera 10✦ Drop-in replacement for JavaScript libraries.
  38. 38. Speed Resultshttp://www2.webkit.org/perf/slickspeed/
  39. 39. Traversal API✦ W3C Specification✦ Implemented in Firefox 3.5✦ Some methods: ✦ .nextElementSibling ✦ .previousElementSibling ✦ .firstElementChild ✦ .lastElementChild nextElementSibling <div> Text <div>✦ Related: previousElementSibling ✦ .children (All browsers)
  40. 40. Styling and Effects✦ Lots of commons styling effects✦ Can be replaced and simplified by the browser✦ Drastically simplify pages and improve their performance✦ New: The ability to apply SVG transforms and effects using CSS.
  41. 41. Rounded Corners✦ CSS 3 specification✦ Implemented in Safari, Firefox, Opera ✦ -moz-border-radius: 5px; ✦ -webkit-border-radius: 5px;✦ Can replace clumsy, slow, old methods.
  42. 42. 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.
  43. 43. Example Shadows✦ Demos: http://maettig.com/code/css/text- shadow.html http://webkit.org/blog/86/box-shadow/
  44. 44. 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.
  45. 45. 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.
  46. 46. Data
  47. 47. 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(”DELETE FROM test WHERE 1=1;”); });
  48. 48. 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.5 and IE 8✦ Drop-in usable, today ✦ JSON.encode(object) ✦ JSON.decode(string)
  49. 49. Performance✦ Encoding:✦ Decoding:
  50. 50. 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
  51. 51. Shapes and Paths✦ NOT vectors (unlike SVG)✦ Rectangles✦ Arcs✦ Lines✦ Curves✦ Charts:
  52. 52. Fill and Stroke✦ All can be styled (similar to CSS)✦ Stroke styles the path (or outline)✦ Fill is the color of the interior✦ Sparklines:
  53. 53. Canvas Embedding✦ Canvases can consume: ✦ Images ✦ Other Canvases✦ Will be able to consume (Firefox 3.5, Safari 4): ✦ Video✦ In an extension: ✦ Web Pages
  54. 54. 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.
  55. 55. A Simple Worker✦ var myWorker = new Worker(’my_worker.js’);   myWorker.onmessage = function(event) {   alert(”Called back by the worker!n”);   };  
  56. 56. Questions?✦ John Resig http://ejohn.org/ http://twitter.com/jeresig/ jeresig@gmail.com✦ Mozilla will be at the Fall Career Fair
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×