CS193H: High Performance Web Sites Lecture 19: Vol 2 – Load Scripts Without Blocking Steve Souders Google

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)

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

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

Scripts Block blocks parallel downloads and rendering

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

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

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('');

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

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');

Script DOM Element var se = document.createElement('script'); se.src = ' document.getElementsByTagName('head')[0].appendChild(se); script and main page domains can differ no need to refactor JavaScript

Script Defer only supported in IE (just landed in FF 3.1) script and main page domains can differ no need to refactor JavaScript

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

Browser Busy Indicators

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

Ensure scripts execute in order: necessary when scripts have dependencies IE: FF: Avoid scripts executing in order: faster – first script back is executed immediately Ensure/Avoid Ordered Execution

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

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

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

Homework 12/1 11:59pm – Assignment #6 - Improving a Top Site rules Vol 2: Split the Initial Payload Load Scripts Without Blocking Don't Scatter Inline Scripts Shard Dominant Domains Optimize Images

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?