Use the IFRAME framework with caution

Using an IFRAME makes it easy to call other Web pages, but use them sparingly. It consumes dozens of or even hundreds of times times more performance than creating other DOM elements, including style and script.

HTML Web page Making Tutorial: iframe (frame) tag use requires caution

Using an IFRAME makes it easy to call other Web pages, but use them sparingly. It consumes dozens of or even hundreds of times times more performance than creating other DOM elements, including style and script. It is worth caring about the OnLoad event and connection pool.

IFrame blocking onload

It is important that the OnLoad event of window be executed as soon as possible. This will allow the browser's load progress indicator to be completed, and the user can determine whether the page has been loaded. The OnLoad event delay will make the user feel the page slows down.

The OnLoad event of the window is not triggered until all the IFRAME it contains is complete and all the resources in the IFRAME are fully loaded. In Safari and Chrome, this blocking behavior can be avoided by dynamically assigning the SRC to the IFRAME with JAVASCRITPT.

A connection pool

For each Web server, the browser opens only a few connections. Older browsers, including IE 6/7 and Firefox 2, have only 2 connections per host. In the new browser, the number of connections increases the bird. Safari 3+ and Opera 9+ increased to 4, with Chrome 1+, IE 8 and Firefox 3 up to 6.

One may expect each IFRAME to have a separate connection pool, but that is not the case. In most browsers, the connection is shared by the home page and its iframe, which means it is possible for resources in the IFRAME to consume the available connections and block the resource loading of the home page. This is good if the content in the IFrame is equally important, or more important than the home page. In general, however, the content of the IFRAME is less important to the page, and the IFRAME is not desirable to occupy the connection number. One solution is to dynamically assign values to an IFRAME after a higher priority resource download completes.

5 of the 10 largest websites in the United States use IFRAME. Most of them are used to load ads. This is not a good fit, but understandably, this is an easy way to insert ads into the content. In many cases, it is reasonable to use an IFRAME. But be aware of how this affects the performance of your page. Use caution if you are not necessary.