We will often use iframes to load third-party content, advertising or plug-ins. Because he can use iframe and the main page is loaded in parallel, without blocking the main page, the following drawbacks:
-
iframe onload event can block the main page
-
Home and iframe share the same connection pool
onload blocked the main page is that these two issues most affecting the performance aspects. Usually want the sooner the better onload trigger time, one is the user experience over more importantly google Rate website loading speed: users can use IE and FF in the Google Toolbar to time.
So in order to improve page performance, how can onload event does not block the main page of the iframe to load it?
loading an iframe
Ordinary iframe, load the iframe, setTimeout () iframe after onload, asynchronous loading iframe
A synchronous load / Normal Load iframes (no compatibility issues)
<iframe src="" frameborder="0" width="728" height="90" scrolling="auto"></iframe>
In this way in the form of a browser:
(1) iframe is loaded before the onload main page
(2) iframe iframe will all contents are loaded only after the departure of the iframe onload event
(3) onload event will be the main page for all the onload iframe on a page is triggered only after completing the trigger, it will block the loading of the main page
(4) When in the course of iframe is loaded, the browser will display the identity of something being loaded, is busy
Note onload blocked. If the contents of the iframe takes only a short time to load and execute, it is not a big problem, but there is a benefit of using this method is the main page can be loaded in parallel. But if the iframe takes a long time to load, the user experience is very bad. You have to test yourself and also do some testing in http://www.webpagetest.org/, to see if other methods need to be loaded onload of time.
Second, the iframe is loaded after onload (no compatibility issues)
If you want to load some content in the iframe, but the content is not so important to the page speaking. Or the content does not need to immediately presented to the user, need to click on the trigger and the like. You can consider iframe load after the main page is loaded.
<script>
function createIframe() {
var i = document.createElement("iframe");
i.src = "path/to/file";
i.scrolling = "auto";
i.frameborder = "0";
i.width = "200px";
i.height = "100px";
document.getElementById("div-that-holds-the-iframe").appendChild(i);
};
if (window.addEventListener) window.addEventListener("load", createIframe, false);
else if (window.attachEvent) window.attachEvent("onload", createIframe);
else window.onload = createIframe;
</script>
In this way in the form of a browser:
(1) iframe will load after the main page onload
onload event has nothing to do with ifame (2) of the main page, so the iframe load without blocking the main page
(3) When the iframe is loaded, the browser identifies Loading
-
Other waiting for the main page onload event code can be executed as soon as possible
-
Google Toolbar Calculate your page load time is greatly reduced
Three, setTimeout () to load the iframe
<iframe id="iframe1" src="" width="200" height="100" border="2"></iframe>
<script>
function setIframeSrc() {
var s = "path/to/file";
var iframe1 = document.getElementById('iframe1');
if ( - 1 == navigator.userAgent.indexOf("MSIE")) {
//iframe1.src = s;
} else {
// iframe1.location = s;
}
}
setTimeout(setIframeSrc, 5);
</script>
In addition to this method ie8 in other browsers performance:
(1) iframe will load before the main page onload
(2) iframe's onload event fires after the contents have been loaded iframe
(3) iframe does not block the main page onlaod event (except IE8), Why do not block, because it is using the setTimeout ()
(4) When the iframe is loaded, the browser will display busy
Because the problem of IE8, this technique is not suitable for a lot of sites. If more than 10% of users use IE8, the user experience will be one of the very poor. Would you say that's just a load almost point than ordinary, in fact, not bad on a normal load performance. onload event for 10% of users are longer. . . . The amount, you consider it. After seeing this but the best method is like asynchronous loading of the following before deciding.
Fourth, asynchronous loading iframe
<script>
(function(d) {
var iframe = d.body.appendChild(d.createElement('iframe')),
doc = iframe.contentWindow.document;
// style the iframe with some CSS
iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";
doc.open().write('<body onload="' + 'var d = document;d.getElementsByTagName(\'head\')[0].' + 'appendChild(d.createElement(\'script\')).src' + '=\'\/path\/to\/file\'">');
doc.close(); //iframe onload event happens
})(document);
</script>
(1) iframe will load before the main page onload
(2) iframe's onload trigger immediately, because the contents of the iframe initially empty
(3) onload main page will not be blocked, why do not block the iframe onload of the main page? Because the <body onload = "">, if you do not use iframe onload listener, then the load will block iframe onload main page
(4) When the iframe is loaded, the browser does not display the busy state finally the (very good)