Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "CS193H: High Performance Web Sites Lecture 19: Vol 2 – Load Scripts Without Blocking Steve Souders Google"— Presentation transcript:

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

';
Ads by Google