通过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里面是肯定有问题的。需要寻求其他的方案。