HTML web page production tutorial: Use iframe tags with caution_HTML/Xhtml_Web page production

Using iframe can easily call pages of other websites, but it should be used with caution. It costs tens or even hundreds of times more performance than creating other DOM elements (including style and script). Time comparison of adding 100 different elements shows how performance-intensive iframes are:

Pages that use iframes usually don’t have so many iframes, so you don’t have to worry too much about the time it takes to create the DOM. What is more worthy of concern is the onload event and connection pool.

iframe blocks onload

It is very important that the onload event of window is executed as soon as possible. This will complete the browser's loading progress indicator, which the user will use to determine whether the page has finished loading. The delay of the onload event will make the user feel that the page is slow.

The window's onload event will not be triggered until all the iframes it contains and the resources in all iframes are completely loaded. In Safari and Chrome, using javascript to dynamically assign a value to the iframe's src can avoid this blocking behavior.

A connection pool

The browser only opens a very small number of connections to each web server. Older browsers, including IE 6/7 and Firefox 2, only have 2 connections per host. In new browsers, the number of connections increases. Safari 3 and Opera 9 have increased to 4, and Chrome 1, IE 8 and Firefox 3 have increased to 6.

One might expect a separate connection pool for each iframe, but this is not the case. In most browsers, the connection is shared between the main page and its iframe, which means it is possible for resources in the iframe to occupy the available connections and block the main page's resource loading. This is fine if the content in the iframe is equally important, or more important than the main page. However, under normal circumstances, the content in the iframe is not important to the page, and it is not advisable for the iframe to occupy the number of connections. One solution is to dynamically assign a value to the iframe's src after the higher-priority resource is downloaded.

5 of the top 10 websites in the United States use iframes. Most of them are used to load ads. This isn't a great fit, but it's understandable and is an easy way to insert ads into your content. In many cases, using iframes makes sense. But be aware of the performance impact this has on your page. Please use it with caution unless necessary.