让documentwrite的广告无阻塞的加载.docVIP

让documentwrite的广告无阻塞的加载 广告代码分析 很多第三方的广告系统都是使用document.write来加载广告，如下面的一个javascript的广告链接。 script type=text/javascript src=/adpolestar/5173/ ;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?/script 这个javascript请求返回的是这样的一段代码： document.write( a href=/adpolestar/wayl/; + ad=6FF3F844_33E6_86EE_3B96_D94C1CF1AEC4;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC; + pu=5173;/?/g/xlsbz/index target=_blankimg src= + /market/yunyinga/xly132.gif + border=0 width=132px height=58px //a ); 这种看似有点二的加载方式，但是你却没办法改造它，因为它本身就是第三方的。并且代码都添加了统计的功能，上面的javascript的广告链接每请求一次都会统计一次，生成的代码也有点击统计的功能，也就是说必须以这种方式来进行加载。 document.write是在页面渲染的时候同步进行的，必须要等javascript代码下载好并且document.write执行完后才接着渲染后面的内容，如果广告比较多的话，就会导致页面阻塞，尤其是在页面的首屏插好几个图片尺寸比较大的这种广告，那么阻塞情况就相当明显和严重，会让用户觉得你这个网页很慢。 重写document.write 为了避免阻塞，就不能让document.write方法在页面渲染的时候执行，必须想办法让javascript的广告代码在DOM树就绪(DOM ready)之后才执行，但是在DOM树就绪后执行document.write会重新渲染整个页面，这样也是不行的。document.write虽然是浏览器原生的方法，但是也可以自定义一个方法来覆盖掉原来的方法。在javascript广告代码加载之前，重写document.write，等加载并执行完再改回来。 延迟加载javascript代码 上面比较关键的一步，延迟加载javascript代码，如何实现呢？先尝试通过改写script的type属性，比如将type设置成一个自定义的属性”type/cache”，但这样大部分浏览器(Chrome不会下载)仍然会下载这段代码，但不会执行，在页面渲染的时候下载这么一段代码仍然会阻塞，通过改写script的type并不能实现真正的延迟加载，最多能实现只加载不执行，而且还存在兼容问题。 将script标签放到textarea标签中，等需要加载的时候再读取textarea的内容，这样可以实现真正的延迟加载script，这个方法要感谢玉伯提出的BigRender(墙外)方案。 div textarea style=display:none script type=text/javascript src=/adpolestar/5173/ ;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?/script /textarea /div 延迟加载script并重写document.write，下面是代码实现： /** * 重写document.write实现无阻塞加载script * @param { Dom Object } textarea元素 */ var loadScript = function( elem ){ var url = elem.value.match( /src=([\s\S]*?)/i )[1], parent = elem.parentNode, // 缓存原生的document.write docWrite = document.write, // 创建一个新script来加载 script = document.createElement( script ), head = document.head || document.getElementsByTagName( head )[0] || document.documentElement; // 重