|
英文原文:Iframe loading techniques and performance
我們會經常使用iframes來加載第三方的內容、廣告或者插件。使用iframe是因為它可以和主頁面并行加載,不會阻塞主頁面。當然使用iframe也是有利有弊的:Steve Souders在他的blog里面有闡述:Using Iframes Sparingly:
- iframe會阻塞主頁面的onload事件
- 主頁面和iframe共享同一個連接池
阻塞主頁面的onload是這兩個問題中最影響性能的方面。一般都是想讓onload時間越早觸發越好,一方面是用戶體驗過更重要的是google給網站的加載速度的打分:用戶可以用IE和FF中Google工具欄來計時。
那么為了提高頁面性能,怎樣才能不阻塞主頁面的onload事件的來加載iframe呢?
這篇講了四種加載iframe的方法:普通iframe,onload之后加載iframe,setTimeout() iframe和異步加載iframe。每種方法的加載結果我都用IE8的時間線來展示。我建議多注意下動態異步加載這個方法,因為這是性能表現最佳的。另外,還有一種友好iframe(friendly iframe)技術。它可能算不上是iframe加載的技術,但是必須使用iframe,它是無阻塞加載的。
普通方法加載iframe
這是一種人盡皆知的普通加載方法,它沒有瀏覽器的兼容性問題。
<iframe src="/path/to/file" frameborder="0" width="728" height="90" scrolling="auto"></iframe>
it知識庫:iframe異步加載技術及性能,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。