為什么要少用Iframe的幾個原因分析
我要評論
創(chuàng)建100個 elements 的耗時
使用 iframe 的頁面一般不會包含太多 iframe，所以創(chuàng)建 DOM 節(jié)點所花費的時間不會占很大的比重。但帶來一些其它的問題：onload 事件以及連接池(connection pool)。
Iframes 阻塞頁面加載
及時觸發(fā) window 的 onload 事件是非常重要的。onload 事件觸發(fā)使瀏覽器的 “忙” 指示器停止，告訴用戶當(dāng)前網(wǎng)頁已經(jīng)加載完畢。當(dāng) onload 事件加載延遲后，它給用戶的感覺就是這個網(wǎng)頁非常慢。
window 的 onload 事件需要在所有 iframe 加載完畢后(包含里面的元素)才會觸發(fā)。在 Safari 和 Chrome 里，通過 JavaScript 動態(tài)設(shè)置 iframe 的 SRC 可以避免這種阻塞情況。
唯一的連接池
瀏覽器只能開少量的連接到web服務(wù)器。比較老的瀏覽器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能對一個域名(hostname)同時打開兩個連接。這個數(shù)量的限制在新版本的瀏覽器中有所提高。Safari 3+ 和 Opera 9+ 可同時對一個域名打開 4 個連接，Chrome 1+, IE 8 以及 Firefox 3 可以同時打開 6 個。你可以通過這篇文章查看具體的數(shù)據(jù)表：Roundup on Parallel Connections.
有人可能希望 iframe 會有自己獨立的連接池，但不是這樣的。絕大部分瀏覽器，主頁面和其中的 iframe 是共享這些連接的。這意味著 iframe 在加載資源時可能用光了所有的可用連接，從而阻塞了主頁面資源的加載。如果 iframe 中的內(nèi)容比主頁面的內(nèi)容更重要，這當(dāng)然是很好的。但通常情況下，iframe 里的內(nèi)容是沒有主頁面的內(nèi)容重要的。這時 iframe 中用光了可用的連接就是不值得的了。一種解決辦法是，在主頁面上重要的元素加載完畢后，再動態(tài)設(shè)置 iframe 的 SRC。
美國前 10 大網(wǎng)站都使用了 iframe。大部分情況下，他們用它來加載廣告。這是可以理解的，也是一種符合邏輯的解決方案，用一種簡單的辦法來加載廣告服務(wù)。但請記住，iframe 會給你的頁面性能帶來沖擊。只要可能，不要使用 iframe。當(dāng)確實需要時，謹(jǐn)慎的使用他們。
相關(guān)文章
- iframe如何刷新一直都被網(wǎng)友所關(guān)注，接下來為大家詳細(xì)介紹下三種:用iframe的name屬性定位/id屬性定位/當(dāng)iframe的src為其它網(wǎng)站地址時,感興趣的朋友可以參考下哈2013-03-29
iframe的src設(shè)置為about:blank之后細(xì)節(jié)探討
不設(shè)置為about:blank，內(nèi)存不會釋放掉。還必須用 iframe.document.write(''); 這樣才能將內(nèi)容清空，本文將詳細(xì)探討一下iframe的src設(shè)置為about:blank之后細(xì)節(jié)，感興趣的你2013-02-25- frame的src賦值的問題，本文將進(jìn)行詳細(xì)探討:服務(wù)器端的iframe重新src重新賦值,給iframe加一個ID，再加上runat=server，感興趣的你可不要錯過了哈2013-02-25
網(wǎng)頁設(shè)計技巧:iframe自適應(yīng)高度的問題
所謂iframe自適應(yīng)高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個iframe2012-11-12iframe標(biāo)簽用法詳解(屬性、透明、自適應(yīng)高度)
iframe一般用來包含別的頁面，例如我們可以在我們自己的網(wǎng)站頁面加載別人網(wǎng)站的內(nèi)容，為了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe屬性，這里簡2014-10-01- 在構(gòu)建B/S系統(tǒng)界面的時候，經(jīng)常會遇到主頁面index.html中嵌套其他頁面的情況 ，雖然已經(jīng)有的庫已經(jīng)提供了控件(例如jQuery easy UI),但是有時候iframe的使用是不可避免的2010-08-06
- 有時候需要讓iframe繼承父頁面的顏色。不需要復(fù)雜的操作，簡單的幾個參數(shù)設(shè)置下即可。2010-07-21
IE6 select z-index無效，遮擋div bug的解決方法
在最近的一個項目中，遇到了IE6 select遮擋div的bug，為了解決這個bug我查了很多資料，試圖找到一個最最有效的方法，很多人是通過iframe的方法來解決，其實我查了國外的很2010-06-18Iframe 高度自適應(yīng)（兼容IE/Firefox、同域/跨域）
在實際的項目進(jìn)行中，很多地方可能由于歷史原因不得不去使用iframe，包括目前正火熱的應(yīng)用開發(fā)也是如此。2010-03-17- Iframe和FRAME的區(qū)別，方便大家以后在使用過程中根據(jù)實際需要取舍。2010-03-08