HTML web page creation tutorial Use iframe tags carefully

Using iframes can easily call pages from 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). Comparing the time it takes to add 100 different elements shows how performance-intensive iframes are:

Pages that use iframes usually don't have so many iframes, so the time to create the DOM doesn't need to be a big concern. Of more concern are the onload event and the connection pool.

iframe blocks onload

It is very important that the window's onload event executes as quickly as possible. This will cause the browser's loading progress indicator to complete, which the user uses to determine whether the page has loaded. The delay of onload event will make users feel that the page is slow.

The onload event of a window will not be triggered until all iframes it contains and all resources in the iframes are fully loaded. In Safari and Chrome, this blocking behavior can be avoided by dynamically assigning the src value of the iframe using javascript.

A connection pool

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

One might expect that there would be a separate connection pool per iframe, but this is not the case. In most browsers, the connection is shared between the main page and its iframe, which means that it is possible for resources in the iframe to occupy the available connection and block the main page's resource loading. This is fine if the content in the iframe is equally or more important than the main page. However, in general, the content in the iframe is not very important to the page, and it is not advisable for the iframe to occupy the connection number. One solution is to dynamically assign the src value of the iframe after the higher priority resource has finished downloading.

Five of the top 10 websites in the United States use iframes. They are mostly used to load advertisements. This isn’t very appropriate, but it’s understandable and an easy way to insert ads into your content. In many cases, using iframes makes sense. But be aware of the performance impact this can have on your pages. Please use it with caution unless necessary.