This is an original translation article. Original address.
We often use IFRAMEs to load third party content, ads, or plug-ins. The IFRAME is used because it can be loaded in parallel with the main page and does not block the main page. Of course, the use of IFRAME is also pros and cons: Steve souders in his blog has elaborated: using IFRAMEs sparingly:
- IFRAME will block the OnLoad event on the main page
- The home page and the IFRAME share the same connection pool
The onload that blocks the main page is the most performance-impacting aspect of both of these issues. Generally want to let the onload time the sooner trigger the better, on the one hand is the user experience more important is Google to the site's loading speed rating: Users can use IE and FF Google toolbar to timing.
So in order to improve the performance of the page, how to not block the main page of the OnLoad event to load the IFRAME?
This article discusses four ways to load an iframe: normal iframe,onload after loading the iframe,settimeout () IFrame and asynchronously loading the IFRAME. I use the IE8 timeline to show the loading results for each method. I recommend that you pay more attention to the dynamic asynchronous loading of this method because it is the best performing performance. In addition, there is a friendly iframe (friendly iframe) technology. He may not be an IFRAME-loaded technique, but he must use an IFRAME, and he is non-blocking-loaded.
Normal method of loading IFRAME
This is a common-sense load method that does not have browser compatibility issues.
Src= "/path/to/file" frameborder= "0" width= "728" height= "<iframe" scrolling= "Auto" > </iframe>
Using this method of loading will have the following performance in each browser:
The IFRAME will be loaded before the onload on the main page.
The IFRAME triggers the onload of the IFRAME after all the contents of the IFRAME have been loaded.
The onload on the main page is triggered after the onload of the iframes, so the IFRAME blocks the main page from loading
When the IFRAME is loaded, the browser's identity is loading and busy.
Here is a demo page where the timeline graph shows that the IFRAME will block the main page load.
My advice: Pay attention to the onload obstruction. If the content of the IFRAME takes only a short time to load and execute, then it is not a big problem, and the advantage of using this method is that it can be loaded in parallel with the main page. But if it takes a long time to load this iframe, the user experience is poor. You have to test yourself and then do some testing in http://www.webpagetest.org/, depending on the onload time to see if you need other loading methods.
Loading an IFRAME after the onload
If you want to load some content into the IFRAME, it's not that important for the page. Or the content does not need to be immediately displayed to the user, need to click the trigger and so on. Then consider loading the IFRAME after the main page is loaded.
Copy Code code as follows:
<script>
Doesn ' t block the Load event
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);
};
Check for browser support of event handling capability
if (Window.addeventlistener) window.addeventlistener ("Load", Createiframe, false);
else if (window.attachevent) window.attachevent ("onload", createiframe);
else window.onload = Createiframe;
</script>
This loading method also has no browser compatibility issues:
The IFRAME starts loading after the main page onload
The OnLoad event on the main page is triggered independently of the IFRAME, so the IFRAME does not block the load
When the IFRAME is loaded, the browser identifies the loading
This is a test page, the timeline diagram is as follows
What is the benefit of this method than the common method? The Load event triggers immediately, with two benefits:
Other code that waits for the home page onload event can be executed as soon as possible
Google Toolbar calculates how much time your page will load.
However, when the IFRAME is loaded, the browser is still busy, and the user sees the busy state longer than the normal load method. There is also the user has not waited until the page is completely loaded when it has left. In some cases this is a problem, such as advertising.
SetTimeout () to load an IFRAME
The purpose of this method is not to block the onload event.
Steve Souders (Is he again?) There is a test page for this method (http://stevesouders.com/efws/iframe-onload-nonblocking.php). He wrote: "Src through the settimeout dynamic settings, this method can be in all browsers to avoid blocking."
Copy Code code as follows:
<iframe id= "iframe1" src= "width=" height= "2" "border=" >
</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>
All browsers except IE8 have the following performance:
The IFRAME starts loading before the main page onload
The onload event of the IFRAME is triggered after the contents of the IFRAME are loaded
IFRAME does not block the OnLoad event on the main page (except IE8)
Why don't you block the onload on the main page (except IE8)? Because SetTimeout ()
When the IFRAME loads, the browser will show a busy state
Here is the timeline graph
Because of the IE8 problem, this technology is not suitable for many websites. If more than 10% of the users use IE8, one-tenth of the user experience will be poor. You would say that is only a little bit more than normal loading, in fact, the normal load performance is not bad. The onload event is longer for 10% of users .... Well, consider it yourself. But it's better to decide after looking at this awesome asynchronous loading method.
When I joined Velocity 2010, Meebo's two engineers (@marcuswestin and Martin Hunt) made a speech about their Meebo bar. They use an IFRAME to load some plug-ins and really do non-blocking loading. For some developers, their approach is still relatively fresh. It's awesome, super awesome. But some of the reasons for this technology has not been the corresponding attention, I hope this blog can carry it forward.
Copy Code code as follows:
<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>
The magical place is in <body onload= "": This iframe at the beginning without content, so the onload will immediately trigger. Then you create a SCRIPT element, use it to load content, ads, plug-ins, and so on, and then add the script to the head, so that the load of the IFRAME content does not block the onload! of the main page. You should see how he behaves in a browser:
The IFRAME starts loading before the main page onload
The onload of the IFRAME triggers immediately, because the contents of the IFrame are empty at first.
The onload on the main page will not be blocked
Why does this IFRAME not block the onload on the main page? Because <body onload= "" >
If you do not use onload in the IFRAME monitor, then the loading of the IFRAME will block the main page of the onload
When the IFRAME loads, the browser finally does not show the busy state (very good)
My test page gives the following timeline:
The escape character makes the code look a little uncomfortable, which is no problem. Give it a try.
Friendly-type IFRAME loading
This is used to load ads. Although this is not an IFRAME loading technology, but the use of IFRAME to hold ads. His highlight is not how the iframe loading, but the homepage, IFRAME, how the ads work together. As follows:
- Create an IFRAME first. Set his src to a static HTML file under the same domain name
- Inside this iframe, set the JS variable indapif=true to tell the ad that it's already loaded in this IFRAME.
- In this iframe, create a SCRIPT element plus the URL of the ad as SRC, and then load like normal ad code
- When the ad is loaded, reset the IFRAME size to fit the ad
- This approach also does not have browser compatibility issues.
Ad Ops Council has recommended this approach, and AOL is using this approach. Want to see the source code: here is one. A Swedish publishing house Aftonbladet a good conclusion for this kind of loading: on their home page, the load time is reduced by 30%, the user increases 7% per week, and the news section clicks 35%. I suggest you take a look at their profile: High performance Web Sites, with Ads:don ' t let third parties made you slow
I didn't create the relevant test page, so I didn't have the first data. From the results of my research:
This method is not very useful if you only want to invoke an IFRAME with a certain SRC address on your Web page.
If you want to display multiple ads on a Web page, the more flexible approach is to load an ad, and then update the IFRAME to load another main page domcontentloaded time will not be blocked, page rendering will not be blocked, of course, the main page of the OnLoad event will still be blocked.
Reprint Please specify:
Author:
Beiyuu
