1. 광고 코드 분석
많은 타사 광고 시스템은 Document.Write를 사용하여 다음 JavaScript 광고 링크와 같은 광고를로드합니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript"src = "http://gg.5173.com/adpolestar/5173/
; AP = 2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC; CT = JS; PU = 5173;/? "> </script>
이 JavaScript 요청은 다음과 같은 코드를 반환합니다.
코드 사본은 다음과 같습니다.
document.write ( "<a href = 'http : //gg.5173.com/adpolestar/wayl/;" +
"AD = 6FF3F844_33E6_86EE_3B96_D94C1CF1AEC4; AP = 2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;" +
"pu = 5173;/? http : //www.7bao.com/g/xlsbz/index 'target ='_ blank '> <img src ='" +
"http://html.5173cdn.com/market/yunyinga/xly132.gif '" +
"국경 = '0' /> </a>");
이런 종류의 로딩 방법은 비트 2처럼 보이지만 타사이기 때문에 수정할 수 없습니다. 또한 코드는 통계 기능을 추가했습니다. 위의 JavaScript AD 링크는 요청 될 때마다 한 번 계산됩니다. 생성 된 코드는 클릭 통계의 기능도 있습니다. 즉, 이러한 방식으로로드해야합니다.
Page Rendering 중에 worde.write가 동기화됩니다. JavaScript 코드가 다운로드 될 때까지 기다려야하고 다음 내용을 렌더링하기 전에 wart.write가 실행됩니다. 광고가 많으면 페이지가 차단 될 것입니다. 특히 이미지 크기가 큰 광고가 페이지의 첫 번째 화면에 삽입되는 경우 특히 페이지가 차단됩니다. 차단 상황은 매우 명백하고 진지 해져서 사용자가 웹 페이지가 매우 느리다고 느끼게 할 것입니다.
2. 문서를 다시 작성하십시오
막힘을 피하기 위해 Page 렌더링 중에 Document.Write 메소드를 실행할 수 없습니다. DOM 트리가 준비된 후 JavaScript AD 코드를 실행할 수있는 방법을 찾아야합니다. 그러나 DOM 트리가 준비된 후에는 전체 페이지가 다시 렌더링되어 불가능합니다. Document.write는 브라우저 기본 메소드이지만 원래 메소드를 덮어 쓰는 메소드를 사용자 정의 할 수도 있습니다. JavaScript AD 코드가로드되기 전에 Locument.Write를 다시 작성하고 다시 변경하기 전에로드 및 실행 될 때까지 기다리십시오.
3. JavaScript 코드의로드 지연
위의 주요 단계는 JavaScript 코드로드를 지연시키는 것입니다. 구현하는 방법? 먼저 유형을 사용자 정의 속성 "유형/캐시"로 설정하는 것과 같은 스크립트 유형 속성을 다시 작성하려고 시도하지만, 이러한 방식으로 대부분의 브라우저 (Chrome은 다운로드하지 않음)는 여전히이 코드를 다운로드하지만 실행되지는 않습니다. 페이지 렌더링 중에 이러한 코드를 다운로드하면 여전히 차단됩니다. 스크립트 유형을 다시 작성하면 실제 지연로드를 달성 할 수 없습니다. 최대로로드 할 수는 있지만 실행할 수는 없으며 호환성 문제가 있습니다.
스크립트 태그를 TextRea 태그에 넣고로드해야 할 때 TextArea 컨텐츠를 읽으십시오. 이런 식으로 스크립트의 실제 지연로드를 알 수 있습니다. 이 방법은 Yu Bo의 Bigrender (벽 외부) 솔루션 덕분입니다.
코드 사본은 다음과 같습니다.
<div>
<TextArea Style = "display : none">
<script type = "text/javaScript"src = "http://gg.5173.com/adpolestar/5173/
; AP = 2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC; CT = JS; PU = 5173;/? "> </script>
</textarea>
</div>
스크립트로드를 지연시키고 Document.Write를 다시 작성하십시오. 다음은 코드 구현입니다.
코드 사본은 다음과 같습니다.
/**
* Blocking Loading 스크립트를 구현하려면 write.write.write.write.write
* @param {dom object} textArea 요소
*/
var loadscript = function (elem) {
var url = elem.value.match (/src = "([/s/s]*?)"/i) [1],
부모 = elem.parentNode,
// CACHE 기본 Document.Write
docwrite = document.write,
//로드 할 새 스크립트를 만듭니다
script = document.createelement ( 'script'),
head = document.head ||
document.getElementsByTagName ( 'head') [0] ||
Document.documentElement;
// 문서를 다시 작성하십시오
document.write = function (text) {
parent.innerhtml = 텍스트;
};
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 === '오류'
) {
// 기본 문서를 복원합니다
document.write = docwrite;
head.removechild (스크립트);
// 이벤트를 제거하고 DOM 참조를 분리하십시오
// 메모리 누출을 피하려고합니다
머리 =
부모 =
elem =
스크립트 =
script.onerror =
script.onload =
script.onreadyStateChange = null;
}
}
// 스크립트로드
head.insertbefore (Script, Head.FirstChild);
};
4. 사진 지연 로딩의 향상된 버전
JavaScript AD 코드의 차단되지 않은 게으른로드를 구현하여 더욱 최적화 할 수 있습니까? 광고가 첫 번째 화면에 나타나지 않으면 이미지의 일반적인 지연로드와 같이로드를 지연시키는 데 사용될 수 있습니까? 대답은 예입니다. 이전에 쓴 이미지의 게으른로드 플러그인을 확장하고 원래 이미지로드 메소드 (SRC)를 위의로드 스크립트 방법으로 변경하여 달성했습니다. 물론 그러한 수정만으로도 여전히 문제가 될 것입니다. 여러 그림이 있고로드 스크립트가 동시에 수행되는 경우 문서를 전역 메소드 인 경우 A를로드 할 때 B에 영향을 미치지 않도록 보장되지 않습니다.
V. 대기열 제어
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.vevb.com/article/50685.htm을 참조하십시오.