Talk I gave in May 2009 at RIT.

1. New Features
Coming in
Browsers
John Resig
http://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 Results
http://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 Results
http://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