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
ā¦ Work on Firebug (great developer tool)
ā¦ 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
ā¦ Deļ¬ning 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 1 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 late 2008/early 2009
ā¦ Features:
ā¦ Backwards compatibility with IE 7
ā¦ Web Clips (trim out a part of a page and
place on desktop)
ā¦ Process per tab
ā¦ Beta 2 recently
released
ā¦ http://www.microsoft.com/
windows/internet-explorer/
beta/readiness/new-features.aspx
7. Opera 10
ā¦ Unspeciļ¬ed release schedule (2009?)
ā¦ Features:
ā¦ ACID 3 compliance
ā¦ Video and Audio tags
ā¦ Opera 9.6 recently released
ā¦ http://labs.opera.com/
8. Google Chrome
ā¦ Released September 2008
ā¦ Features:
ā¦ Private browsing
ā¦ Process per tab
ā¦ Next release schedule unknown
ā¦ 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. 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/
19. Network
ā¦ Steve Souders is the man.
ā¦ http://stevesouders.com/ua/
ā¦ YSlow
20. 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
21. Parallel Scripts
ā¦ Download scripts simultaneously
ā¦ Even though they must execute in order
ā¦ <script defer>
ā¦ From Internet Explorer
ā¦ Just landed for Firefox 3.1
ā¦ Replacement for JavaScript-based
loading
22. 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.
23. Link Prefetching
ā¦ <link rel=āprefetchā href=āsomeimg.pngā/>
ā¦ Pre-load resources for later use
ā¦ (images, stylesheets)
ā¦ Currently only in Firefox
ā¦ Replacement for JavaScript preloading
25. Class Name
ā¦ New method:
getElementsByClassName
ā¦ Works just like:
getElementsByTagName
ā¦ Fast way of ļ¬nding elements by their class
name(s):
<div class=āperson sidebarā></div>
ā¦ document.getElementsByClassName(āsidebarā)
ā¦ Safari 3.1 and Firefox 3.0
ā¦ Drop-in replacement for existing queries
27. Selectors API
ā¦ querySelectorAll
ā¦ Use CSS selectors to ļ¬nd DOM elements
ā¦ document.querySelectorAll(ādiv pā)
ā¦ Good cross-browser support
ā¦ IE 8, Safari 4, FF 3, Opera 10
ā¦ Drop-in replacement for JavaScript
libraries.
29. 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!
ā¦ Demo: http://ejohn.org/apps/threads/
ā¦ Drop-in usable, huge quality boost.
30. Styling and Eļ¬ects
ā¦ Lots of commons styling eļ¬ects
ā¦ Can be replaced and simpliļ¬ed by the
browser
ā¦ Drastically simplify pages and improve
their performance
31. Rounded Corners
ā¦ CSS 3 speciļ¬cation
ā¦ Implemented in Safari, Firefox, Opera
ā¦ -moz-border-radius: 5px;
ā¦ -webkit-border-radius: 5px;
ā¦ Can replace clumsy, slow, old methods.
32. 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.
33. Example Shadows
ā¦ Demos: http://maettig.com/code/css/text-
shadow.html
http://webkit.org/blog/86/box-shadow/
34. 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.
35. Transforms and Animations
ā¦ Transforms allow you to rotate, scale, and
oļ¬set 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.
36. Canvas
ā¦ Proposed and ļ¬rst 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)
ā¦ Oļ¬oad rendering to client
ā¦ Better user interaction
37. Shapes and Paths
ā¦ NOT vectors (unlike SVG)
ā¦ Rectangles
ā¦ Arcs
ā¦ Lines
ā¦ Curves
ā¦ Charts:
38. Fill and Stroke
ā¦ All can be styled (similar to CSS)
ā¦ Stroke styles the path (or outline)
ā¦ Fill is the color of the interior
ā¦ Sparklines:
39. Canvas Embedding
ā¦ Canvases can consume:
ā¦ Images
ā¦ Other Canvases
ā¦ Will be able to consume (Firefox 3.1):
ā¦ Video
ā¦ In an extension:
ā¦ Web Pages
41. 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)
44. 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/
45. Reļ¬ow
ā¦ CSS has lots of boxes in it
ā¦ Position of boxes is constantly recomputed
and repositioned (before being painted)
ā¦ This is reļ¬ow
ā¦ Demo: http://dougt.wordpress.com/
2008/05/24/what-is-a-reļ¬ow/
46. Questions?
ā¦ John Resig
http://ejohn.org/
http://twitter.com/jeresig/