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