iframe非同步載入技術及效能

我們會經常使用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，他是無阻塞載入的。

這是一種人盡皆知的普通載入方法，它沒有瀏覽器的相容性問題。

1
<
iframe 
src="/path/to/file"
frameborder
="0"
width
="728"
height
="90"
scrolling
="auto"
>
iframe
>

使用這種載入方法會在各瀏覽器中有如下表現：

這裡是乙個演示頁面，時間線圖顯示出iframe會阻塞主頁面的載入。

我的建議：注意onload阻塞。如果iframe的內容只需要很短的時間來載入和執行，那麼也不是個大問題，而且使用這種方法還有個好處是可以和主頁面並行載入。但是如果載入這個iframe需要很長時間，使用者體驗就很差了。你得自己測試一下然後在也做些測試，根據onload的時間看看是否需要其他載入方法。

如果你想在iframe中載入一些內容，但是這些內容對於頁面來說不是那麼的重要。或者這些內容不需要馬上展現給使用者的，需要點選觸發之類的。那麼可以考慮在主頁面載入之後載入iframe。

1
<
script
>23
//doesn't block the load event
4function
createiframe() ;
13//
check for browser support of event handling capability
14if
(window.addeventlistener) window.addeventlistener(
"load
", createiframe, 
false
);15
else
if(window.attachevent) window.attachevent(
"onload
", createiframe);
16else
window.onload 
=createiframe;
17<
/script>

這種載入方法也是沒有瀏覽器的相容性問題的：

這是是乙個測試頁面，時間線圖如下

這種方法比普通方法有什麼好處呢？load事件會馬上觸發，有兩個好處：

但是，當iframe載入的時候，還是會看到瀏覽器的忙碌狀態，相對於普通載入方法，使用者看到忙碌狀態的時間更長。還有就是使用者還沒等到頁面完全載入完的時候就已經離開了。有些情況下這是個問題，比如廣告。

這種方法的目的是不阻塞onload事件。

steve

souders(又是他？)有乙個這種方法的測試頁面(

nonblocking.php)。他寫道：「src通過settimeout動態的設定，這種方法可以再所有的瀏覽器中避免阻塞」。

<
iframe id="
iframe1
"src=""
width="
200"
height="
100"
border="
2">
<
/iframe>
<
script
>
function
setiframesrc() 
else
}settimeout(setiframesrc, 5);
<
/script>

在除了ie8以外的所有瀏覽器中會有如下表現：

下面是時間線圖

因為ie8的問題，這種技術就不適合很多**了。如果有超過10%的使用者使用ie8,十分之一的使用者體驗就會差。你會說那也只是比普通載入差一點點，其實普通載入效能上也不差。onload事件對於10%的使用者來說都更長。。。。額，你自己考慮吧。但是最好在看了下面這個很讚的非同步載入方法之後再決定吧。

我在參加velocity 2010的時候，meebo的兩個工程師(@marcuswestin and martin hunt)做了乙個關於他們的meebo bar的演講。他們使用iframe來載入一些外掛程式，並且真正做到了無阻塞載入。對於有的開發者來說，他們的做法還比較新鮮。很讚，超級贊。但是一些原因導致這種技術沒有得到相應的關注，我希望這篇blog能把它發揚光大。

<
script
>
(function
(d) )(document);
<
/script>

神奇的地方就在:這個iframe一開始沒有內容，所以onload會立即觸發。然後你建立乙個script元素，用他來載入內容、廣告、插件什麼的，然後再把這個script新增到head中去，這樣iframe內容的載入就不會阻塞主頁面的onload！你應該看看他在個瀏覽器中的表現：

我的測試頁給出下面的時間線：

轉義字元讓**看著有些難受，這都不是問題。試試吧。

這是用來載入廣告的。雖然這不是一種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非同步載入技術及效能

iframe非同步載入技術及效能

iframe非同步載入測試篇

iframe非同步載入（點選左邊選單載入右邊內容）

iframe非同步載入技術及效能

iframe非同步載入技術及效能

iframe非同步載入測試篇

iframe非同步載入（點選左邊選單載入右邊內容）

相關推薦