首页
所有分类
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游戏之优化篇
Nov 08 Javascript
js验证是否为数字的总结
Apr 14 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
从零开始学习Node.js系列教程六：EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
vue elementUI 表单校验的实现代码（多层嵌套）
Nov 06 Javascript
搭建vscode+vue环境的详细教程
Aug 31 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) LOL(1) 小缇娜的奇幻之地(1) 最终幻想(1) 战锤40K(1) 艾尔登法环(1) 我的世界(1) 暴雪(1) 遗弃(1) 巫师(1)
You might like
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
Python金融数据可视化汇总
2017/11/17 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
我们的节日端午节活动方案
2014/03/02 职场文书
经典毕业生求职信
2014/07/12 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
升学宴学生答谢词
2015/01/05 职场文书
小学运动会加油稿
2015/07/22 职场文书
班级班风口号大全
2015/12/25 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL