iframe异步加载技术及性能
我們會(huì)經(jīng)常使用iframes來加載第三方的內(nèi)容、廣告或者插件。使用iframe是因?yàn)樗梢院椭黜撁娌⑿屑虞d，不會(huì)阻塞主頁面。當(dāng)然使用iframe也是有利有弊的：Steve Souders在他的blog里面有闡述：Using Iframes Sparingly:
- iframe會(huì)阻塞主頁面的onload事件
- 主頁面和iframe共享同一個(gè)連接池
阻塞主頁面的onload是這兩個(gè)問題中最影響性能的方面。一般都是想讓onload時(shí)間越早觸發(fā)越好，一方面是用戶體驗(yàn)過更重要的是google給網(wǎng)站的加載速度的打分：用戶可以用IE和FF中Google工具欄來計(jì)時(shí)。
那么為了提高頁面性能，怎樣才能不阻塞主頁面的onload事件的來加載iframe呢？
這篇講了四種加載iframe的方法：普通iframe，onload之后加載iframe，setTimeout() iframe和異步加載iframe。每種方法的加載結(jié)果我都用IE8的時(shí)間線來展示。我建議多注意下動(dòng)態(tài)異步加載這個(gè)方法，因?yàn)檫@是性能表現(xiàn)最佳的。另外，還有一種友好iframe(friendly iframe)技術(shù)。它可能算不上是iframe加載的技術(shù)，但是必須使用iframe，它是無阻塞加載的。
普通方法加載iframe
這是一種人盡皆知的普通加載方法，它沒有瀏覽器的兼容性問題。
<iframe src="/path/to/file" frameborder="0" width="728" height="90" scrolling="auto"></iframe>使用這種加載方法會(huì)在各瀏覽器中有如下表現(xiàn)：
- iframe會(huì)在主頁面的onload之前加載
- iframe會(huì)在所有iframe的內(nèi)容都加載完畢之后觸發(fā)iframe的onload
- 主頁面的onload會(huì)在iframes的onload觸發(fā)之后觸發(fā)，所以iframe會(huì)阻塞主頁面的加載。
- 當(dāng)iframe在加載的過程中，瀏覽器會(huì)標(biāo)識(shí)正在加載東西，處于忙碌狀態(tài)。
這里是一個(gè)演示頁面，時(shí)間線圖顯示出iframe會(huì)阻塞主頁面的加載。
我的建議：注意onload阻塞。如果iframe的內(nèi)容只需要很短的時(shí)間來加載和執(zhí)行，那么也不是個(gè)大問題，而且使用這種方法還有個(gè)好處是可以和主頁面并行加載。但是如果加載這個(gè)iframe需要很長(zhǎng)時(shí)間，用戶體驗(yàn)就很差了。你得自己測(cè)試一下，然后在 http://www.webpagetest.org/ 也做些測(cè)試，根據(jù)onload的時(shí)間看看是否需要其他加載方法。
在onload之后加載iframe
如果你想在iframe中加載一些內(nèi)容，但是這些內(nèi)容對(duì)于頁面來說不是那么的重要。或者這些內(nèi)容不需要馬上展現(xiàn)給用戶的，需要點(diǎn)擊觸發(fā)之類的。那么可以考慮在主頁面載入之后加載iframe。
<script>//doesn't block the load event
function createIframe() {
var i = document.createElement("iframe");
i.src ="path/to/file";
i.scrolling ="auto";
i.frameborder ="0";
i.width ="200px";
i.height ="100px";
document.getElementById("div-that-holds-the-iframe").appendChild(i);
};
?// Check for browser support of event handling capability
?if (window.addEventListener) window.addEventListener("load", createIframe, false);
?else if (window.attachEvent) window.attachEvent("onload", createIframe);
?else window.onload = createIframe;
?</script>
這種加載方法也是沒有瀏覽器的兼容性問題的：
- iframe會(huì)在主頁面onload之后開始加載
- 主頁面的onload事件觸發(fā)與iframe無關(guān)，所以iframe不會(huì)阻塞加載。
- 當(dāng)iframe加載的時(shí)候，瀏覽器會(huì)標(biāo)識(shí)正在加載。
這是是一個(gè)測(cè)試頁面，時(shí)間線圖如下
這種方法比普通方法有什么好處呢？load事件會(huì)馬上觸發(fā)，有兩個(gè)好處：- 其他等待主頁面onload事件的代碼可以盡早執(zhí)行
- Google Toolbar計(jì)算你頁面加載的時(shí)間會(huì)大大減少
但是，當(dāng)iframe加載的時(shí)候，還是會(huì)看到瀏覽器的忙碌狀態(tài)，相對(duì)于普通加載方法，用戶看到忙碌狀態(tài)的時(shí)間更長(zhǎng)。還有就是用戶還沒等到頁面完全加載完的時(shí)候就已經(jīng)離開了。有些情況下這是個(gè)問題，比如廣告。
setTimeout()來加載iframe
這種方法的目的是不阻塞onload事件。
Steve Souders(又是他？)有一個(gè)這種方法的測(cè)試頁面(http://stevesouders.com/efws/iframe-onload-nonblocking.php)。他寫道：“src通過setTimeout動(dòng)態(tài)的設(shè)置，這種方法可以在所有的瀏覽器中避免阻塞”。
<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以外的所有瀏覽器中會(huì)有如下表現(xiàn)：
- iframe會(huì)在主頁面onload之前開始加載
- iframe的onload事件會(huì)在iframe的內(nèi)容都加載完畢之后觸發(fā)
- iframe不會(huì)阻塞主頁面的onload事件(IE8除外)
- 為什么不會(huì)阻塞主頁面的onload呢(IE8除外)？因?yàn)閟etTimeout()
- 當(dāng)iframe加載的時(shí)候，瀏覽器會(huì)顯示忙碌狀態(tài)。
下面是時(shí)間線圖：
因?yàn)镮E8的問題，這種技術(shù)就不適合很多網(wǎng)站了。如果有超過10%的用戶使用IE8, 十分之一的用戶體驗(yàn)就會(huì)差。你會(huì)說那也只是比普通加載差一點(diǎn)點(diǎn)，其實(shí)普通加載性能上也不差。onload事件對(duì)于10%的用戶來說都更長(zhǎng)。。。。額，你自己考慮吧。但是最好在看了下面這個(gè)很贊的異步加載方法之后再?zèng)Q定吧。
我在參加Velocity 2010的時(shí)候，Meebo的兩個(gè)工程師(@marcuswestin and Martin Hunt)做了一個(gè)關(guān)于他們的Meebo Bar的演講。他們使用iframe來加載一些插件，并且真正做到了無阻塞加載。對(duì)于有的開發(fā)者來說，他們的做法還比較新鮮。很贊，超級(jí)贊。但是一些原因?qū)е逻@種技術(shù)沒有得到相應(yīng)的關(guān)注，我希望這篇blog能把它發(fā)揚(yáng)光大。
<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 οnlοad="'+
'var d = document;d.getElementsByTagName(\'head\')[0].'+
'appendChild(d.createElement(\'script\')).src'+'=\'\/path\/to\/file\'">');
doc.close(); //iframe onload event happens
})(document);
</script>
神奇的地方就在<body οnlοad="">:這個(gè)iframe一開始沒有內(nèi)容，所以onload會(huì)立即觸發(fā)。然后你創(chuàng)建一個(gè)script元素，用他來加載內(nèi)容、廣告、插件什么的，然后再把這個(gè)script添加到HEAD中去，這樣iframe內(nèi)容的加載就不會(huì)阻塞主頁面的onload！你應(yīng)該看看他在個(gè)瀏覽器中的表現(xiàn)：
- iframe會(huì)在主頁面onload之前開始加載
- iframe的onload會(huì)立即觸發(fā)，因?yàn)閕frame的內(nèi)容一開始為空。
- 主頁面的onload不會(huì)被阻塞
- 為什么這個(gè)iframe不會(huì)阻塞主頁面的onload？因?yàn)?lt;body οnlοad="">
- 如果你不在iframe使用onload監(jiān)聽，那么iframe的加載就會(huì)阻塞主頁面的onload。
- 當(dāng)iframe加載的時(shí)候，瀏覽器終于不顯示忙碌狀態(tài)了（非常好）
我的測(cè)試頁給出下面的時(shí)間線：
轉(zhuǎn)義字符讓代碼看著有些難受，這都不是問題。試試吧。
友好型iframe加載
這是用來加載廣告的。雖然這不是一種iframe的加載技術(shù)，但是是用iframe來盛放廣告的。他的亮點(diǎn)不在于iframe如何加載，而是主頁面、iframe、廣告如何協(xié)同工作的。如下：
- 先創(chuàng)建一個(gè)iframe，設(shè)置他的src為一個(gè)相同域名下的靜態(tài)html文件。
- 在這個(gè)iframe里面，設(shè)置js變量inDapIF=true來告訴廣告它已經(jīng)加載在這個(gè)iframe里面了。
- 在這個(gè)iframe里面，創(chuàng)建一個(gè)script元素加上廣告的url作為src，然后像普通廣告代碼一樣加載。
- 當(dāng)廣告加載完成，重置iframe大小來適應(yīng)廣告。
- 這種方法也沒有瀏覽器的兼容性問題。
Ad Ops Council在推薦過這個(gè)方法，AOL也是用這種方法。想看看源碼：這里有一個(gè)。一家瑞典的出版社Aftonbladet對(duì)于這種加載有很不錯(cuò)的結(jié)論：在他們的主頁上，加載時(shí)間減少30%，用戶每周增加7%，新聞部分的點(diǎn)擊量增加35%。我建議可以看看他們的資料：High Performance Web Sites, With Ads: Don’t let third parties make you slow
我沒有創(chuàng)建相關(guān)的測(cè)試頁，所以也沒有第一首的資料。從我調(diào)研的結(jié)果來說：
如果你只想在你的網(wǎng)頁上調(diào)用一個(gè)確定的src地址的iframe的話這個(gè)方法不是很有用。
如果你想在網(wǎng)頁上展示多個(gè)廣告，比較靈活的方法的是：加載一個(gè)廣告，然后更新iframe加載另一個(gè)主頁面的DOMContentLoaded時(shí)間不會(huì)被阻塞，頁面渲染也不會(huì)被阻塞，當(dāng)然，主頁面的onload事件還是會(huì)被阻塞。
?
?from:http://www.cnblogs.com/beiyuu/archive/2011/07/18/iframe-tech-performance.html
轉(zhuǎn)載于:https://www.cnblogs.com/flysnow-z/archive/2011/11/03/2234194.html
總結(jié)
以上是生活随笔為你收集整理的iframe异步加载技术及性能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 整数三角形题目两则
- 下一篇： gridview排序加箭头（二）