Das Laden von JavaScript ohne Blockierung hat einen hervorragenden Einfluss auf die Seitenleistungoptimierung, die die Blockierung der Seitenlast durch JS effektiv verringern kann. Insbesondere für einige Werbe -JS -Dateien ist es wahrscheinlich, dass der Werbeinhalt reichhaltige Medien sein können, wahrscheinlich ein Engpass für Ihre Seite Ladegeschwindigkeit. Hochleistungs-JavaScript sagt uns, Klassenkameraden, um Ihre Webseitengeschwindigkeit zu verbessern, JS ohne zu blockieren.
Also erscheint ein Code.
(function () {var s = document.createelement ('script'); S.Type = 'text/javaScript';Jeder ist mit dem oben genannten vertraut. Schüler, die das Buch gelesen haben, kennen die Vorteile einer solchen nicht blockierenden Belastung, und der Effekt ist ziemlich gut. Wenn solche nicht blockierenden Skripte allgemeine JS -Anzeigen begegnen, schreiben sie Probleme - der Anzeigencode erscheint in HTML, aber die Anzeige zeigt die Anzeige nicht an.
Nani? HTML wird nicht auf die Seite gerendert?
Schauen wir uns den Anzeigen -JS -Code an
Die Codekopie lautet wie folgt:
document.write ('<img src = "http://img.vevb.com/logo_small.gif">');
Der Code ist recht einfach, geben Sie einfach den HTML -Code in einem Dokument aus (ich glaube, dass viele Werbetreibungswerbung so sind). Was ist das Problem mit der Seite, die keine Anzeigen zeigt? Das Problem liegt in diesem Dokument.Write. Warum? Schauen wir uns zunächst die Definition des Dokuments an.write.
Definition und Verwendung
Die Methode write () kann HTML -Ausdrücke oder JavaScript -Code in das Dokument schreiben.
Mehrere Parameter (Exp1, Exp2, Exp3, ...) können aufgeführt werden und werden in der Reihenfolge an das Dokument angehängt.
Verfahren:
Einer besteht darin, diese Partei zu verwenden, um HTML im Dokument auszugeben, und das andere soll neue Dokumente in Windows und Frameworks außerhalb der Fenster generieren, in denen die Methode aufgerufen wird. Verwenden Sie im zweiten Fall die Methode Close (), um das Dokument zu schließen.
Sein Prinzip ist jedoch während des Seitenflusseingangsprozesses ausgeführt. Sobald die Seite geladen ist, wird document.write () erneut aufgerufen und document.open () wird implizit aufgerufen, um das aktuelle Dokument zu löschen und ein neues Dokument zu starten. Das heißt, wenn wir document.write nach dem geladenen HTML verwenden, werden wir die vorherige generierte HTML beseitigen und die Inhaltsausgabe von document.write anzeigen.
In unserem Beispiel wird nach dem Laden der Seite das Dokument in HTML ausgegeben und wird nicht ausgeführt. Ich kenne das Problem und das Prinzip. Wie kann ich dieses Problem lösen?
Asynchron verwendet Ajax mit unterschiedlichen Linien. Viele Werbedateien sind Dritter. Unter verschiedenen Domain-Namen gibt es Cross-Domänen-Probleme, und wir können die Ausgabe ihres Codes nicht kontrollieren. In diesem Fall haben wir uns über eine Möglichkeit nachgedacht, das Dokument umzuschreiben. Schreiben Sie das Dokument um und schreiben dann das Dokument um. Schreiben Sie zurück, nachdem die JS -Datei geladen wurde. Schauen Sie sich den Code an.
Die erste Version lädt JS -Anzeigen, ohne zu blockieren:
Funktion LoadAdScript (URL, Container, Rückruf) {this.dw = document.write; this.url = url; this.containerObj = (Typof Container == 'String'? Document.GetElementById (Container): Container); this.callback = callback || Funktion(){}; } LoadAdScript.Prototype = {startload: function () {var script = document.createelement ('script'), _this = this; if (script.ReadyState) {// IE script.onreadyStatechange = function () {if (script.readystate == "geladen" || script.readystate == "complete") {script.onreadyStatechange = null; _this.finished (); }}; } else {// Andere 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); }, fertig: function () {document.write = this.dw; this.callback.apply (); }};Seitenaufrufcode:
var loadscript = new LoadScript ('ad.js', 'msat-adwrap', function () {console.log ('msat-adwrap');}); loLeScript.StartLoad (); var loadscript = new LoadScript ('ad2.js', 'msat-adwrap', function () {console.log ('msat-adwrap2');}); loLeScript.StartLoad (); var loadscript = new LoadScript ('ad3.js', 'msat-adwrap', function () {console.log ('msat-adwrap2');}); loLeScript.StartLoad (); var loadscript = new LoadScript ('ad3.js', 'msat-adwrap', function () {console.log ('msat-adwrap3');}); loLeScript.StartLoad ();Werbung JS -Code
//ad.jsdocument.write(''img src = "http://images.cnblogs.com/logo_small.gif"> '); // ad2.jsdocument.write (' <img Src = "http://www.baidu.com/img/baidu/baidu/baidu/baidu- Usemap = "#mp"> '); // ad3.jsdocument.write (' <img id = "hplogo" src = "http://www.google.com/images/srpr/logo3w.png"> ');Das Problem mit der ersten Version ist, dass, wenn mehrere Dateien aufgerufen werden, einige Probleme auftreten:
1. Aufgrund der unterschiedlichen Geschwindigkeit des Dateiladens können einige zuerst geladen werden und einige später geladen werden, was nicht ordnungsgemäß ist, und oft ist das, was wir brauchen, ordentlich. Zum Beispiel müssen wir zuerst die Anzeige auf dem ersten Bildschirm laden.
2. Wenn Sie einige Anzeigen wünschen, müssen Sie einige Parameter vor dem Einstellen festlegen, z. B. Google AdSense
Um diese beiden Probleme zu lösen, wird es weiter an die endgültige nicht blockierende JS-Version geändert.
HTML -Seitencode:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"/> <title> new_file </title> <script type = "text/javaScript" src = "loadscript.js"> </script> </head> <body> <body> <body> <div id = "msat-adwrap" "msat-adwrap2"> </div> <script type = "text/javaScript"> loadscript.add ({url: 'ad.js', Container: 'msat-adwrap', Rückruf: function () {console.log ('msat-adwrap';}). Callback: function () {console.log ('msat-adwrap2'); "CA-PUB-215229485672189"; }). execute (); </script> </body> </html>Loadscript.js Quellcode
/*** nicht blockierende ADs* @Author arain.yu*/var loadscript = (function () {var adQueue = [], dw = document. : container) this.init = init || script.onReadyStatechange = function () {if (script.readyState == "geladen" || script.readyState == "comples") {script.onReadyStatechange = null; document.write document.write = function (ad) {var html = _this.containerobj.innerhtml; document.getElementsByTagName ('head') [0] .AppendChild (script); }, fertig: 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)); gib dies zurück; }, execute: function () {if (adQueue.length> 0) {adQueue [0] .StARTLOAD (); }}}};} ());