js의 document.write_javascript 기술로 출력된 광고를 비차단 로딩하는 방법

1. 광고 코드 분석

많은 타사 광고 시스템에서는 document.write를 사용하여 다음 자바스크립트 광고 링크와 같은 광고를 로드합니다.

코드 복사 코드는 다음과 같습니다.

이 자바스크립트 요청은 다음과 같은 코드를 반환합니다.

코드 복사 코드는 다음과 같습니다.

document.write( ""border='0' width="132px" height="58px" />" );

약간 2차 로딩 방식인 것 같은데 3차 자체이기 때문에 수정할 수는 없습니다. 그리고 코드에 통계 기능이 추가되었습니다. 위의 자바스크립트 광고 링크는 요청될 때마다 계산됩니다. 생성된 코드에는 클릭 통계 기능도 있으므로 이러한 방식으로 로드해야 합니다.

Document.write는 페이지가 렌더링될 때 동기적으로 수행됩니다. 후속 콘텐츠를 렌더링하기 전에 javascript 코드가 다운로드되고 document.write가 실행될 때까지 기다려야 합니다. 특히 페이지의 첫 화면에 비교적 큰 이미지 크기의 광고를 여러 개 삽입하는 경우 차단 상황이 매우 명백하고 심각하여 사용자는 웹페이지가 매우 느리다고 생각할 수 있습니다.

2. document.write

다시 작성

차단을 방지하려면 페이지가 렌더링될 때 document.write 메서드를 실행할 수 없지만 DOM 트리가 준비된(DOM 준비) 후에 자바스크립트 광고 코드를 실행하도록 하는 방법을 찾아야 합니다. DOM 트리가 준비된 후에는 전체 페이지가 다시 렌더링되지만 이는 불가능합니다. document.write는 기본 브라우저 방법이지만 원래 방법을 재정의하도록 방법을 사용자 정의할 수도 있습니다. 자바스크립트 광고 코드가 로드되기 전에 document.write를 다시 작성하고, 로드 및 실행된 후에 다시 변경하세요.

3. 자바스크립트 코드 로딩 지연

위에서 가장 중요한 단계는 자바스크립트 코드의 지연 로딩입니다. 어떻게 구현하나요? 먼저 유형을 사용자 정의 속성 "type/cache"로 설정하는 등 스크립트의 유형 속성을 다시 작성해 보십시오. 그러나 대부분의 브라우저(Chrome에서는 다운로드하지 않음)는 이 코드를 다운로드하지만 실행하지는 않습니다. 코드는 페이지가 렌더링될 때 여전히 차단됩니다. 스크립트 유형을 다시 작성하면 실제 지연 로드가 불가능하며 대부분 실행하지 않고 로드할 수 있으며 여전히 호환성 문제가 있습니다.

스크립트 태그를 textarea 태그에 넣은 다음 로드해야 할 때 텍스트 영역 콘텐츠를 읽습니다. 이렇게 하면 Yubo에서 제안한 BigRender(벽 외부) 솔루션 덕분에 실제로 스크립트 로드가 지연될 수 있습니다. .

코드 복사 코드는 다음과 같습니다.

< textarea style= "display:none">

스크립트를 지연 로드하고 document.write를 다시 작성합니다. 다음은 코드 구현입니다.

코드 복사 코드는 다음과 같습니다.

/**
* 비차단 로딩 스크립트를 달성하기 위해 document.write를 다시 작성
* @param { Dom Object } 텍스트 영역 요소
*/
var loadScript = function( elem ){
 var url = elem.value.match( /src="([sS]*?)"/ i )[1],
  parent = elem.parentNode,
  // 缓存原生的document.write
  docWrite = document.write, 
  // 创建一个newscript来加载
  script = document.createElement( 'script' ),
  head = document.head ||
   document.getElementsByTagName( 'head' )[0] ||
   document.documentElement;

 // 추가document.write
 document.write = function( text ){
  parent.innerHTML = text;
 };

 script.type = 'text/javascript';
 script.src = url;

 script.onerror =
 script.onload =
 script.onreadystatechange = function( e ) {
  e = e || window.event;
  if( !script.readyState ||
  /loaded|complete/.test(script.readyState) ||
  e === 'error'
  ){

   // 恢复原生document.write
   document.write = docWrite;
   head.removeChild( script );

   // 卸载事件和断开DOM的引用
   / / 尽weight避免内存泄漏
   head =    
   parent =
   elem =
   script =
   script.onerror =
   script.onload =
   script.onreadystatechange = null;

  }
 }

 // 加载script
 head.insertBefore( script, head.firstChild );
};

4개짜리 그림 延迟加载의 增强版

Javascript를 사용하여 자바스크립트를 사용하는 방법은 다음과 같습니다.加载一样来进行延迟加载?答案是肯定的입니다.对我이전의 사진에는 작은 사진이 포함되어 있습니다.是这样的修改还是会多问题的。如果多个图 Images, 并且loadScript是同时进行 , 而document.write 는 완전한 방법, 保不准에서 加载A 의 时候不影响到B, 必须让它们一个个的按顺序加载,加载完A지后才能加载B.

五、队列控제

为了让javascript는 广告代码按顺序加载就需要一个队列来控加载.于是又有了下面这段简单的队列控代码：

复제대码 代码如下:

var loadQueue = [];
// 入列
var queue = function( data ){
 loadQueue.push ( 데이터 );
 if( loadQueue[0] !== 'runing' ){
  dequeue();
 }
};
// 出列 
var dequeue = function(){
 var fn = loadQueue.shift();
 if( fn === 'runing' ){
  fn = loadQueue.shift();
 }

 if( fn ){
  loadQueue.unshift( 'runing' );
  fn();
 }
};

图文延迟加载器请参阅比文：http://www.jb51.net/article/50685.htm