New Features Coming in Browsers (RIT '09)

  • 415 views
Uploaded on

Talk I gave in May 2009 at RIT.

Talk I gave in May 2009 at RIT.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
415
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
10
Comments
0
Likes
1

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. 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