cs193h: high performance web sites lecture 19: vol 2 – load scripts without blocking steve souders...
TRANSCRIPT
CS193H:High Performance Web Sites
Lecture 19: Vol 2 – Load Scripts Without Blocking
Steve SoudersGoogle
announcements11/17 – guest lecturer: Robert Johnson
(Facebook), "Fast Data at Massive Scale - lessons learned at Facebook"
Handouts of Vol 2 chapters 1-4 are available in class and at office hours. Copies are being sent to SCPD students. DO NOT COPY OR DISTRIBUTE THESE HANDOUTS!
Assignment #5 - Web 100 Double Check due today 3:15pm (now)
High Performance Web Sites, Vol 2
1. Split the initial payload2. Load scripts without blocking3. Don't scatter inline scripts4. Split dominant domains5. Make static content cookie-free6. Reduce cookie weight7. Minify CSS8. Optimize images9. Use iframes sparingly10. To www or not to www
} part 1
AOLeBayFacebookMySpaceWikipediaYahoo!
Why focus on JavaScript?
YouTube
Scripts Block
<script src="A.js"> blocks parallel downloads and rendering
http://stevesouders.com/cuzillion/?ex=10008
MSNScripts and other resources downloaded in parallel! How? Secret sauce?!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);
MSN.com: Parallel Scripts
Advanced Script Loading
XHR EvalXHR InjectionScript in IframeScript DOM ElementScript Deferdocument.write Script Tag
all of these techniques load scripts:• in parallel with other resources• without blocking rendering
XHR Eval
script must have same domain as main page
must refactor script
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=10009
XHR Injection
var xhrObj = getXHRObject();xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; var se=document.createElement('script');
document.getElementsByTagName('head')0].appendChild(se); se.text = xhrObj.responseText; };xhrObj.open('GET', 'A.js', true);xhrObj.send('');
script must have same domain as main page
http://stevesouders.com/cuzillion/?ex=10015
Script in Iframe
<iframe src='A.html' width=0 height=0 frameborder=0 id=frame1></iframe>
iframe must have same domain as main page
must refactor script:// access iframe from main pagewindow.frames[0].createNewDiv();
// access main page from iframeparent.document.createElement('div');
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);
script and main page domains can differ
no need to refactor JavaScript
http://stevesouders.com/cuzillion/?ex=10010
Script Defer
<script defer src='A.js'></script>
only supported in IE (just landed in FF 3.1)
script and main page domains can differ
no need to refactor JavaScript
http://stevesouders.com/cuzillion/?ex=10013
document.write Script Tag
document.write("<scr" + "ipt type='text/javascript' src='A.js'>" + "</scr" +
"ipt>");
parallelization only works in IE
parallel downloads for scripts, nothing else
all document.writes must be in same script block
http://stevesouders.com/cuzillion/?ex=10014
Browser Busy Indicators
Browser Busy Indicators
good to show busy indicators when the user needs feedbackbad when downloading in the background
Ensure scripts execute in order:necessary when scripts have dependenciesIE: http://stevesouders.com/cuzillion/?ex=10017
FF: http://stevesouders.com/cuzillion/?ex=10018
Avoid scripts executing in order:faster – first script back is executed immediatelyhttp://stevesouders.com/cuzillion/?ex=10019
Ensure/Avoid Ordered Execution
Summary of Traits
*Only other document.write scripts are downloaded in parallel (in the same script block).
and the winner is...XHR EvalXHR InjectionScript in iframeScript DOM ElementScript Defer
Script DOM ElementScript Defer
Script DOM Element
Script DOM Element (FF)Script Defer (IE)
XHR EvalXHR InjectionScript in iframeScript DOM Element (IE)
XHR InjectionXHR EvalScript DOM Element (IE)
Managed XHR InjectionManaged XHR EvalScript DOM Element
Managed XHR InjectionManaged XHR Eval
Script DOM Element (FF)Script Defer (IE)Managed XHR EvalManaged XHR Injection
Script DOM Element (FF)Script Defer (IE)Managed XHR EvalManaged XHR Injection
different domains same domains
no order
preserve orderno order
no busyshow busy
show busyno busy
preserve order
Load Scripts without Blocking
don't let scripts block other downloadsyou can still control execution order, busy
indicators, and onload event
What about inline scripts?next class
Homework12/1 11:59pm – Assignment #6 - Improving a Top Site• rules 11-14• Vol 2:
‐ Split the Initial Payload‐ Load Scripts Without Blocking‐ Don't Scatter Inline Scripts‐ Shard Dominant Domains‐ Optimize Images
QuestionsWhat are the six techniques for loading scripts in
parallel? Give a code example of each one. Which trigger busy indicators? Which have same domain restriction? Which work with existing script responses? Which ensure scripts are executed in the order specified?
Why is executing scripts out of order faster?If you could only use one technique, which would
you pick? Why?Which of the techniques does block rendering?