iframe學習（二）之視窗載入

我們會經常使用iframes來載入第三方的內容、廣告或者外掛程式。使用iframe是因為他可以和主頁面並行載入，不會阻塞主頁面，弊端如下：

阻塞主頁面的onload是這兩個問題中最影響效能的方面。一般都是想讓onload時間越早觸發越好，一方面是使用者體驗過更重要的是google給**的載入速度的打分：使用者可以用ie和ff中google工具欄來計時。

那麼為了提高頁面效能，怎樣才能不阻塞主頁面的onload事件的來載入iframe呢？

普通iframe、onload之後載入iframe、settimeout() iframe、非同步載入iframe

"" frameborder="
0" width="
728" height="
90" scrolling="
auto
">

這種方式在各瀏覽器的表現形式：

（1）iframe會在主頁面的onload之前載入

（2）iframe會在所有的iframe的內容都載入完後才出發的iframe的onload事件

（3）主頁面的onload事件會在頁面上的所有iframe的onload觸發完之後才觸發，所以會阻塞主頁面的載入

（4）當iframe在載入的過程中，瀏覽器的標識會顯示正在載入東西，處於忙碌狀態

注意onload阻塞。如果iframe的內容只需要很短的時間來載入和執行，那麼也不是個大問題，而且使用這種方法還有個好處是可以和主頁面並行載入。但是如果載入這個iframe需要很長時間，使用者體驗就很差了。你得自己測試一下然後在也做些測試，根據onload的時間看看是否需要其他載入方法。

如果你想在iframe中載入一些內容，但是這些內容對於頁面來說不是那麼的重要。或者這些內容不需要馬上展現給使用者的，需要點選觸發之類的。那麼可以考慮在主頁面載入之後載入iframe。

這種方式在各瀏覽器的表現形式：

（1）iframe會在主頁面onload之後載入

（2）主頁面的onload事件與ifame無關，所以iframe不會阻塞主頁面的載入

（3）當iframe載入的時候，瀏覽器會標識正在載入

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

但是，當iframe載入的時候，還是會看到瀏覽器的忙碌狀態，相對於普通載入方法，使用者看到忙碌狀態的時間更長。還有就是使用者還沒等到頁面完全載入完的時候就已經離開了。有些情況下這是個問題，比如廣告。

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

steve souders(又是他？)有乙個這種方法的測試頁面(他寫道：「src通過settimeout動態的設定，這種方法可以再所有的瀏覽器中避免阻塞」。

"
iframe1
" src="" width="
200" height="
100" border="
2">

此種方法在除了ie8之外的在其他瀏覽器的表現：

（1）iframe會在主頁面onload之前開始載入

（2）iframe的onload事件會在iframe的內容都載入完之後觸發

（3）iframe不會阻塞主頁面的onlaod事件（ie8除外），為什麼不會阻塞，因為是使用settimeout（）

（4）當iframe載入的時候，瀏覽器會顯示忙碌狀態

因為ie8的問題，這種技術就不適合很多**了。如果有超過10%的使用者使用ie8,十分之一的使用者體驗就會差。你會說那也只是比普通載入差一點點，其實普通載入效能上也不差。onload事件對於10%的使用者來說都更長。。。。額，你自己考慮吧。但是最好在看了下面這個很讚的非同步載入方法之後再決定吧。

神奇的地方就在:這個iframe一開始沒有內容，所以onload會立即觸發。然後你建立乙個script元素，用他來載入內容、廣告、外掛程式什麼的，然後再把這個script新增到head中去，這樣iframe內容的載入就不會阻塞主頁面的onload！你應該看看他在個瀏覽器中的表現：

（1）iframe會在主頁面onload之前開始載入

（2）iframe的onload會立即觸發，因為iframe的內容一開始為空

（3）主頁面的onload不會被阻塞，為什麼這個iframe不會阻塞主頁面的onload？因為，如果你不在iframe使用onload監聽，那麼iframe的載入就會阻塞主頁面的onload

（4）當iframe載入的時候，瀏覽器終於不顯示忙碌狀態了（非常好）

iframe非同步載入技術及效能

mdn document.open()