iframe異步加載技術及性能

時間 2019-11-09

標籤 iframe 異步加載技術性能欄目 HTML 简体版

原文原文鏈接

咱們會常用iframes來加載第三方的內容、廣告或者插件。使用iframe是由於他能夠和主頁面並行加載，不會阻塞主頁面。固然使用iframe也是有利有弊的：Steve Souders在他的blog裏面有闡述：Using Iframes Sparingly:css

iframe會阻塞主頁面的onload事件
主頁面和iframe共享同一個鏈接池

阻塞主頁面的onload是這兩個問題中最影響性能的方面。通常都是想讓onload時間越早觸發越好，一方面是用戶體驗過更重要的是google給網站的加載速度的打分：用戶能夠用IE和FF中Google工具欄來計時。html

那麼爲了提升頁面性能，怎樣才能不阻塞主頁面的onload事件的來加載iframe呢？web

這篇講了四種加載iframe的方法：普通iframe，onload以後加載iframe，setTimeout() iframe和異步加載iframe。每種方法的加載結果我都用IE8的時間線來展現。我建議多注意下動態異步加載這個方法，由於這是性能表現最佳的。另外，還有一種友好iframe(friendly iframe)技術。他可能算不上是iframe加載的技術，可是必須使用iframe，他是無阻塞加載的。ajax

普通方法加載iframe

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

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

使用這種加載方法會在各瀏覽器中有以下表現：app

iframe會在主頁面的onload以前加載
iframe會在全部iframe的內容都加載完畢以後觸發iframe的onload
主頁面的onload會在iframes的onload觸發以後觸發，因此iframe會阻塞主頁面的加載
當iframe在加載的過程當中，瀏覽器的會標識正在加載東西，處於忙碌狀態。

這裏是一個演示頁面，時間線圖顯示出iframe會阻塞主頁面的加載。異步

個人建議：注意onload阻塞。若是iframe的內容只須要很短的時間來加載和執行，那麼也不是個大問題，並且使用這種方法還有個好處是能夠和主頁面並行加載。可是若是加載這個iframe須要很長時間，用戶體驗就不好了。你得本身測試一下而後在 http://www.webpagetest.org/也作些測試，根據onload的時間看看是否須要其餘加載方法。

在onload以後加載iframe

若是你想在iframe中加載一些內容，可是這些內容對於頁面來講不是那麼的重要。或者這些內容不須要立刻展示給用戶的，須要點擊觸發之類的。那麼能夠考慮在主頁面載入以後加載iframe。

 1 <script>  2   3 //doesn't block the load event  4 function createIframe() { 5  var i = document.createElement("iframe"); 6  i.src = "path/to/file"; 7  i.scrolling = "auto"; 8  i.frameborder = "0"; 9  i.width = "200px";10  i.height = "100px";11  document.getElementById("div-that-holds-the-iframe").appendChild(i);12 };13 // Check for browser support of event handling capability 14 if (window.addEventListener) window.addEventListener("load", createIframe, false);15 else if (window.attachEvent) window.attachEvent("onload", createIframe);16 else window.onload = createIframe;17 </script>

這種加載方法也是沒有瀏覽器的兼容性問題的：async

iframe會在主頁面onload以後開始加載
主頁面的onload事件觸發與iframe無關，因此iframe不會阻塞加載
當iframe加載的時候，瀏覽器會標識正在加載

這是是一個測試頁面，時間線圖以下ide

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

其餘等待主頁面onload事件的代碼能夠儘早執行
Google Toolbar計算你頁面加載的時間會大大減小

可是，當iframe加載的時候，仍是會看到瀏覽器的忙碌狀態，相對於普通加載方法，用戶看到忙碌狀態的時間更長。還有就是用戶還沒等到頁面徹底加載完的時候就已經離開了。有些狀況下這是個問題，好比廣告。

setTimeout()來加載iframe

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

Steve Souders(又是他？)有一個這種方法的測試頁面(http://stevesouders.com/efws/iframe-onload-nonblocking.php)。他寫道：「src經過setTimeout動態的設置，這種方法能夠再全部的瀏覽器中避免阻塞」。

按 Ctrl+C 複製代碼

按 Ctrl+C 複製代碼

在除了IE8之外的全部瀏覽器中會有以下表現：

iframe會在主頁面onload以前開始加載
iframe的onload事件會在iframe的內容都加載完畢以後觸發
iframe不會阻塞主頁面的onload事件(IE8除外)
爲何不會阻塞主頁面的onload呢(IE8除外)？由於setTimeout()
當iframe加載的時候，瀏覽器會顯示忙碌狀態

下面是時間線圖

由於IE8的問題，這種技術就不適合不少網站了。若是有超過10%的用戶使用IE8,十分之一的用戶體驗就會差。你會說那也只是比普通加載差一點點，其實普通加載性能上也不差。onload事件對於10%的用戶來講都更長。。。。額，你本身考慮吧。可是最好在看了下面這個很讚的異步加載方法以後再決定吧。

我在參加Velocity 2010的時候，Meebo的兩個工程師(@marcuswestin and Martin Hunt)作了一個關於他們的Meebo Bar的演講。他們使用iframe來加載一些插件，而且真正作到了無阻塞加載。對於有的開發者來講，他們的作法還比較新鮮。很贊，超級贊。可是一些緣由致使這種技術沒有獲得相應的關注，我但願這篇blog能把它發揚光大。

<script> (function(d) { var iframe = d.body.appendChild(d.createElement('iframe')), doc = iframe.contentWindow.document; // style the iframe with some CSS  iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;"; doc.open().write('<body onload="' + 'var d = document;d.getElementsByTagName(\'head\')[0].' + 'appendChild(d.createElement(\'script\')).src' + '=\'\/path\/to\/file\'">'); doc.close(); //iframe onload event happens })(document);</script>

神奇的地方就在<body onload=」">:這個iframe一開始沒有內容，因此onload會當即觸發。而後你建立一個script元素，用他來加載內容、廣告、插件什麼的，而後再把這個script添加到HEAD中去，這樣iframe內容的加載就不會阻塞主頁面的onload！你應該看看他在個瀏覽器中的表現：

iframe會在主頁面onload以前開始加載
iframe的onload會當即觸發，由於iframe的內容一開始爲空
主頁面的onload不會被阻塞
爲何這個iframe不會阻塞主頁面的onload？由於<body onload=」">
若是你不在iframe使用onload監聽，那麼iframe的加載就會阻塞主頁面的onload
當iframe加載的時候，瀏覽器終於不顯示忙碌狀態了（很是好）

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

轉義字符讓代碼看着有些難受，這都不是問題。試試吧。

友好型iframe加載

這是用來加載廣告的。雖然這不是一種iframe的加載技術，可是是用iframe來盛放廣告的。他的亮點不在於iframe如何加載，而是主頁面、iframe、廣告如何協同工做的。以下：

先建立一個iframe。設置他的src爲一個相同域名下的靜態html文件
在這個iframe裏面，設置js變量inDapIF=true來告訴廣告它已經加載在這個iframe裏面了
在這個iframe裏面，建立一個script元素加上廣告的url做爲src，而後像普通廣告代碼同樣加載
當廣告加載完成，重置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事件仍是會被阻塞。