iframe異步加載技術(shù)及性能

《iframe異步加載技術(shù)及性能》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、iframe異步加載技術(shù)及性能這是一篇原創(chuàng)翻譯文章。英文原文：Iframeloadingtechniquesandperformance.我們會(huì)經(jīng)常使用iframes來(lái)加載第三方的內(nèi)容、廣告或者插件。使用iframe是因?yàn)樗梢院椭黜?yè)面并行加載，不會(huì)阻塞主頁(yè)面。當(dāng)然使用iframe也是有利有弊的：SteveSouders在他的blog里面有闡述：UsingIframesSparingly:·iframe會(huì)阻塞主頁(yè)面的onload事件·主頁(yè)面和iframe共享同一個(gè)連接池阻塞主頁(yè)面的onload是這兩個(gè)問(wèn)題中最影響性能的方面。一般都是想讓onload時(shí)間越

2、早觸發(fā)越好，一方面是用戶體驗(yàn)過(guò)更重要的是google給網(wǎng)站的加載速度的打分：用戶可以用IE和FF中Google工具欄來(lái)計(jì)時(shí)。那么為了提高頁(yè)面性能，怎樣才能不阻塞主頁(yè)面的onload事件的來(lái)加載iframe呢？這篇講了四種加載iframe的方法：普通iframe，onload之后加載iframe，setTimeout()iframe和異步加載iframe。每種方法的加載結(jié)果我都用IE8的時(shí)間線來(lái)展示。我建議多注意下動(dòng)態(tài)異步加載這個(gè)方法，因?yàn)檫@是性能表現(xiàn)最佳的。另外，還有一種友好iframe(friendlyiframe)技術(shù)。他可能算不上是iframe加載

3、的技術(shù)，但是必須使用iframe，他是無(wú)阻塞加載的。普通方法加載iframe這是一種人盡皆知的普通加載方法，它沒(méi)有瀏覽器的兼容性問(wèn)題。1使用這種加載方法會(huì)在各瀏覽器中有如下表現(xiàn)：·iframe會(huì)在主頁(yè)面的onload之前加載·iframe會(huì)在所有iframe的內(nèi)容都加載完畢之后觸發(fā)iframe的onload·主頁(yè)面的onload會(huì)在iframes的onload觸發(fā)之后觸發(fā)，所以i

4、frame會(huì)阻塞主頁(yè)面的加載·當(dāng)iframe在加載的過(guò)程中，瀏覽器的會(huì)標(biāo)識(shí)正在加載東西，處于忙碌狀態(tài)。這里是一個(gè)演示頁(yè)面，時(shí)間線圖顯示出iframe會(huì)阻塞主頁(yè)面的加載。我的建議：注意onload阻塞。如果iframe的內(nèi)容只需要很短的時(shí)間來(lái)加載和執(zhí)行，那么也不是個(gè)大問(wèn)題，而且使用這種方法還有個(gè)好處是可以和主頁(yè)面并行加載。但是如果加載這個(gè)iframe需要很長(zhǎng)時(shí)間，用戶體驗(yàn)就很差了。你得自己測(cè)試一下然后在http://www.webpagetest.org/也做些測(cè)試，根據(jù)onload的時(shí)間看看是否需要其他加載方法。在onload之后加載iframe如果你想

5、在iframe中加載一些內(nèi)容，但是這些內(nèi)容對(duì)于頁(yè)面來(lái)說(shuō)不是那么的重要?；蛘哌@些內(nèi)容不需要馬上展現(xiàn)給用戶的，需要點(diǎn)擊觸發(fā)之類的。那么可以考慮在主頁(yè)面載入之后加載iframe。1這種加載方法也是沒(méi)有瀏覽器的兼容性問(wèn)題的：·iframe會(huì)在主頁(yè)面onload之后開(kāi)始加載·主頁(yè)面的onload事件觸發(fā)與iframe無(wú)關(guān)，所以iframe不會(huì)阻塞加載·當(dāng)iframe加載的時(shí)候，瀏覽器會(huì)標(biāo)識(shí)正在加載這是是一個(gè)測(cè)試頁(yè)面，時(shí)間線圖如下這種方法比普通方法有什么好處呢？load事件會(huì)馬上觸發(fā)，有兩個(gè)好處：·其他等待主頁(yè)面onload事件的代碼可以盡早執(zhí)行·GoogleToolbar計(jì)算你頁(yè)面加載的時(shí)間會(huì)大大減少但是，當(dāng)iframe加載的時(shí)候，還是會(huì)看到瀏覽器的忙

8、碌狀態(tài)，相對(duì)于普通加載方法，用戶看到忙碌狀態(tài)的時(shí)間更長(zhǎng)。還有就是用戶還沒(méi)等到頁(yè)面