首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

重写document.write实现无阻塞加载js广告(补充)

Posted in Javascript onDecember 12, 2014

无阻塞加载javascript，对于页面性能优化有很大的作用，这样能有效的减少js对页面加载的阻塞。特别是一些广告js文件，由于广告内容有可能是富媒体，更是很可能成为你页面加载提速的瓶颈，高性能javascript告诉我们，同学，提升你的网页速度，就无阻塞地加载JS吧。

于是便有一下代码出现。

(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();

上边都是大家熟悉的，看过书的同学都知道这样无阻塞加载的好处，效果挺不错的，当此等无阻塞脚本遇到一般js广告就来了写问题——广告代码出现在HTML里面了却不显示广告。

纳尼？HTML出来了不渲染到页面上？

先看看广告js代码

document.write('<img src="http://img.3water.com/logo_small.gif" alt="Logo">');

代码挺简单就一个document.write输出HTML代码（相信很多广告商的广告都这样），页面不显示广告问题在哪里呢？ 问题就在这个document.write。为什么？先w3schools看看document.write的定义很使用吧。

定义和用法
write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。
可列出多个参数(exp1,exp2,exp3,...) ，它们将按顺序被追加到文档中。

方法：
一是在使用该方在文档中输出 HTML，另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档。在第二种情况中，请务必使用 close() 方法来关闭文档。

但其原理是在页面流输入过程中执行，一旦页面加载完毕，再次调用 document.write()，会隐式地调用 document.open() 来擦除当前文档并开始一个新的文档。也就是说如果在HTML加载完后我们再使用document.write会檫除之前生成html，而显示document.write输出的内容。

而我们例子中在页面加载完后在在html中输出document.write，就不会被执行了。问题知道了，原理知道了，那怎么解决这个问题呢？

异步利用ajax，行不同，很多广告文件都是第三方的，在不同域名下，存在跨域问题，而且不能我们控制其代码的输出。在这种情况下我们想到了一个办法就是重写掉document.write，在js文件加载结束后再把document.write重写回去。看代码。

第一版本无阻塞加载js广告：

function LoadADScript(url, container, callback){
    this.dw = document.write;
    this.url = url;
    this.containerObj = (typeof container == 'string'?document.getElementById(container):container);
    this.callback = callback || function(){};
  }
  
  LoadADScript.prototype = {
    startLoad: function(){
      var script = document.createElement('script'),
        _this = this;
      
      if(script.readyState){ //IE
        script.onreadystatechange = function(){
        if (script.readyState == "loaded" || script.readyState == "complete"){
          script.onreadystatechange = null;
          _this.finished();
        }
      };
      }else{ //Other
        script.onload = function(){
          _this.finished();
        };
      }
      
      document.write = function(ad){
        var html = _this.containerObj.innerHTML;
        _this.containerObj.innerHTML = html + ad;
      }
      
      script.src = _this.url;
      script.type = 'text/javascript';
      document.getElementsByTagName('head')[0].appendChild(script);
    },
    finished: function(){
      document.write = this.dw;
      this.callback.apply();
    }
  };

页面调用代码：

var loadScript = new LoadADScript('ad.js','msat-adwrap',function(){ console.log('msat-adwrap'); });
  loadScript.startLoad();
  
  var loadScript = new LoadADScript('ad2.js','msat-adwrap',function(){ console.log('msat-adwrap2'); });
  loadScript.startLoad();
  
  var loadScript = new LoadADScript('ad3.js','msat-adwrap',function(){ console.log('msat-adwrap3'); });
  loadScript.startLoad();

广告js代码

//ad.js
document.write('<img src="http://images.cnblogs.com/logo_small.gif" alt="Logo">');

//ad2.js
document.write('<img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129" usemap="#mp">');

//ad3.js
document.write('<img alt="Google" height="95" id="hplogo" src="http://www.google.com/images/srpr/logo3w.png" width="275">');

第一版本的问题是在多个文件调用的时候，会出现一些问题：

1. 由于文件加载的速度不一样，导致可能有些先加载有些后加载，也就是无序的，而且很多时候我们需要的是有序的。比如我们需要先加载第一屏的广告。

2. 想有些广告需要前置设置一些参数的，例如google adsense

为了解决这两个问题好进一步修改成最终无阻塞加载js版本。

HTML页面代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>new_file</title>
    <script type="text/javascript" src="loadscript.js"></script>
  </head>
<body>
<div id = "msat-adwrap"></div>
<div id = "msat-adwrap2"></div>
<script type="text/javascript">
  loadScript.add({
    url:'ad.js',
    container: 'msat-adwrap',
    callback:function(){ console.log('msat-adwrap'); }
  }).add({
    url:'ad2.js',
    container: 'msat-adwrap2',
    callback:function(){ console.log('msat-adwrap2'); }
  }).add({//google adsense
    url:'http://pagead2.googlesyndication.com/pagead/show_ads.js',
    container: 'msat-adwrap',
    init: function(){
      google_ad_client = "ca-pub-2152294856721899";
      /* 250x250 rich */
      google_ad_slot = "3929903770";
      google_ad_width = 250;
      google_ad_height = 250;
    },
    callback:function(){ console.log('msat-adwrap3'); }
  }).execute();
</script>
</body>
</html>

loadscript.js源代码

/**
 * 无阻塞加载广告
 * @author Arain.Yu
 */

var loadScript = ( function() {
  var adQueue = [], dw = document.write;
  //缓存js自身的document.write

  function LoadADScript(url, container, init, callback) {
    this.url = url;
    this.containerObj = ( typeof container == 'string' ? document.getElementById(container) : container);
    this.init = init ||
    function() {
    };


    this.callback = callback ||
    function() {
    };

  }


  LoadADScript.prototype = {
    startLoad : function() {
      var script = document.createElement('script'), _this = this;

      _this.init.apply();

      if(script.readyState) {//IE
        script.onreadystatechange = function() {
          if(script.readyState == "loaded" || script.readyState == "complete") {
            script.onreadystatechange = null;
            _this.startNext();
          }
        };
      } else {//Other
        script.onload = function() {
          _this.startNext();
        };
      }
      //重写document.write
      document.write = function(ad) {
        var html = _this.containerObj.innerHTML;
        _this.containerObj.innerHTML = html + ad;
      }

      script.src = _this.url;
      script.type = 'text/javascript';
      document.getElementsByTagName('head')[0].appendChild(script);
    },
    finished : function() {
      //还原document.write
      document.write = this.dw;
    },
    startNext : function() {
      adQueue.shift();
      this.callback.apply();
      if(adQueue.length > 0) {
        adQueue[0].startLoad();
      } else {
        this.finished();
      }
    }
  };

  return {
    add : function(adObj) {
      if(!adObj)
        return;

      adQueue.push(new LoadADScript(adObj.url, adObj.container, adObj.init, adObj.callback));
      return this;
    },
    execute : function() {
      if(adQueue.length > 0) {
        adQueue[0].startLoad();
      }
    }
  };
}());

重写document.write实现无阻塞加载js广告(补充)

- Author -

mdxy-dxy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
js arguments对象应用介绍
Nov 28 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
jQuery中库的引用方法
Jan 06 jQuery
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
js中document.write的那点事
Dec 12 #Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 #Javascript
jQuery实现瀑布流布局
Dec 12 #Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 #Javascript
js 左右悬浮对联广告代码示例
Dec 12 #Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 #Javascript
jquery禁止回车触发表单提交
Dec 12 #Javascript
保养(1) KDKA(1) 电台频率(32) 中波(3) 长波(3) 短波(8) 立体声(1) 广播(8) 收音机(62) Harman Kardon(1)
You might like
PHP提取中文首字母
2008/04/09 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php查看当前Session的ID实例
2015/03/16 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
JavaScript字符串对象substring方法入门实例（用于截取字符串）
2014/10/17 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
Angular4 中常用的指令入门总结
2017/06/12 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
python异常和文件处理机制详解
2016/07/19 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python Tkinter的图片刷新实例
2019/06/14 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
爱情保证书范文
2014/02/01 职场文书
八项规定整改措施
2014/02/12 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
老干部工作汇报材料
2014/10/28 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
竞聘演讲报告：基本写作有哪些？附开头范文
2019/10/16 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS