js 광고(보충)_javascript 기술의 비차단 로딩을 달성하기 위해 document.write를 다시 작성합니다.-JS 튜토리얼-php.cn

자바스크립트의 비차단 로딩은 페이지 성능을 최적화하는 데 큰 역할을 합니다. 이는 페이지 로딩 시 js의 차단을 효과적으로 줄일 수 있습니다. 특히 일부 광고 js 파일의 경우 광고 콘텐츠가 리치 미디어일 수 있으므로 페이지 로딩 속도에 병목 현상이 발생할 수 있습니다. 고성능 자바스크립트는 학생들에게 웹 페이지 속도를 높이고 차단 없이 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('

');

코드는 매우 간단합니다. HTML 코드를 출력하는 document.write입니다(많은 광고주의 광고가 이렇다고 생각합니다). 페이지에 광고가 표시되지 않는 데는 어떤 문제가 있나요? 문제는 이 document.write에 있습니다. 왜? document.write의 정의가 어떻게 매우 유용한지 알아보기 위해 먼저 w3schools를 살펴보겠습니다.

정의 및 사용법
write() 메소드는 문서에 HTML 표현식이나 JavaScript 코드를 작성합니다.
여러 매개변수(exp1, exp2, exp3,...)를 나열할 수 있으며 순서대로 문서에 추가됩니다.

방법:
하나는 이 메소드를 사용하여 문서에 HTML을 출력하는 것이고, 다른 하나는 이 메소드가 호출된 윈도우가 아닌 윈도우나 프레임에서 새로운 문서를 생성하는 것이다. 두 번째 경우에는 close() 메서드를 사용하여 문서를 닫아야 합니다.

그러나 원칙은 페이지 흐름 입력 프로세스 중에 실행된다는 것입니다. 페이지가 로드되면 document.write()를 다시 호출하면 암시적으로 document.open()을 호출하여 현재 문서를 지우고 새 문서를 시작합니다. 즉, HTML이 로드된 후 document.write를 다시 사용하면 이전에 생성된 HTML이 삭제되고 document.write에 의해 출력된 내용이 표시됩니다.

이 예에서는 페이지가 로드된 후 document.write가 HTML로 출력되면 실행되지 않습니다. 이제 문제와 원리를 알았으니 이 문제를 어떻게 해결해야 할까요?

Ajax를 비동기식으로 사용하면 행이 다릅니다. 많은 광고 파일이 타사입니다. 다른 도메인 이름에서는 도메인 간 문제가 있으며 해당 코드의 출력을 제어할 수 없습니다. 이 경우 document.write를 다시 작성하고, js 파일이 로드된 후에 document.write를 다시 다시 작성하는 방법을 생각했습니다. 코드를보세요.

첫 번째 버전은 차단 없이 js 광고를 로드합니다.

function LoadADScript(url, container, callback){
    this.dw = document.write;
    this.url = url;
    this.containerObj = (typeof container == 'string'&#63;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. 구글 애드센스와 같은 일부 광고는 미리 매개변수를 설정해야 할 것 같아요

이 두 가지 문제를 해결하기 위해 최종 Non-Blocking Loading 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' &#63; 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();
      }
    }
  };
}());

로그인 후 복사