Académique Documents
Professionnel Documents
Culture Documents
Steve Souders
souders@google.com
http://stevesouders.com/
Disclaimer: This content does not necessarily reflect the opinions of my employer.
The Importance of Frontend
Performance
9% 91%
17% 83%
Yahoo!
Wikipedia
eBay
AOL
MySpace
YouTube
Facebook
Scripts Block
<script src="A.js"> blocks parallel
downloads and rendering
http://stevesouders.com/cuzillion/?ex=10008
What's "Cuzillion"?
Cuzillion
'cuz there are a zillion pages to check
MSN
Scripts and other resources downloaded
in parallel! How?
var
p=g.getElementsByTagName("HEAD")[0];
var c=g.createElement("script");
c.type="text/javascript";
c.onreadystatechange=n;
c.onerror=c.onload=k;
c.src=e;
p.appendChild(c)
Advanced Script Loading
XHR Eval
XHR Injection
Script in Iframe
Script DOM Element
Script Defer
document.write Script Tag
XHR Eval
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
http://stevesouders.com/cuzillion/?ex=10012
Script DOM Element
var se = document.createElement('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);
http://stevesouders.com/cuzillion/?ex=10010
Script Defer
<script defer src='A.js'></script>
only supported in IE
script and main page domains can differ
no need to refactor JavaScript
http://stevesouders.com/cuzillion/?ex=10013
document.write Script Tag
document.write("<scri" +
"ipt type='text/javascript' src='A.js'>" +
"</scri" + "ipt>");
http://stevesouders.com/cuzillion/?ex=10014
Browser Busy Indicators
Browser Busy Indicators
*
Only other document.write scripts are downloaded in parallel (in the same script block).
and the winner is...
Load Scripts without Blocking
workarounds:
initiate execution with setTimeout
move JavaScript to external script with
advanced downloading techniques
Inline Scripts after Stylesheets
Block Downloading
Firefox blocks parallel downloads when
downloading stylesheets
IE doesn't...
...unless the stylesheet is followed by an
inline script
http://stevesouders.com/cuzillion/?ex=10021
MSN
Wikipedia
eBay
MySpace
Don't Scatter Scripts