iframe加載方案及性能

時間 2019-12-12

標籤 iframe 加載方案性能欄目 HTML 简体版

原文原文鏈接

轉載地址：翻譯文章-iframe異步加載技術及性能
英文原文：Iframe loading techniques and performancejavascript

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

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

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

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

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

普通方法加載iframe

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

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

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

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

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

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

在onload以後加載iframe

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

<script> //doesn't block the load event i.src ="path/to/file"; i.scrolling ="auto"; i.frameborder ="0"; i.height ="100px"; if (window.addEventListener) window.addEventListener("load", createIframe, false); else if (window.attachEvent) window.attachEvent("onload", createIframe); else window.onload = createIframe; </script>

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

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

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

這種方法比普通方法有什麼好處呢？load事件會立刻觸發，有兩個好處：
- 其餘等待主頁面onload事件的代碼能夠儘早執行
- Google Toolbar計算你頁面加載的時間會大大減小

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

setTimeout()來加載iframe

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

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

<iframe id="iframe1" src="" width="200" height="100" border="2"> </iframe> <script> function setIframeSrc() { var s ="path/to/file"; var iframe1 = document.getElementById('iframe1'); if (-1 == navigator.userAgent.indexOf("MSIE")) { iframe1.src = s; } else { iframe1.location = s; } } setTimeout(setIframeSrc, 5);</script>

在除了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;"; //iframe onload event happens })(document); </script>

神奇的地方就在:這個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事件仍是會被阻塞。

項目地址：http://www.cnblogs.com/beiyuu/archive/2011/07/18/iframe-tech-performance.html