High Performance Social Plugins
-
Upload
stoyan-stefanov -
Category
Technology
-
view
2.841 -
download
0
Transcript of High Performance Social Plugins
High-Performance Social Plugins
@stoyanstefanov, phpied.com
Web Performance Summit Aug 29, 2012
#1: u-frame?
• Can't resize
• Some optimisations fail
• Not always advertised
• … but no 3rd party JS
<script src="…">
• bad, bad
• blocks everything there is
• never ever
http://www.phpied.com/3po-fail/+ SPOF-O-Matic
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/
unblocking onload
• does it matter?
1. window.onload =
function(){...};
2. FIF/Friendly iFrames/Meebo
fif
• unblocks onload (yey! but…)
• more complex
• requires 3rd party cooperationbecause JS now runs in a different window
fif coopAFTER:
(function(window) {
var document = window.document;
// magic with window
// and document
}(window.inDapIF ?
parent.window : window))
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
Plug?
#1 - You write the iframe
#2 - Third party JS writes iframe• load 3rd party JS async
• try FIF
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
1. Show up
• Fast initial paint
• Single request
• Inline CSS
• Sprite vs. Data URI
• Inline async JS loader
JS preload #fail
• new Image().src
• <object>/<iframe>
• <link type=stylesheet>
• script type="cache/invalid"
• XMLHttpRequest
• script.preload = true
Progressive enhancement
<form><button type="submit">
+ Async JS ("ajaxification")
+ Preload (faster)
lazy evalfunction execute() {
onmouseover = null;
var js = document.createElement('script');
js.src = FILE;
document.head.appendChild(js);
}
lazy evalfunction 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;
}