使用 iframe 可以輕易的調(diào)用其他網(wǎng)站的頁(yè)面,但應(yīng)謹(jǐn)慎使用。它比創(chuàng)建其他 DOM 元素(包括 style 和 script)多耗費(fèi)數(shù)十甚至數(shù)百倍的性能。增加100個(gè)不同元素的時(shí)間對(duì)比顯示 iframe 是多么耗費(fèi)性能:
使用 iframe 的頁(yè)面通常沒(méi)有這么多 iframe,所以創(chuàng)建 DOM 的時(shí)間不用多慮。更值得關(guān)心的是 onload 事件和連接池。
iframe 阻塞 onload
window 的 onload 事件盡快執(zhí)行非常重要。這會(huì)讓瀏覽器的載入進(jìn)度指示器完成,用戶(hù)依據(jù)此判斷頁(yè)面是否已經(jīng)加載完。而 onload 事件延遲,會(huì)讓用戶(hù)感覺(jué)頁(yè)面變慢。
window 的 onload 事件直到它所包含的所有 iframe,以及所有 iframe 中的資源完全加載完成后才會(huì)觸發(fā)。在 Safari 和 Chrome 中,用 javascritpt 動(dòng)態(tài)的給 iframe 的 src 賦值可以避免這種阻塞行為。
一個(gè)連接池
對(duì)每個(gè) web 服務(wù)器來(lái)說(shuō),瀏覽器只打開(kāi)極少的幾個(gè)連接數(shù)。老的瀏覽器,包括 IE 6/7 和 Firefox 2,每個(gè)主機(jī)只有2個(gè)連接。在新的瀏覽器中,連接數(shù)增加鳥(niǎo)。Safari 3+ 和 Opera 9+ 增至4個(gè),Chrome 1+ 、IE 8 及 Firefox 3 增至6個(gè)。
人們可能期望每個(gè) iframe 有單獨(dú)的連接池,但并非如此。在大多數(shù)瀏覽器中,連接被主頁(yè)面和它的 iframe 所共享,這意味著有可能 iframe 中的資源占用了可用連接而阻塞了主頁(yè)面的資源加載。如果 iframe 中的內(nèi)容同等重要,或比主頁(yè)面更重要,這很好。然而在通常情況下 iframe 中的內(nèi)容對(duì)頁(yè)面來(lái)說(shuō)不太重要,iframe 占用連接數(shù)是不可取的。一個(gè)解決方案是在優(yōu)先級(jí)更高的資源下載完成后再動(dòng)態(tài)的給 iframe 的 src 賦值。
美國(guó)的10大網(wǎng)站中有5個(gè)使用了 iframe。它們多數(shù)用來(lái)加載廣告。這不是很合適,但可以理解,這是一個(gè)簡(jiǎn)便的在內(nèi)容中插入廣告的途徑。在很多情況下,使用 iframe 是合理的。但要意識(shí)到這對(duì)你的頁(yè)面的性能影響。非必要時(shí),請(qǐng)謹(jǐn)慎使用。