cs193h: high performance web sites lecture 19: vol 2 – load scripts without blocking steve souders...

CS193H:High Performance Web Sites

Lecture 19: Vol 2 – Load Scripts Without Blocking

Steve SoudersGoogle

souders@cs.stanford.edu

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?