源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

用js的document.write输出的广告无阻塞加载的方法

  • 时间:2021-04-16 16:42 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:用js的document.write输出的广告无阻塞加载的方法
[b]一、广告代码分析[/b] 很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接。
[url=http://gg.5173.com/adpolestar/wayl/;]"ad=6FF3F844_33E6_86EE_3B96_D94C1CF1AEC4;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;" + "pu=5173;/?http://www.7bao.com/g/xlsbz/index' target='_blank'><img src='" + "http://html.5173cdn.com/market/yunyinga/xly132.gif' " + "border='0' width="132px" height="58px" /></a>" );
这种看似有点二的加载方式,但是你却没办法改造它,因为它本身就是第三方的。并且代码都添加了统计的功能,上面的javascript的广告链接每请求一次都会统计一次,生成的代码也有点击统计的功能,也就是说必须以这种方式来进行加载。 document.write是在页面渲染的时候同步进行的,必须要等javascript代码下载好并且document.write执行完后才接着渲染后面的内容,如果广告比较多的话,就会导致页面阻塞,尤其是在页面的首屏插好几个图片尺寸比较大的这种广告,那么阻塞情况就相当明显和严重,会让用户觉得你这个网页很慢。 [img]http://files.jb51.net/file_images/article/201406/201465113411978.png?201455113432[/img] [b]二、重写document.write[/b] 为了避免阻塞,就不能让document.write方法在页面渲染的时候执行,必须想办法让javascript的广告代码在DOM树就绪(DOM ready)之后才执行,但是在DOM树就绪后执行document.write会重新渲染整个页面,这样也是不行的。document.write虽然是浏览器原生的方法,但是也可以自定义一个方法来覆盖掉原来的方法。在javascript广告代码加载之前,重写document.write,等加载并执行完再改回来。 [img]http://files.jb51.net/file_images/article/201406/201465113450184.png?201455113458[/img] [b]三、延迟加载javascript代码[/b] 上面比较关键的一步,延迟加载javascript代码,如何实现呢?先尝试通过改写script的type属性,比如将type设置成一个自定义的属性”type/cache”,但这样大部分浏览器(Chrome不会下载)仍然会下载这段代码,但不会执行,在页面渲染的时候下载这么一段代码仍然会阻塞,通过改写script的type并不能实现真正的延迟加载,最多能实现只加载不执行,而且还存在兼容问题。 将script标签放到textarea标签中,等需要加载的时候再读取textarea的内容,这样可以实现真正的延迟加载script,这个方法要感谢玉伯提出的BigRender(墙外)方案。 延迟加载script并重写document.write,下面是代码实现:
[url=http://www.1sucai.cn/article/50685.htm]http://www.1sucai.cn/article/50685.htm[/url] 
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部