Characteristics of iframe

##I. iframe is the DOM Element with Highest Overhead

Creating iframe overhead (time cost) is 12 orders of magnitude higher than creating other types of DOM elements (10x100x slower)

##II. iframe Will Block onload Event

When onload event triggers, browser will stop busy indicator (icon, status bar, cursor, progress bar), feedback to user that page is ready. If onload can trigger quickly, user will feel page loads fast

iframe will block parent page's onload event, for example:

• Page requested by iframe returns after 10s

• A picture in page requested by iframe returns response content after 10s

• An external script included in page requested by iframe finishes loading after 10s

• Stylesheet included in page requested by iframe finishes loading after 10s

Any of above situations will cause onload of page where iframe is located to delay 10s

Using js to dynamically set iframe's src can avoid this problem, for example:

<!-- <iframe id="myIframe" src="b.html" frameborder="2" width="400" height="300"></iframe> -->
<iframe id="myIframe" frameborder="2" width="400" height="300"></iframe>

<script>
var url = 'b.html';
window.frames['myIframe'].src = url;
// In older browsers, IE6, 7 etc.
// Need to put setting src after onload event, as follows:
// window.onload = function() {
//     var url = 'b.html';
//     window.frames['myIframe'].src = url;
// }
</script>

This way iframe won't delay onload event, for iframe advertisements embedded in page adopting this method can obviously improve response speed

P.S. For embedded advertisements, recommend using div instead of iframe, div's id can be included in script's url, advertisement's js will insert advertisement into page by setting div's innerHTML attribute

##III. iframe Shares Connection Pool with Parent Page

Browser supports parallel downloading, but has connection number limit, IE6 and 7 only support opening 2 connections simultaneously

iframe shares connection pool with parent page, using iframe cannot break through connection number limit

Additionally, multiple tabs of browser also share connection pool. That is to say, if user opens multiple pages under same hostname simultaneously (in multiple tabs), will cause connection request contention, leading to loading speed becoming slower. Therefore, appeared [cross-domain separation components](/articles/前端优化：雅虎 35 条/#r20) optimization principle

###Reference Materials

• "High Performance Web Sites: Beyond Speed Index"