1. CS193H: High Performance Web Sites Lecture 19: Vol 2 – Load Scripts Without Blocking Steve Souders Google souders@cs.stanford.edu

2. announcements 11/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)

3. High Performance Web Sites, Vol 2 1.Split the initial payload 2.Load scripts without blocking 3.Don't scatter inline scripts 4.Split dominant domains 5.Make static content cookie-free 6.Reduce cookie weight 7.Minify CSS 8.Optimize images 9.Use iframes sparingly 10.To www or not to www } part 1

4. AOL eBay Facebook MySpace Wikipedia Yahoo! Why focus on JavaScript? YouTube

5. Scripts Block blocks parallel downloads and rendering http://stevesouders.com/cuzillion/?ex=10008

6. MSN Scripts 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

7. Advanced Script Loading XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag all of these techniques load scripts: in parallel with other resources without blocking rendering

8. 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

9. 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

10. Script in Iframe <iframe src='A.html' width=0 height=0 frameborder=0 id=frame1> iframe must have same domain as main page must refactor script: // access iframe from main page window.frames[0].createNewDiv(); // access main page from iframe parent.document.createElement('div'); http://stevesouders.com/cuzillion/?ex=10012

11. 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

12. Script Defer 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

13. document.write Script Tag document.write("<scr" + "ipt type='text/javascript' src='A.js'>" + " "); parallelization only works in IE parallel downloads for scripts, nothing else all document.write s must be in same script block http://stevesouders.com/cuzillion/?ex=10014

14. Browser Busy Indicators

15. status bar progress bar logocursor block render block onload normal Script Src FFIE,FF FFIE,FF XHR Eval no XHR Injection no Script in Iframe IE,FFFFIE,FFFFnoIE,FF Script DOM Element FF noFF Script Defer FF IE,FF document.write Script Tag FFIE,FF FFIE,FF good to show busy indicators when the user needs feedback bad when downloading in the background

16. Ensure scripts execute in order: necessary when scripts have dependencies IE: http://stevesouders.com/cuzillion/?ex=10017 http://stevesouders.com/cuzillion/?ex=10017 FF: http://stevesouders.com/cuzillion/?ex=10018 http://stevesouders.com/cuzillion/?ex=10018 Avoid scripts executing in order: faster – first script back is executed immediately http://stevesouders.com/cuzillion/?ex=10019 Ensure/Avoid Ordered Execution

17. Summary of Traits || down- loads domains can differ existing scripts browser busy ensures order size (bytes) normal Script Src noyes IE,FF ~50 XHR Eval IE,FFno ~500 XHR Injection IE,FFnoyesno ~500 Script in Iframe IE,FFno IE,FFno~50 Script DOM Element IE,FFyes FF ~200 Script Defer IEyes IE,FFIE~50 document.write Script Tag IE * yes IE,FFIE~100 * Only other document.write scripts are downloaded in parallel (in the same script block).

18. and the winner is... XHR Eval XHR Injection Script in iframe Script DOM Element Script Defer Script DOM Element Script Defer Script DOM Element Script DOM Element (FF) Script Defer (IE) XHR Eval XHR Injection Script in iframe Script DOM Element (IE) XHR Injection XHR Eval Script DOM Element (IE) Managed XHR Injection Managed XHR Eval Script DOM Element Managed XHR Injection Managed XHR Eval Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection different domains same domains no order preserve order no order no busy show busy no busy preserve order

19. Load Scripts without Blocking don't let scripts block other downloads you can still control execution order, busy indicators, and onload event What about inline scripts? next class

20. Homework 12/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

21. Questions What 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?