High Performance Social Plugins
•Descargar como PPTX, PDF•
11 recomendaciones•3,257 vistas
slides from http://environmentsforhumans.com/2012/web-performance-summit/
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a High Performance Social Plugins
Similar a High Performance Social Plugins (20)
Más de Stoyan Stefanov
Más de Stoyan Stefanov (20)
Último
Último (20)
High Performance Social Plugins
- 1. High-Performance Social Plugins @stoyanstefanov, phpied.com Web Performance Summit Aug 29, 2012
- 2. // todo • What's a social plugin? • How does it plug? • How does it work/optimize?
- 3. Plugin? • is a third-party iframe • grows sometimes
- 4. Plug? #1 - You write the iframe #2 - Third party JS writes iframe
- 8. #1: u-frame? • Can't resize • Some optimisations fail • Not always advertised • … but no 3rd party JS
- 9. #2: 3rd party JS • all.js, plusone.js, widgets.js • <script src="…"> • async JS
- 10. <script src="…"> • bad, bad • blocks everything there is • never ever http://www.phpied.com/3po-fail/ + SPOF-O-Matic
- 11. Async JS • dynamic script node • not as short • mostly default now • only blocks onload in !IE http://calendar.perfplanet.com/2011/the-art-and-craft-of-the-async-snippet/ http://www.phpied.com/social-button-bffs/
- 12. unblocking onload • does it matter? 1. window.onload = function(){...}; 2. FIF/Friendly iFrames/Meebo
- 13. fif 1) create iframe src="js:false" 2) in the frame doc.write a <body onload … 3) …that loads JS
- 14. fif (snip)
- 15. fif • unblocks onload (yey! but…) • more complex • requires 3 rd party cooperation because JS now runs in a different window
- 16. fif coop BEFORE: (function() { // magic with window // and document }())
- 17. fif coop AFTER: (function(window) { var document = window.document; // magic with window // and document }(window.inDapIF ? parent.window : window))
- 18. inDapIF • you signal to third party you load them in a frame • defined by IAB http://www.iab.net/media/file/rich_media_ajax_best_practices.pdf
- 19. fif • experimental support in FB JS SDK • [RFC] try it!
- 21. Plug? #1 - You write the iframe #2 - Third party JS writes iframe
- 22. Plug? #1 - You write the iframe #2 - Third party JS writes iframe • load 3rd party JS async • try FIF
- 23. Plug? #1 - You write the iframe • FIF too? http://jsbin.com/uyepoj/1/edit #2 - Third party JS writes iframe • load 3rd party JS async • try FIF
- 25. // todo • What's a social plugin? • How does it plug? • How does it work/optimize?
- 26. Like button's tasks 1. Show up 2. Resize itself (optional) 3. Handle user actions: like, comment
- 27. 1. Show up • Fast initial paint • Single request • Inline CSS • Sprite vs. Data URI • Inline async JS loader
- 28. 2. Resize • Inline JS
- 29. 3. User actions • Lazy • Preload JS asap • But eval JS only if necessary
- 30. Single request
- 31. Single request
- 32. JS preload #fail • new Image().src • <object>/<iframe> • <link type=stylesheet> • script type="cache/invalid" • XMLHttpRequest • script.preload = true
- 33. JS preload in Like button • CORS: .com -> CDN • XHR2 (and XDomainRequest for IE8) • IE6 and 7?
- 34. Progressive enhancement <form><button type="submit"> + Async JS ("ajaxification") + Preload (faster)
- 35. lazy eval function load() { if (!preload()) { return execute(); } onmouseover = execute; }
- 36. lazy eval function execute() { onmouseover = null; var js = document.createElement('script'); js.src = FILE; document.head.appendChild(js); }
- 37. lazy eval function preload() { var xhr; if (typeof XDomainRequest !== 'undefined') { // IE8 xhr = new XDomainRequest(); } else if (typeof XMLHttpRequest !== 'undefined') { xhr = new XMLHttpRequest(); if (!("withCredentials" in xhr)) { return; // sorry, XHR2 needed } } else { return; // give up } xhr.open("GET", FILE, true); xhr.send(null); return true; }
- 38. // todo • What's a social plugin? • How does it plug? • How does it work/optimize?
- 39. Thank you!
Notas del editor
- variframe = document.createElement('iframe');var where = document.getElementsByTagName('head')[0];where.parentNode.insertBefore(iframe, where);var doc = iframe.contentWindow.document;doc.open().write('<body onload="'+ 'varjs = document.createElement(\\'script\\');'+ 'js.src = \\'http://example.org/js.js\\';'+ 'document.body.appendChild(js);">');
- <!-- hook --><div id="fb-root"></div><!-- script loader --><script>(function() {varurl = '//connect.facebook.net/en_US/all.js';variframe = document.createElement('iframe'); (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";iframe.src = "javascript:false";var where = document.getElementById('fb-root');where.parentNode.insertBefore(iframe, where);var doc = iframe.contentWindow.document;doc.open().write('<body onload="'+ 'window.inDapIF = true;' + 'varjs = document.createElement(\\'script\\');'+ 'js.src = \\''+ url +'\\';'+ 'document.body.appendChild(js);">');doc.close();}());// asyncinit once loading is donewindow.fbAsyncInit = function() {FB.init({xfbml: true});};</script><!-- one like button --><fb:likehref="http://phpied.com"/>