High Performance Social Plugins
•Download as PPTX, PDF•
11 likes•3,258 views
slides from http://environmentsforhumans.com/2012/web-performance-summit/
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to High Performance Social Plugins
Similar to High Performance Social Plugins (20)
More from Stoyan Stefanov
More from Stoyan Stefanov (20)
Recently uploaded
Recently uploaded (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!
Editor's Notes
- 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"/>