A presentation that I gave on January 2009 at Google.

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/