Analysis of several reasons why Iframe should be used less

Time to create 100 elements

Pages that use iframes generally do not contain too many iframes, so the time spent on creating DOM nodes will not account for a large proportion. But it brings some other problems: onload event and connection pool.

Iframes block page loading

It is very important to trigger the window's onload event in a timely manner. The onload event triggers the browser's "busy" indicator to stop, telling the user that the current web page has been loaded. When the onload event is delayed, it gives the user the impression that the web page is very slow.

The onload event of window needs to be triggered after all iframes (including the elements inside) are loaded. In Safari and Chrome, this blocking can be avoided by dynamically setting the iframe's SRC via JavaScript.

Only connection pool

A browser can open only a small number of connections to a web server. Older browsers, including Internet Explorer 6 & 7 and Firefox 2, can only open two connections to a single hostname at a time. This limit has been increased in newer versions of browsers. Safari 3+ and Opera 9+ can open 4 connections to a domain at the same time, Chrome 1+, IE 8 and Firefox 3 can open 6 connections at the same time. You can view the detailed data table in this article: Roundup on Parallel Connections.

One might expect that an iframe would have its own separate connection pool, but this is not the case. In most browsers, the main page and the iframes within it share these connections. This means that the iframe may use up all available connections when loading resources, thus blocking the loading of the main page resources. This is of course fine if the content in the iframe is more important than the content of the main page. But usually, the content in the iframe is not as important as the content of the main page. At this point it's not worth it to use up all the available connections in the iframe. One solution is to dynamically set the SRC of the iframe after the important elements on the main page have been loaded.

The top 10 websites in the United States all use iframes. Most of the time, they use it to load ads. This is understandable and a logical solution, a simple way to load ad services. But remember that iframes will take a toll on your page performance. Whenever possible, avoid using iframes. When they are needed, use them with caution.

Source: English original Chinese translation: IT addiction