This document summarizes upcoming improvements and new features in web browsers, including Firefox 3.1, Safari 4, Internet Explorer 8, Opera 10, and Google Chrome. Many of the browsers are focusing on better JavaScript performance through new engines like TraceMonkey and V8. New features include process per tab, postMessage for cross-domain communication, HTML5 drag and drop, and the Canvas element for offloading graphics work to the client. Overall the browsers are aiming to improve speed, compatibility, and the user experience through these new implementations and technologies.

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/