通過iframe負載頁面的js加載與執行

近來在優化公司首頁，首頁用到了百度管家所生成的廣告。 先貼出代碼，這是之前的開發人員寫的。

<script type="text/javascript" src="http://cbjs.baidu.com/js/m.js"></script> 
    <script type="text/javascript"> BAIDU_CLB_preloadSlots("16172","290788","18334","18335","22484","205385"); </script>
    <div id="BAIDU_AD_1"><script type='text/javascript'>BAIDU_CLB_fillSlot('16172');</script></div>
    <script>BAIDU_CLB_prepareMoveSlot('16172');</script> 
    <script>document.getElementById("index_a1").appendChild(document.getElementById("BAIDU_AD_1"));</script>
    <div id="BAIDU_AD_sp"><script type='text/javascript'>BAIDU_CLB_fillSlot('290788');</script></div>
    <script>BAIDU_CLB_prepareMoveSlot('290788');</script> 
    <script>document.getElementById("index_sp").appendChild(document.getElementById("BAIDU_AD_sp"));</script>
    <div id="BAIDU_AD_3"><script type='text/javascript'>BAIDU_CLB_fillSlot('18334');</script></div>
    <script>BAIDU_CLB_prepareMoveSlot('18334');</script> 
    <script>document.getElementById("index_a3").appendChild(document.getElementById("BAIDU_AD_3"));</script>
    <div id="BAIDU_AD_4"><script type='text/javascript'>BAIDU_CLB_fillSlot('18335');</script></div>
    <script>BAIDU_CLB_prepareMoveSlot('18335');</script> 
    <script>document.getElementById("index_a4").appendChild(document.getElementById("BAIDU_AD_4"));</script>
    <div id="BAIDU_AD_5"><script type='text/javascript'>BAIDU_CLB_fillSlot('22484');</script></div>
    <script>BAIDU_CLB_prepareMoveSlot('22484');</script> 
    <script>document.getElementById("index_a5").appendChild(document.getElementById("BAIDU_AD_5"));</script>
    <div id="BAIDU_AD_6"><script type='text/javascript'>BAIDU_CLB_fillSlot('205385');</script></div>
    <script>BAIDU_CLB_prepareMoveSlot('205385');</script> 
    <script>document.getElementById("index_a6").appendChild(document.getElementById("BAIDU_AD_6"));</script>
    <script>tlog.fire("IndexBodyE", "IndexHeadB");</script>

上面的代碼很亂，大家不用細讀， 這是百度廣告管家生成的代碼，也是生成同步廣告的寫法，這段代碼執行起來非常慢，大家從代碼上就可以看出，雖然是在頁面的最后，但依然會阻塞后才能domready,

我的第一反應就是考慮將這些代碼全部放在domready之后再處理，但類似這些

BAIDU_CLB_fillSlot的方法，都是document.write(), 如果放到domready后會直接清空文檔，而且這些是第三方的js實現，也不能去修改實現。

仔細分析了下代碼，這些代碼邏輯是通過百度第三方代碼渲染出不同的廣告位，在這里是6個，再appendChild到頁面相應的位置。

因為這些廣告沒有統計意義，只有被點擊的意義，那可以在domready后創建一個iframe來並行加載這段代碼，將渲染好的div廣告 和 iframe廣告再appendChild父頁面。

因為擔心有些瀏覽器不支持iframe的節點appendChild到父頁面，我用的是較安全的innerHTML, div廣告沒任何問題，但iframe廣告問題挺多的，最麻煩的是ie系列下domain的bug,

這個可以看我另外一篇博文，http://www.cnblogs.com/fang9159/archive/2012/09/12/iframe.html， 里面其實就是解決iframe問題 ，這樣通過iframe來負載頁面的方案已經實現。

效果也不錯， 減少了1.5秒左右的時間（1200萬次瀏覽的平均值）。


總結：
1. iframe是html消耗最大的dom元素，用它需要謹慎，需要權衡利弊，像筆者這種情況當然是利大於弊。
2. 在一個頁面里，js是阻塞下載和執行的，可以通過iframe來緩解這種阻塞。
3. 關系到第三方的廣告優化，需要考慮到它自身有無統計意義，如果有統計意義，將它仍在iframe里面是肯定有問題的。需要尋求其他的方案。