Iframes is often used to load third-party content, advertisements, or plug-ins. Iframe is used because it can be loaded concurrently with the home page without blocking the home page. This is an original translation article. Original address.
Iframes is often used to load third-party content, advertisements, or plug-ins. Iframe is used because it can be loaded concurrently with the home page without blocking the home page. Of course, Using iframe also has advantages and disadvantages: Steve Souders elaborated in his blog: Using Iframes Sparingly:
- Iframe will block the onload event on the home page
- The home page and iframe share the same connection pool
Blocking onload on the home page is the most influential aspect of the two issues. Generally, we want to make the onload time trigger as early as possible. On the one hand, the user experience is more important. What's more, google scores the loading speed of the website: you can use Google Toolbar in IE and FF for timing.
To improve page performance, how can I load iframe without blocking the onload event on the home page?
This article describes four methods for loading iframe: Common iframe, loading iframe, setTimeout () iframe and asynchronously loading iframe. I use the IE8 timeline to display the Loading results of each method. I suggest you pay more attention to the dynamic asynchronous loading method, because this is the best performance. In addition, there is a friendly iframe (friendly iframe) technology. It may not be the function of loading iframe, but it must use iframe. It does not block loading.
Loading iframe using common methods
This is a well-known normal loading method, which does not have compatibility issues with browsers.
Using this loading method will show the following in various browsers:
Iframe is loaded before onload on the home page.
Iframe triggers the onload of iframe after all iframe content is loaded.
The onload on the home page will be triggered after the onload of iframes is triggered, so iframe will block loading on the home page
When the iframe is being loaded, the browser will identify that the object is being loaded and is in a busy state.
Here is a demo page. If the time line chart shows iframe, loading on the home page will be blocked.
My suggestion: Pay attention to onload blocking. If the iframe content takes a short time to load and execute, it is not a big problem, and the advantage of using this method is that it can be loaded in parallel with the home page. However, if loading this iframe takes a long time, the user experience will be poor. You have to test it on your own and then perform some tests at http://www.webpagetest.org/. for the onloading time, you can check whether it is the same.
Load iframe after onload
If you want to load some content in iframe, but the content is not that important for the page. Or the content does not need to be displayed to the user immediately. You need to click to trigger the content. You can consider loading iframe after loading the home page.
The Code is 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 ("p-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 method does not have compatibility issues with browsers:
Iframe will start loading after onload on the home page
The onload event triggering on the home page is irrelevant to iframe, so iframe does not block loading.
When the iframe is loaded, the browser will identify that the file is being loaded.
This is a test page. The time line chart is as follows:
What are the advantages of this method over normal methods? The load event will be triggered immediately. There are two advantages:
Other code waiting for the onload event on the home page can be executed as soon as possible
Google Toolbar will greatly reduce the loading time of your page
However, when loading iframe, you can still see the busy state of the browser. Compared with the normal loading method, you can see the busy state for a longer time. In addition, the user has left before the page is fully loaded. In some cases, this is a problem, such as advertising.
SetTimeout () to load iframe
The purpose of this method is not to block the onload event.
Steve Souders (him again ?) There is a test page (http://stevesouders.com/efws/iframe-onload-nonblocking.php) for this method ). He wrote: "src uses setTimeout dynamic settings. This method can avoid blocking in all browsers ".
The Code is as follows:
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 all browsers except IE8, the following results are displayed:
Iframe starts loading before onload on the home page.
The onload event of iframe is triggered after the content of iframe is loaded.
Iframe does not block the onload event on the home page (except for IE8)
Why not block the onload on the home page (except for IE8 )? Because setTimeout ()
When the iframe is loaded, the browser displays the busy status.
The following is a line chart
Due to IE8 problems, this technology is not suitable for many websites. If more than 10% of users use IE8, a tenth of the user experience will be poor. You will say that it is only a little worse than normal loading, in fact, normal loading performance is not bad. The onload event is longer for 10% of users .... Well, consider it yourself. But it is better to decide after reading this awesome asynchronous loading method below.
When I attended Velocity 2010, two Meebo Engineers (@ marcuswestin and Martin Hunt) gave a speech about their Meebo Bar. They use iframe to load some plug-ins, and truly implement non-blocking loading. For some developers, their practices are still fresh. Very nice, super nice. However, this technology has not received any attention due to some reasons. I hope this blog will be able to develop it.
The Code is as follows:
Script
(Function (d ){
Var iframe = d. body. appendChild (d. createElement ('iframe ')),
Doc = iframe.content+doc ument;
// Style the iframe with some CSS
Iframe.style.css Text = "position: absolute; width: 200px; height: 100px; left: 0px ;";
Doc. open (). write ('');
Doc. close (); // iframe onload event happens
}) (Document );
Script
The magic is in: This iframe has no content at the beginning, so onload will be triggered immediately. Then you create a script element, use it to load the content, advertisement, plug-in, or something, and then add the script to the HEAD, in this way, the loading of iframe content will not block the onload on the home page! You should check his performance in a browser:
Iframe starts loading before onload on the home page.
The onload of iframe is triggered immediately because the content of iframe is empty at the beginning.
The onload on the home page will not be blocked.
Why does this iframe not block the onload on the home page? Because
If you do not use the onload listener for iframe, loading the iframe will block the onload on the home page.
When the iframe is loaded, the browser is not busy (very good)
My test page shows the following timeline:
Escape characters make the Code look a little uncomfortable, which is not a problem. Try it. Friendly iframe loading is used to load advertisements. Although this is not an iframe loading technology, iframe is used to hold advertisements. The highlight is not how iframe is loaded, but how the home page, iframe, and advertisement work together. As follows:
- Create an iframe first. Set src to a static html file under the same domain name
- In this iframe, set the js variable inDapIF = true to tell the advertisement that it has been loaded in this iframe.
- In this iframe, create a script element and add the advertisement url as src, and load it like a common advertisement code.
- When the ad load is complete, reset the iframe size to adapt to the ad
- This method does not have compatibility issues with browsers.
This method is recommended for Ad Ops couneller, which is also used by AOL. For more information, see the source code. Aftonbladet, a Swedish Publishing House, has a good conclusion about this kind of loading: on their home pages, loading time is reduced by 30%, users are increased by 7% every week, and clicks on news are increased by 35%. I suggest you read their documents: High Performance Web Sites, With Ads: Don't let third parties make you slow. I didn't create a test page, therefore, there is no first document. From the results of my research, this method is not very useful if you only want to call an iframe of a specific src address on your webpage. If you want to display multiple advertisements on a webpage, you can load an advertisement and update iframe to load the DOMContentLoaded time on another homepage, page rendering will not be blocked either. Of course, the onload event on the home page will still be blocked.
Reprinted Please note:
Author:
BeiYuu
