首页
所有分类
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中通过URL传递汉字的方法
Apr 09 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
javascript判断office版本示例
Apr 11 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
基于JavaScript实现控制下拉列表
May 08 Javascript
vue实现简单图片上传
Jun 30 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
RTMP(1) 缓存机制(1) keeplive_timeout(1) text-shadow(1) zabbix(9) 区块链(2) BufferPool(1) http_stub_status_module(1) TypeScript(2) location(2)
You might like
php设计模式 Observer(观察者模式)
2011/06/26 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
vue组件生命周期详解
2017/11/07 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
python杀死一个线程的方法
2015/09/06 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Python制作刷网页流量工具
2017/04/23 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python简单商城购物车实例代码
2018/03/15 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
萌新HTML5 入门指南（二）
2020/11/09 HTML / CSS
Chupi官网：在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
物理研修随笔感言
2014/02/14 职场文书
化工操作工岗位职责
2014/04/29 职场文书
情况说明书格式范文
2014/05/06 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
理解python中装饰器的作用
2021/07/21 Python
python垃圾回收机制原理分析
2022/04/13 Python