New Features Coming in Browsers (RIT '09)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

New Features Coming in Browsers (RIT '09)

on

  • 730 views

Talk I gave in May 2009 at RIT.

Talk I gave in May 2009 at RIT.

Statistics

Views

Total Views
730
Views on SlideShare
726
Embed Views
4

Actions

Likes
1
Downloads
10
Comments
0

1 Embed 4

http://lanyrd.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

New Features Coming in Browsers (RIT '09) Presentation Transcript

  • 1. New Features Coming in Browsers John Resighttp://ejohn.org/ - http://twitter.com/jeresig/ jeresig@gmail.com
  • 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. 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. 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. 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✦ http://www.microsoft.com/ windows/internet-explorer/ beta/readiness/new-features.aspx✦ No details on IE 9, yet.
  • 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.5 (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. 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. 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. Communication
  • 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. 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. 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. DOM Navigation
  • 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. Speed Resultshttp://ejohn.org/blog/getelementsbyclassname-speed-comparison/
  • 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. Speed Resultshttp://www2.webkit.org/perf/slickspeed/
  • 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. 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. 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. 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. Example Shadows✦ Demos: http://maettig.com/code/css/text- shadow.html http://webkit.org/blog/86/box-shadow/
  • 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. 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. Data
  • 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. 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. Performance✦ Encoding:✦ Decoding:
  • 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. Shapes and Paths✦ NOT vectors (unlike SVG)✦ Rectangles✦ Arcs✦ Lines✦ Curves✦ Charts:
  • 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. 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. 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. A Simple Worker✦ var myWorker = new Worker(’my_worker.js’);   myWorker.onmessage = function(event) {   alert(”Called back by the worker!n”);   };  
  • 56. Questions?✦ John Resig http://ejohn.org/ http://twitter.com/jeresig/ jeresig@gmail.com✦ Mozilla will be at the Fall Career Fair