js文档输出广告的无阻塞加载方法

一、广告代码分析很多第三方广告系统使用document.write加载广告，比如下面javascript的广告链接。复制的代码如下： script type=' text/JavaScript ' src=' http:http://gg.5173.com/adplestar/5173/; AP=2ebe 5681 _ 1 ba 3 _ 4663 _ FA3F _ e73d 2b 83 fbdc；ct=jspu=5173/?'/script这个javascript请求返回这样一段代码：复制代码如下： document . write(' a href=' http://gg.5173.com/adpolestar/wayl/; ')ad=6ff 3f 844 _ 33e 6 _ 86EE _ 3b 96 _ d94c 1cf 1 AEC 4；AP=2EBE 5681 _ 1 BA3 _ 4663 _ FA3F _ E73D 2b 83 FBDC；' ' pu=5173/?http://www.7bao.com/g/xlsbz/index' target=' _ blank ' img src=' ' ' http://html . 5173 cdn.com/market/yuyinga/xly 132 . gif ' ' ' border=' 0 ' width=' 132 px ' height=' 58px '/a ')；这看起来有点二进制加载的方法，但是你不能修改，因为是第三方。此外，代码中还增加了统计功能。上面javascript的广告链接每一次请求都会统计一次，生成的代码也有click statistics功能，也就是说必须这样加载。Document.write在页面呈现时同步进行，其背后的内容必须在javascript代码下载并执行document.write后才能呈现。如果广告比较多，就会导致页面堵塞，尤其是在页面的第一屏插入几个图片尺寸比较大的广告，堵塞的情况会相当明显和严重，会让用户觉得你的页面比较慢。

二、重写document.write为了避免阻塞，在呈现页面时无法执行document.write方法。我们必须找到一种方法，让javascript广告代码在DOM树准备好之后执行。然而，在DOM树准备好之后执行document.write将重新呈现整个页面，这也是不可行的。虽然document.write是浏览器的本机方法，但是您也可以自定义一个方法来重写原始方法。在加载javascript广告代码之前重写document.write，在加载并执行之后再改回来。

三、延迟加载javascript代码上面的关键一步，延迟加载javascript代码，如何实现呢？尝试重写脚本的类型属性，比如将类型设置为自定义属性“type/cache”，但是大部分浏览器(Chrome不会下载)还是会下载这个代码，但是不会执行，页面呈现时下载这样的代码还是会被屏蔽。重写脚本的类型确实不能延迟加载，但最多只能加载不能执行，还存在兼容性问题。把脚本标签放在textarea标签中，然后在需要加载的时候读取textarea的内容，这样脚本才能真正延迟加载。这个方法得益于于波提出的BigRender方案。复制的代码如下： div textarea style=' display : none '脚本类型=' text/JavaScript ' src=' http:http://gg.5173.com/adpolestar/5173/; AP=2ebe 5681 _ 1 ba 3 _ 4663 _ FA3F _ e73d 2b 83 fbdc；ct=jspu=5173/?'/script/textarea/div延迟加载脚本并重写document.write，下面是代码实现：复制代码如下：/***重写document.write实现脚本的非阻塞加载* @ param {domobject} textarea元素*/varloadscript=function(elem){ varurl=elem . value . match(/src=' http 3360([\ s \ s]*)。)'/I) [1]，parent=elem.parentnode，//缓存原始文档. writedocwrite=document.write，//新建脚本加载script=document . create element(' script ')，head=document . head | | document . getelementsbytagname(' head ')[0]| | document . document element；//重写document . write document . write=function(text){ parent . innerhtml=text；};script . type=' text/JavaScript '；script.src=urlscript . one rror=script . onload=script . onreadystatechange=function(e){ e=e | | window . event；if(！script . ready state | |/loaded | complete/。test(script . readystate)| | e==' error '){//还原原始文档. write document . write=docwrite；head.removeChild(脚本)；//卸载事件并断开DOM引用//尽量避免内存泄漏head=parent=elem=script=script . onerror=script . onload=script . onreadystatechange=null；} }//加载scripthead.insertbefore (script，head . first child)；};4.图片延时加载增强版实现了javascript广告代码的无阻塞延时加载。能否进一步优化？如果广告没有出现在第一个屏幕上，是否可以像通常的图片延迟加载一样延迟？答案是肯定的。扩展我之前写的延迟加载图片的小插件，把原来加载图片的方式(而不是src)改成上面loadScript中的加载方式。当然，只是这样的修改还是会有问题的。如果有多张图片，同时进行loadScript，document.write是全局方法，保证A加载时B不受影响，必须按顺序逐个加载，只有A加载后才能加载B。5.队列控制为了按顺序加载javascript广告代码，需要一个队列来控制加载。然后是下面这个简单的队列控制代码：复制代码如下： var loadQueue=[]；//输入varqueue=function(data){ load queue . push(data)；if(loadQueue[0]！==' running '){出列()；}};//出列var出列=function(){ var fn=load queue . shift()；if(fn===' running '){ fn=Loadqueue . shift()；} if(fn){ Loadqueue . unshift(' running ')；fn()；}};延迟加载器见Bibi://www . JB 51 . net/article/50685 . htm。