iframe 的特點

##一。iframe 是開銷最高的 DOM 元素

建立 iframe 的開銷（時耗）比建立其它型別的 DOM 元素高 12 個數量級（慢 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 並不能突破連線數的限制

此外，瀏覽器的多個標籤頁之間也是共享連線池的。也就是說，如果使用者同時開啟同一主機名下的多個頁面（在多個標籤頁裡），將造成連線請求的爭奪，導致載入速度變得更慢。所以，出現了 [跨域分離元件](/articles/前端優化：雅虎 35 條/#r20) 的優化原則

###參考資料

• 《高性能網站建設進階指南》