一.iframe是开销最高的DOM元素

创建iframe的开销（时耗）比创建其它类型的DOM元素高1~2个数量级（慢10倍~100倍）

二.iframe会阻塞onload事件

onload事件触发时，浏览器会停止忙指示器（图标、状态栏、光标、进度条），向用户反馈页面已经准备就绪。如果onload能够迅速触发，用户就会感到页面加载很快

iframe会阻塞父页面的onload事件，比如：

• iframe请求的页面在10s后才返回

• iframe请求的页面中有一张图片在10s后才返回了响应内容

• iframe请求的页面包含一个外部脚本在10s后才加载完毕

• iframe请求的页面中包含的样式表在10s后才加载完毕

上面任何一种情况都会导致iframe所在页面的onload延迟10s

用js动态设置iframe的src可以避免这个问题，例如：

<!-- <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;
// 在更老的浏览器中，IE6、7之类的
// 需要把设置src放在onload事件之后，如下：
// window.onload = function() {
//     var url = 'b.html';
//     window.frames['myIframe'].src = url;
// }
</script>

这样iframe就不会延迟onload事件了，对于页面中嵌入的iframe广告采用这种方式能够明显地提高响应速度

P.S.对于嵌入广告，推荐使用div而不是iframe，div的id可以包含在脚本的url中，广告的js将通过设置div的innerHTML属性把广告插入页面

三.iframe与父页面共享连接池

浏览器支持并行下载，但有连接数限制，IE6和7只支持同时打开2个连接

iframe与父页面共享连接池，使用iframe并不能突破连接数的限制

此外，浏览器的多个标签页之间也是共享连接池的。也就是说，如果用户同时打开同一主机名下的多个页面（在多个标签页里），将造成连接请求的争夺，导致加载速度变得更慢。所以，出现了跨域分离组件的优化原则

参考资料

• 《高性能网站建设进阶指南》