performance improvements in browsers
TRANSCRIPT
![Page 1: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/1.jpg)
Performance Improvements in
BrowsersJohn Resig
http://ejohn.org/ - http://twitter.com/jeresig/
![Page 2: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/2.jpg)
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.
![Page 3: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/3.jpg)
Upcoming Browsers✦ The browsers:
✦ Firefox 3.1✦ Safari 4✦ Internet Explorer 8✦ Opera 10✦ Google Chrome
✦ Defining characteristics:✦ Better performance✦ Advanced JavaScript engines
![Page 4: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/4.jpg)
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
![Page 5: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/5.jpg)
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/
![Page 6: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/6.jpg)
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 recentlyreleased
✦ http://www.microsoft.com/windows/internet-explorer/beta/readiness/new-features.aspx
![Page 7: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/7.jpg)
Opera 10✦ Unspecified release schedule (2009?)✦ Features:
✦ ACID 3 compliance✦ Video and Audio tags
✦ Opera 9.6 recently released✦ http://labs.opera.com/
![Page 8: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/8.jpg)
Google Chrome✦ Chrome 1.0 September 2008✦ Features:
✦ Private browsing✦ Process per tab
✦ Chrome 2.0 upcoming✦ http://googlechromereleases.blogspot.com/
![Page 9: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/9.jpg)
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
![Page 10: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/10.jpg)
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)
![Page 11: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/11.jpg)
JavaScript Engines✦ New wave of engines:
✦ Firefox: TraceMonkey✦ Safari: SquirrelFish (Extreme)✦ Chrome: V8
✦ Continually leap-frogging each other
![Page 12: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/12.jpg)
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 ) {}
![Page 13: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/13.jpg)
VirtualMachine
Engine Layers
JavaScript Code
JavaScript Engine (C++)
Bytecode
Machine Code
![Page 14: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/14.jpg)
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 ); }}
![Page 15: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/15.jpg)
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 }}
![Page 16: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/16.jpg)
Shaping (cont.)✦ EXEC( prop ) {
IF ISFN( prop ) { RUN( prop ) } ELSE { ERROR }}
✦ After shaping:RUN( PROP( obj, name ) )
✦ Optimized Bytecode
![Page 17: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/17.jpg)
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/
![Page 18: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/18.jpg)
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 )
![Page 19: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/19.jpg)
Function Inlining✦ for ( var i = 0; i < 1000; i++ ) {
var foo = stuff[i][0]; foo = “more stuff” + foo.substr(1);}
![Page 20: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/20.jpg)
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
![Page 21: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/21.jpg)
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/
![Page 22: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/22.jpg)
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/
![Page 23: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/23.jpg)
http://ejohn.org/blog/javascript-performance-rundown/
![Page 24: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/24.jpg)
http://ejohn.org/blog/javascript-performance-rundown/
![Page 25: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/25.jpg)
http://ejohn.org/blog/javascript-performance-rundown/
![Page 26: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/26.jpg)
Network
![Page 27: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/27.jpg)
Network✦ Steve Souders’ UA tool:
http://stevesouders.com/ua/✦ Also see: YSlow
![Page 28: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/28.jpg)
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
![Page 29: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/29.jpg)
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
![Page 30: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/30.jpg)
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.
![Page 31: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/31.jpg)
Link Prefetching✦ <link rel=”prefetch” href=”someimg.png”/>✦ Pre-load resources for later use
✦ (images, stylesheets)✦ Currently only in Firefox✦ Replacement for JavaScript preloading
![Page 32: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/32.jpg)
Communication
![Page 33: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/33.jpg)
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/”);
![Page 34: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/34.jpg)
postMessage✦ Receiving a Message:✦ window.addEventListener(”message”, function(e){
if (e.origin !== “http://example.com:8080“) return; alert( e.data );}, false);
![Page 35: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/35.jpg)
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
![Page 36: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/36.jpg)
DOM Navigation
![Page 37: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/37.jpg)
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
![Page 38: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/38.jpg)
Speed Results
http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
![Page 39: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/39.jpg)
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.
![Page 40: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/40.jpg)
Speed Results
http://www2.webkit.org/perf/slickspeed/
![Page 41: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/41.jpg)
Traversal API✦ W3C Specification✦ Implemented in Firefox 3.1✦ Some methods:
✦ .nextElementSibling✦ .previousElementSibling✦ .firstElementChild✦ .lastElementChild
✦ Related:✦ .children (All browsers)
![Page 42: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/42.jpg)
Drag and Drop
![Page 43: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/43.jpg)
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
![Page 44: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/44.jpg)
Bounding✦ getBoundingClientRect
✦ Introduced by IE✦ Seeing a wider introduction
✦ Super-fast way to determine the position of an element
✦ Better alternative to manual computation
![Page 45: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/45.jpg)
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.
![Page 46: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/46.jpg)
A Simple Worker✦ var myWorker = new Worker(’my_worker.js’);
myWorker.onmessage = function(event) { alert(”Called back by the worker!\n”); };
![Page 47: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/47.jpg)
Styling and Effects✦ Lots of commons styling effects✦ Can be replaced and simplified by the
browser✦ Drastically simplify pages and improve
their performance
![Page 48: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/48.jpg)
Rounded Corners✦ CSS 3 specification
✦ Implemented in Safari, Firefox, Opera✦ -moz-border-radius: 5px;✦ -webkit-border-radius: 5px;
✦ Can replace clumsy, slow, old methods.
![Page 49: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/49.jpg)
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.
![Page 50: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/50.jpg)
Example Shadows
✦ Demos: http://maettig.com/code/css/text-shadow.htmlhttp://webkit.org/blog/86/box-shadow/
![Page 51: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/51.jpg)
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.
![Page 52: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/52.jpg)
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.
![Page 53: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/53.jpg)
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
![Page 54: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/54.jpg)
Shapes and Paths✦ NOT vectors (unlike SVG)✦ Rectangles✦ Arcs✦ Lines✦ Curves
✦ Charts:
![Page 55: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/55.jpg)
Fill and Stroke✦ All can be styled (similar to CSS)✦ Stroke styles the path (or outline)✦ Fill is the color of the interior✦ Sparklines:
![Page 56: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/56.jpg)
Canvas Embedding✦ Canvases can consume:
✦ Images✦ Other Canvases
✦ Will be able to consume (Firefox 3.1, Safari 4):✦ Video
✦ In an extension:✦ Web Pages
![Page 57: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/57.jpg)
Data
![Page 58: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/58.jpg)
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”);});
![Page 59: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/59.jpg)
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)
![Page 60: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/60.jpg)
Performance✦ Encoding:
✦ Decoding:
![Page 61: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/61.jpg)
New Measurements
![Page 62: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/62.jpg)
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/
![Page 63: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/63.jpg)
Paint Events
![Page 64: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/64.jpg)
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/
![Page 65: Performance Improvements In Browsers](https://reader033.vdocuments.us/reader033/viewer/2022052523/5551f4f6b4c905421a8b4746/html5/thumbnails/65.jpg)
Questions?✦ John Resig
http://ejohn.org/http://twitter.com/jeresig/