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


Posted in Javascript onJune 05, 2014

一、广告代码分析

很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接。

<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/
;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script>

这个javascript请求返回的是这样的一段代码:

document.write( "<a href='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执行完后才接着渲染后面的内容,如果广告比较多的话,就会导致页面阻塞,尤其是在页面的首屏插好几个图片尺寸比较大的这种广告,那么阻塞情况就相当明显和严重,会让用户觉得你这个网页很慢。

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

二、重写document.write

为了避免阻塞,就不能让document.write方法在页面渲染的时候执行,必须想办法让javascript的广告代码在DOM树就绪(DOM ready)之后才执行,但是在DOM树就绪后执行document.write会重新渲染整个页面,这样也是不行的。document.write虽然是浏览器原生的方法,但是也可以自定义一个方法来覆盖掉原来的方法。在javascript广告代码加载之前,重写document.write,等加载并执行完再改回来。

用js的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="http://gg.5173.com/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; // 重写document.write
 document.write = function( text ){
  parent.innerHTML = text;
 };

 script.type = 'text/javascript';
 script.src = url;
 script.onerror = 
 script.onload = 
 script.onreadystatechange = function( e ){
  e = e || window.event;
  if( !script.readyState || 
  /loaded|complete/.test(script.readyState) ||
  e === 'error'
  ){
   // 恢复原生的document.write
   document.write = docWrite;
   head.removeChild( script );
   // 卸载事件和断开DOM的引用
   // 尽量避免内存泄漏
   head =    
   parent = 
   elem =
   script = 
   script.onerror = 
   script.onload = 
   script.onreadystatechange = null;
  }
 }
 // 加载script
 head.insertBefore( script, head.firstChild );
};

四、图片延迟加载的增强版

实现了无阻塞式的延迟加载javascript广告代码,能否进一步优化?如果广告没在首屏出现,能否像通常的图片的延迟加载一样来进行延迟加载?答案是肯定的。对我之前写的图片延迟加载的小插件进行扩展,将原来的图片加载方式(替换src)改成上面的loadScript方式加载就可以实现。当然,仅仅是这样的修改还是会有问题的。如果有多个图片,并且loadScript是同时进行的,而document.write又是全局的方法,保不准在加载A的时候不影响到B,必须让它们一个个的按顺序加载,加载完A之后才能加载B。

五、队列控制

为了让javascript广告代码按顺序加载就需要一个队列来控制加载。于是又有了下面这段简单的队列控制代码:

var loadQueue = [];
// 入列
var queue = function( data ){
 loadQueue.push( data );
 if( loadQueue[0] !== 'runing' ){
  dequeue();
 }
};
// 出列 
var dequeue = function(){
 var fn = loadQueue.shift();
 if( fn === 'runing' ){
  fn = loadQueue.shift();
 } if( fn ){
  loadQueue.unshift( 'runing' );
  fn();
 }
};

图片延迟加载器请参阅比文:https://3water.com/article/50685.htm 

Javascript 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
JQuery 解析多维的Json数据格式
Nov 02 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
vue2中使用less简易教程
Mar 27 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
javascript数组去重方法终极总结
Jun 05 #Javascript
javascript设计模式之解释器模式详解
Jun 05 #Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 #Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 #Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 #Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 #Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 #Javascript
You might like
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python快速排序算法实例分析
2017/11/29 Python
django celery redis使用具体实践
2019/04/08 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
社区中秋节活动方案
2014/01/29 职场文书
农村葬礼主持词
2014/03/31 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
森林防火标语
2014/06/23 职场文书
村创先争优活动总结
2014/08/28 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
Python实现天气查询软件
2021/06/07 Python