我們會經常使用iframes來載入第三方的內容、廣告或者外掛程式。使用iframe是因為它可以和主頁面並行載入，不會阻塞主頁面。當然使用iframe也是有利有弊的：steve souders在他的blog裡面有闡述：using iframes sparingly:
阻塞主頁面的onload是這兩個問題中最影響效能的方面。一般都是想讓onload時間越早觸發越好，一方面是使用者體驗過更重要的是google給**的載入速度的打分：使用者可以用ie和ff中google工具欄來計時。
那麼為了提高頁面效能，怎樣才能不阻塞主頁面的onload事件的來載入iframe呢？
這篇講了四種載入iframe的方法：普通iframe，onload 之後載入iframe，settimeout() iframe和非同步載入iframe。每種方法的載入結果我都用ie8的時間線來展示。我建議多注意下動態非同步載入這個方法，因為這是效能表現最佳的。另 外，還有一種友好iframe(friendly iframe)技術。它可能算不上是iframe載入的技術，但是必須使用iframe，它是無阻塞載入的。
這是一種人盡皆知的普通載入方法，它沒有瀏覽器的相容性問題。
iframe>使用這種載入方法會在各瀏覽器中有如下表現：
這裡是乙個演示頁面，時間線圖顯示出iframe會阻塞主頁面的載入。
我的建議：注意on
load 阻塞。如果iframe的內容只需要很短的時間來載入和執行，那麼也不是個大問題，而且使用這種方法還有個好處是可以和主頁面並行載入。但是如果載入這個 iframe需要很長時間，使用者體驗就很差了。你得自己測試一下，然後在 也做些測試，根據onload的時間看看是否需要其他載入方法。
在onload之後載入iframe
如果你想在iframe中載入一些內容，但是這些內容對於頁面來說不是那麼的重要。或者這些內容不需要馬上展現給使用者的，需要點選觸發之類的。那麼可以考慮在主頁面載入之後載入iframe。
這種載入方法也是沒有瀏覽器的相容性問題的：這是是乙個測試頁面，時間線圖如下
這種方法比普通方法有什麼好處呢？load事件會馬上觸發，有兩個好處：
但是，當iframe載入的時候，還是會看到瀏覽器的忙碌狀態，相對於普通載入方法，使用者看到忙碌狀態的時間更長。還有就是使用者還沒等到頁面完全載入完的時候就已經離開了。有些情況下這是個問題，比如廣告。
settimeout()來載入iframe
這種方法的目的是不阻塞onload事件。
steve souders(又是他？)有乙個這種方法的測試頁面(他寫道：「src通過settimeout動態的設定，這種方法可以在所有的瀏覽器中避免阻塞」。
iframe>在除了ie8以外的所有瀏覽器中會有如下表現：functionsetiframesrc() else
}settimeout(setiframesrc, 5);
script>
下面是時間線圖：
因為ie8的問題，這種技術就不適合很多**了。如果有超過10%的使用者使用ie8, 十分之一的使用者體驗就會差。你會說那也只是比普通載入差一點點，其實普通載入效能上也不差。on
load事件對於10%的使用者來說都更長。。。。額，你自己考慮吧。但是最好在看了下面這個很讚的非同步載入方法之後再決定吧。
我在參加velocity 2010的時候，meebo的兩個工程師(@marcuswestin and martin hunt)做了乙個關於他們的meebo bar的演講。他們使用iframe來載入一些外掛程式，並且真正做到了無阻塞載入。對於有的開發者來說，他們的做法還比較新鮮。很讚，超級贊。但是一些原因 導致這種技術沒有得到相應的關注，我希望這篇blog能把它發揚光大。
神奇的地方就在:這個iframe一開始沒有內容，所以onload會立即觸發。然後你建立乙個script元素，用他來載入內容、廣告、外掛程式什麼的，然後再把這個script新增到head中去，這樣iframe內容的載入就不會阻塞主頁面的onload！你應該看看他在個瀏覽器中的表現：
我的測試頁給出下面的時間線：
轉義字元讓**看著有些難受，這都不是問題。試試吧。
友好型iframe載入
這是用來載入廣告的。雖然這不是一種iframe的載入技術，但是是用iframe來盛放廣告的。他的亮點不在於iframe如何載入，而是主頁面、iframe、廣告如何協同工作的。如下：
ad ops council在推薦過這個方法，aol也是用這種方法。想看看原始碼：這裡有乙個。一家瑞典的出版社aftonbladet對於這種載入有很不錯的結論：在他們的主頁上，載入時間減少30%，使用者每週增加7%，新聞部分的點選量增加35%。我建議可以看看他們的資料：high performance web sites, with ads: don』t let third parties make you slow
我沒有建立相關的測試頁，所以也沒有第一首的資料。從我調研的結果來說：
如果你只想在你的網頁上呼叫乙個確定的src位址的iframe的話這個方法不是很有用。
如果你想在網頁上展示多個廣告，比較靈活的方法的是：載入乙個廣告，然後更新iframe載入另乙個主頁面的domcontentloaded時間不會被阻塞，頁面渲染也不會被阻塞，當然，主頁面的onload事件還是會被阻塞。
iframe非同步載入技術及效能
我們會經常使用iframes來載入第三方的內容 廣告或者外掛程式。使用iframe是因為他可以和主頁面並行載入，不會阻塞主頁面。當然使用iframe也是有利有弊的 steve souders在他的blog裡面有闡述 using iframes sparingly 阻塞主頁面的onload是這兩個問題...
iframe非同步載入測試篇
iframe非同步載入測試篇 談到transformers，顧名思義 變形金剛 賣家中心首頁由各模組組成，模組可移動 刪除等，大部分模組實現iframe的非同步載入。如何進行iframe非同步載入的測試，首先需要清楚，何為iframe非同步載入？iframe可在主頁面的onload之前載入，也可在主...
iframe非同步載入（點選左邊選單載入右邊內容）
關於iframe非同步載入，我們常用的大都是左邊選單欄右邊是內容頁面，要求我們不能左邊選單不能重新整理的情況下，非同步載入右邊的內容頁面。話不多說，做了乙個例項大致是這樣的 1 首先在你的專案中建立三個檔案如 2 在default頁面引入jquery檔案並在body中加入也下 view code 1...