차단없이 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.getEmentsByTagName ( 'script') [x.parentnode.insertbe (s, x));모두 위의 사항에 익숙합니다. 이 책을 읽은 학생들은 그러한 비 블로킹 하중의 이점을 알고 있으며 그 효과는 상당히 좋습니다. 이러한 비 블로킹 스크립트가 일반 JS 광고에 직면하면 문제가 발생합니다. 광고 코드는 HTML에 표시되지만 광고는 광고를 표시하지 않습니다.
나니? HTML이 페이지에 렌더링되지 않습니까?
AD JS 코드를 살펴 보겠습니다
코드 사본은 다음과 같습니다.
document.write ( '<img src = "http://img.vevb.com/logo_small.gif">');
이 코드는 매우 간단하고 문서에서 HTML 코드를 출력합니다 (많은 광고주의 광고는 이와 같다고 생각합니다). 페이지가 광고를 표시하지 않는 문제는 무엇입니까? 문제는이 문서에 있습니다 .write. 왜? 먼저 document.write의 정의를 살펴 보겠습니다.
정의 및 사용법
Write () 메소드는 HTML 표현식 또는 JavaScript 코드를 문서에 쓸 수 있습니다.
다중 매개 변수 (Exp1, exp2, exp3, ...)를 나열 할 수 있으며 순서대로 문서에 추가됩니다.
방법:
하나는이 당사자를 사용하여 문서에서 HTML을 출력하고 다른 하나는 메소드가 호출되는 Windows 외부의 Windows 및 프레임 워크에서 새 문서를 생성하는 것입니다. 두 번째 경우 Close () 메소드를 사용하여 문서를 닫으십시오.
그러나 그 원칙은 페이지 흐름 입력 프로세스 중에 실행되는 것입니다. 페이지가로드되면 Document.Write ()가 다시 호출되고 Document.Open ()은 암시 적으로 호출되어 현재 문서를 지우고 새 문서를 시작합니다. 즉, HTML이로드 된 후 Document.Write를 사용하면 이전에 생성 된 HTML을 제거하고 Document.Write에서 컨텐츠 출력을 표시합니다.
이 예에서는 페이지가로드 된 후 html에서 출력이 있으며 실행되지 않습니다. 문제와 원칙을 알고 있습니다. 그래서이 문제를 해결하는 방법은 무엇입니까?
비동기 적으로 다른 선으로 ajax를 사용합니다. 많은 광고 파일은 타사입니다. 다른 도메인 이름에는 크로스 도메인 문제가 있으며 코드의 출력을 제어 할 수 없습니다. 이 경우 Document.write를 다시 작성한 다음 JS 파일이로드 된 후 다시 문서를 다시 작성하는 방법을 생각했습니다. 코드를보십시오.
첫 번째 버전은 차단하지 않고 JS 광고를로드합니다.
함수 loadAdScript (url, 컨테이너, 콜백) {this.dw = document.write; this.url = url; this.containerObj = (컨테이너 타입 == 'string'? document.getElementById (컨테이너); 컨테이너); this.callback = 콜백 || 기능(){}; } loadAdScript.prototype = {startload : function () {var script = document.createElement ( 'script'), _this = this; if (script.readystate) {// script.onreadyStateChange = function () {if (script.readystate = "|| script.readystate =="complete ") {script.onreadyStateChange = null; _this.finished (); }}; } else {// 기타 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 (스크립트); }, 완성 : 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-adwrap2');}); loadscript.startload (); var loadscript = new loadAdScript ( 'ad3.js', 'msat-adwrap', function () {console.log ( 'msat-adwrap3');}); loadscript.startload ();광고 JS 코드
//ad.jsdocument.write('<Img src = "http://images.cnblogs.com/logo_small.gif"> '); // ad2.jsdocument.write ('<img src = http://www.baidu.com/img/baidu_sylogo1.gif " usemap = "#mp"> '); // ad3.jsdocument.write ('<img id = "hplogo"src = "http://www.google.com/images/srpr/logo3w.png");첫 번째 버전의 문제점은 여러 파일이 호출되면 일부 문제가 발생한다는 것입니다.
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.j"> </script> </head> <body <div id = "msat-adwrap"> "msat-adwrap2"> </div> <script type = "text/javaScript"> loadscript.add ({url : 'ad.js', 컨테이너 : 'msat-adwrap', callback : function () {console.log ( 'msat-adwrap');}}). Callback : function () {console.log ( 'msat-adwrap2'); add ({// Google Adsense URL : 'http : //pagead2.googlesyndication.com/pagead/show_ad' "CA-PUB-215294856721899"; }). execute (); </script> </body> </html>loadscript.js 소스 코드
/*** 비 블로킹 ADS* @Author arain.yu*/var loadscript = (function () {var adqueue = [], dw = document.write; // cache js의 oxport.write loadAdscript (url, 컨테이너, init, 콜백) {this.url = url; this.containerobj == 'string.' : init = init |}; Script.OntReadeChange () {Script.Pleaded "|| script document.write = function (ad) {var html = _this.containerobj.innerhtml; document.getElementsByTagName ( 'head') [0] .AppendChild (스크립트); }, 완성 : function () {// locument.write.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)); 이것을 반환하십시오; }, execute : function () {if (adqueue.length> 0) {adqueue [0] .startload (); }}}};} ());