Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

JSConf US 2010

Slides from Steve Souders' presentation at JSConf US on April 18, 2010.

  • Inicia sesión para ver los comentarios

JSConf US 2010

  1. best<br />of<br />steve<br /><br />Disclaimer: This content does not necessarily reflect the opinions of my employer.<br /><br />
  2.<br />
  3. the importance of frontend performance<br />9%<br />91%<br />17%<br />83%<br />iGoogle, primed cache<br />iGoogle, empty cache<br /><br />
  4. Site speed in search rank<br />Screen shot of blog post<br />
  5. Both<br />combine scripts<br />combine stylesheets<br />add an Expires header<br />gzip responses<br />put stylesheets at the top<br />put scripts at the bottom<br />avoid CSS expressions<br />make JS and CSS external<br />reduce DNS lookups<br />minify JS and CSS<br />avoid redirects<br />remove duplicate scripts<br />make Ajax cacheable<br />reduce cookie size<br />use cookie-free domains<br />don't scale images<br />YSlow<br />use CSS sprites<br />use a CDN<br />configure ETags<br />use GET for Ajax requests<br />reduce # of DOM elements<br />no 404s<br />avoid image filters<br />optimize favicon<br />Page Speed<br />defer loading JS<br />remove unused CSS<br />use efficient CSS selectors<br />optimize images<br />optimize order of CSS & JS<br />shard domains<br />leverage proxy caching<br />
  6. P3PC<br />Performance of 3rd Party Content<br />Ads<br />Widgets<br />Analytics<br /><br />
  7. document.getElementsByTagName('head‘)[0] .appendChild(domscript); <br />document.documentElement.firstChild .appendChild(ga);<br />s = document.getElementsByTagName ('script')[0]; <br />s.parentNode.insertBefore(ga, s);<br /><br />appendChild or insertBefore?<br />- Souders (May 2008)<br />- Google Analytics (Dec 2009)<br />- Google Analytics (Feb 2010)<br />
  8. if (q.insertBefore) {<br />var s = _get(q.insertBefore, id);<br /> if (s) {<br />s.parentNode.insertBefore(n, s);<br /> }<br />} else {<br />h.appendChild(n);<br />}<br />- YUI Loader 2.6.0 (2008)<br /><br />appendChild or insertBefore?<br />
  9. head = document.getElementsByTagName ("head")[0] || document.documentElement;<br />// Use insertBefore instead of appendChild to circumvent an IE6 bug.<br />// This arises when a base node is used (#2709 and #4378).<br />head.insertBefore(script, head.firstChild);<br />- jQuery<br /><br />appendChild or insertBefore?<br />
  10. var f=document.getElementsByTagName("script");<br />var b=f[f.length-1]; // b is last script tag<br />if(b==null){ return; }<br />vari=document.createElement("script");<br />i.language="javascript"; // i is a script element<br />i.setAttribute("type","text/javascript");<br />var j=""; // j is a string<br />j+="document.write('<scr'+'ipt language="javascript" src=""+c+""></scr'+'ipt>');";<br />var g=document.createTextNode(j); // not used<br />b.parentNode.insertBefore(i,b);<br />appendChild(i,j);<br />function appendChild(a,b){<br /> if(null==a.canHaveChildren||a.canHaveChildren){<br />a.appendChild(document.createTextNode(b));<br /> }<br /> else{ a.text=b;}<br />}<br />- Collective Media<br /><br />appendChild or insertBefore?<br />
  11. “Frag Tag”<br />Alex Russell<br />snippet<br /><FRAG><br /><script src=“snippet.js”></script><br /></FRAG><br />doesn’t block rendering<br />asyncdocument.write<br />JavaScript sandboxing<br />just a twinkle in my eye<br />frag tag<br /><br />
  12. browser wishlist<br /><br />Frag tag<br />SPDY<br />non-blocking scripts<br />SCRIPT attributes<br />resource packages<br />border-radius<br />cache redirects<br />link prefetch<br />Web Timing spec<br />remote JS debugging<br />web sockets<br />History<br />progressive XHR<br />anchor ping<br />stylesheet, inline js<br />inline script defer<br />@import<br />@font-face<br />stylesheets,iframes<br />paint events<br />missing schema<br /><br />
  13. browser disk cache<br />default size too small<br /><ul><li>IE: 8-50M
  14. Firefox: 50M
  15. Chrome: < 80M</li></ul>eviction algorithm improvements<br /><ul><li>content-type: script > image
  16. past impact: 1000 ms > 100 ms
  17. preferred sites</li></ul><br /><br />
  18. What makes sites feel slow?<br /><br />
  19. (lack of)<br />Progressive Rendering<br />[next page being loaded]<br /><br />
  20. Search<br />
  21. News<br />
  22. Shopping<br />
  23. Sports<br />
  24. Progressive Enhancement<br />deliver HTML<br />defer JS<br />avoid DOM<br />decorate later<br />
  25. Progressive Enhancement<br /><br />Progressive Rendering<br />
  26. Yahoo!<br />Wikipedia<br />eBay<br />AOL<br />MySpace<br />YouTube<br />Facebook<br />Why focus on JavaScript?<br />
  27. scripts block<br /><script src="A.js"> blocks parallel downloads and rendering<br />9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3<br />7 secs: IE 8, FF 3.5, Chr3, Saf 4<br />
  28. 26% avg<br />252K avg<br />initial payload and execution<br />
  29. 29% avg<br />229 K avg<br />initial payload and execution<br />
  30. splitting the initial payload<br />split your JavaScript between what's needed to render the page and everything else<br />defer "everything else"<br />split manually (Page Speed), automatically (Microsoft Doloto)<br />load scripts without blocking<br /><br />
  31. news<br /><br />
  32. Browserscope<br />
  33. HTTP Archive Format<br />(HAR)<br /><br />
  34. speed matters<br />focus on the frontend<br />run Page Speed and YSlow<br />progressive enhancement  progressive rendering<br /><br />takeaways<br /><br />
  35. Steve Souders<br /><br /><br /><br />