HTML web page production tutorial: Use iframe tags with caution

Using iframes can easily call pages of other websites, but they should be used with caution. It takes dozens or even hundreds of times more performance than creating other dom elements, including style and script. Adding 100 different elements time comparison shows how performance-consuming the iframe is:

Pages that use iframes usually don't have so many iframes, so don't worry too much about creating doms. What is more worthy of concern are the onload events and connection pools.

It is very important that the onload event of the window executes as soon as possible. This will allow the browser's loading progress indicator to complete, and the user will determine whether the page has been loaded based on this. The onload event delay will make the user feel that the page is slower.

The onload event of window will not fire until all iframes it contains and resources in all iframes are fully loaded. In safari and chrome, dynamically assigning values ​​to iframes with javascriptpt can avoid this blocking behavior.

For each web server, the browser only opens a few connections. Old browsers, including ie 6/7 and firefox 2, have only 2 connections per host. In the new browser, the number of connections increases. safari 3+ and opera 9+ increased to 4, chrome 1+, ie 8 and firefox 3 increased to 6.

One might expect a separate connection pool for each iframe, but that is not the case. In most browsers, connections are shared by the main page and its iframe, which means that it is possible that the resources in the iframe take up the available connections and block the resource loading of the main page. This is great if the content in the iframe is equally important, or more important than the main page. However, in general, the content in an iframe is not very important to the page, and it is not advisable that the iframe takes up the number of connections. One solution is to dynamically assign the src of the iframe after the download of the resource with higher priority is completed.

Five of the top 10 websites in the United States use iframes. Most of them are used to load ads. This is not very suitable, but understandably, it is an easy way to insert ads into content. In many cases, using an iframe is reasonable. But be aware of the performance impact this has on your page. Please use it with caution unless necessary.