重寫(xiě)document.write實(shí)現(xiàn)無(wú)阻塞加載js廣告(補(bǔ)充)

更新時(shí)間：2014年12月12日 15:12:38 投稿：mdxy-dxy

這篇文章主要介紹了重寫(xiě)document.write實(shí)現(xiàn)無(wú)阻塞加載js廣告,需要的朋友可以參考下

無(wú)阻塞加載javascript，對(duì)于頁(yè)面性能優(yōu)化有很大的作用，這樣能有效的減少js對(duì)頁(yè)面加載的阻塞。特別是一些廣告js文件，由于廣告內(nèi)容有可能是富媒體，更是很可能成為你頁(yè)面加載提速的瓶頸，高性能javascript告訴我們，同學(xué)，提升你的網(wǎng)頁(yè)速度，就無(wú)阻塞地加載JS吧。

于是便有一下代碼出現(xiàn)。

(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);
})();

上邊都是大家熟悉的，看過(guò)書(shū)的同學(xué)都知道這樣無(wú)阻塞加載的好處，效果挺不錯(cuò)的，當(dāng)此等無(wú)阻塞腳本遇到一般js廣告就來(lái)了寫(xiě)問(wèn)題——廣告代碼出現(xiàn)在HTML里面了卻不顯示廣告。

納尼？HTML出來(lái)了不渲染到頁(yè)面上？

先看看廣告js代碼

復(fù)制代碼代碼如下:

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

代碼挺簡(jiǎn)單就一個(gè)document.write輸出HTML代碼（相信很多廣告商的廣告都這樣），頁(yè)面不顯示廣告問(wèn)題在哪里呢？問(wèn)題就在這個(gè)document.write。為什么？先w3schools看看document.write的定義很使用吧。

定義和用法
write() 方法可向文檔寫(xiě)入 HTML 表達(dá)式或 JavaScript 代碼。
可列出多個(gè)參數(shù)(exp1,exp2,exp3,...) ，它們將按順序被追加到文檔中。

方法：
一是在使用該方在文檔中輸出 HTML，另一種是在調(diào)用該方法的的窗口之外的窗口、框架中產(chǎn)生新文檔。在第二種情況中，請(qǐng)務(wù)必使用 close() 方法來(lái)關(guān)閉文檔。

但其原理是在頁(yè)面流輸入過(guò)程中執(zhí)行，一旦頁(yè)面加載完畢，再次調(diào)用 document.write()，會(huì)隱式地調(diào)用 document.open() 來(lái)擦除當(dāng)前文檔并開(kāi)始一個(gè)新的文檔。也就是說(shuō)如果在HTML加載完后我們?cè)偈褂胐ocument.write會(huì)檫除之前生成html，而顯示document.write輸出的內(nèi)容。

而我們例子中在頁(yè)面加載完后在在html中輸出document.write，就不會(huì)被執(zhí)行了。問(wèn)題知道了，原理知道了，那怎么解決這個(gè)問(wèn)題呢？

異步利用ajax，行不同，很多廣告文件都是第三方的，在不同域名下，存在跨域問(wèn)題，而且不能我們控制其代碼的輸出。在這種情況下我們想到了一個(gè)辦法就是重寫(xiě)掉document.write，在js文件加載結(jié)束后再把document.write重寫(xiě)回去。看代碼。

第一版本無(wú)阻塞加載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();
    }
  };

頁(yè)面調(diào)用代碼：

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">');

第一版本的問(wèn)題是在多個(gè)文件調(diào)用的時(shí)候，會(huì)出現(xiàn)一些問(wèn)題：

1. 由于文件加載的速度不一樣，導(dǎo)致可能有些先加載有些后加載，也就是無(wú)序的，而且很多時(shí)候我們需要的是有序的。比如我們需要先加載第一屏的廣告。

2. 想有些廣告需要前置設(shè)置一些參數(shù)的，例如google adsense

為了解決這兩個(gè)問(wèn)題好進(jìn)一步修改成最終無(wú)阻塞加載js版本。

HTML頁(yè)面代碼:

<!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源代碼

/**
 * 無(wú)阻塞加載廣告
 * @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();
        };
      }
      //重寫(xiě)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();
      }
    }
  };
}());

您可能感興趣的文章: