iframe非同步載入效能優化及無阻塞載入
阿新 • • 發佈：2019-01-02
我們會經常使用iframes來載入第三方的內容、廣告或者外掛。使用iframe是因為它可以和主頁面並行載入，不會阻塞主頁面。
- iframe會阻塞主頁面的onload事件
- 主頁面和iframe共享同一個連線池
阻塞主頁面的onload是這兩個問題中最影響效能的方面。一般都是想讓onload時間越早觸發越好，一方面是使用者體驗過更重要的是google給網站的載入速度的打分：使用者可以用IE和FF中Google工具欄來計時。
怎樣做到iframe無阻塞載入onload？
Meebo的兩個工程師(@marcuswestin and Martin Hunt)做了一個關於他們的Meebo Bar的演講。他們使用iframe來載入一些外掛，並且真正做到了無阻塞載入。對於有的開發者來說，他們的做法還比較新鮮。很贊，超級贊。
<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 onload="'+ 'var d = document;d.getElementsByTagName(\'head\')[0].'+ 'appendChild(d.createElement(\'script\')).src'+'=\'\/path\/to\/file\'">'); doc.close(); //iframe onload event happens})(document);</script>
神奇的地方就在<body onload="">:這個iframe一開始沒有內容，所以onload會立即觸發。然後你建立一個script元素，用他來載入內容、廣告、外掛什麼的，然後再把這個script新增到HEAD中去，這樣iframe內容的載入就不會阻塞主頁面的onload！
原文地址：http://www.open-open.com/solution/view/1319458447249