1. Werbecodeanalyse
Viele Werbesysteme von Drittanbietern verwenden Dokument. Schreiben Sie zum Laden von Werbung, z. B. den folgenden JavaScript-Werbeverbindungslink.
Die Codekopie lautet wie folgt:
<script type = "text/javaScript" src = "http://gg.5173.com/adpolestar/5173/
; ap = 2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc; ct = js; pu = 5173;/? "> </script>
Diese JavaScript -Anfrage gibt ein solches Stück Code zurück:
Die Codekopie lautet wie folgt:
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://html.5173cdn.com/market/yunyinga/xly132.gif '" +
"border = '0' /> </a>");
Diese Art der Lademethode, die ein bisschen 2 erscheint, aber Sie können sie nicht ändern, weil es ein Dritter ist. Darüber hinaus hat der Code die Statistikfunktion hinzugefügt. Der obige JavaScript -AD -Link wird einmal jedes Mal gezählt, wenn er angefordert wird. Der generierte Code hat auch die Funktion von Click -Statistiken, was bedeutet, dass er auf diese Weise geladen werden muss.
document.write wird während der Seitenwiedergabe synchronisiert. Sie müssen warten, bis der JavaScript -Code heruntergeladen und dokumentiert wird. Write wird ausgeführt, bevor der folgende Inhalt rendert. Wenn es viele Anzeigen gibt, wird die Seite blockiert, insbesondere wenn mehrere Anzeigen mit größeren Bildgrößen auf dem ersten Bildschirm der Seite eingefügt werden. Die Blockierungssituation wird ziemlich offensichtlich und ernst sein, wodurch die Benutzer das Gefühl haben, dass Ihre Webseite sehr langsam ist.
2. Schreiben Sie das Dokument um. Schreiben Sie
Um eine Blockierung zu vermeiden, kann das Dokument. Schreibmethode kann während der Seitenrenderung nicht ausgeführt werden. Sie müssen einen Weg finden, um den JavaScript -Anzeigencode auszuführen, nachdem der DOM -Baum fertig ist. Nachdem der DOM-Baum bereit ist, wird die gesamte Seite erneut gerendert, was nicht möglich ist. Obwohl document.write eine native Browser -Methode ist, können Sie auch eine Methode anpassen, um die ursprüngliche Methode zu überschreiben. Bevor der JavaScript -Anzeigencode geladen wird, schreiben Sie document.write, warten Sie, bis er geladen und ausgeführt wird, bevor Sie es zurückwechseln.
3.. Verzögerung des Ladens des JavaScript -Code
Der obige Schlüsselschritt besteht darin, den Laden des JavaScript -Codes zu verzögern. Wie implementiere ich es? Versuchen Sie zunächst, das Typ -Attribut des Skripts umzuschreiben, z. B. das Einstellen des Typs in eine benutzerdefinierte Eigenschaft "Typ/Cache", aber auf diese Weise laden die meisten Browser (Chrome nicht herunterladen) diesen Code immer noch herunter, führt ihn jedoch nicht aus. Das Herunterladen eines solchen Codes während des Seitenrenders wird noch blockiert. Das Umschreiben der Art des Skripts kann nicht ein echtes verzögertes Laden erreichen. Es kann höchstens nur geladen, aber nicht ausgeführt werden, und es gibt Kompatibilitätsprobleme.
Legen Sie das Skript -Tag in das Textbereich -Tag und lesen Sie den Inhalt des Textbereichs, wenn es geladen werden muss. Auf diese Weise können Sie die wirkliche Verzögerung des Skriptladens erkennen. Diese Methode ist der Bigrender -Lösung von Yu Bo (außerhalb der Wand) zu verdanken.
Die Codekopie lautet wie folgt:
<div>
<textarea style = "display: keine">
<script type = "text/javaScript" src = "http://gg.5173.com/adpolestar/5173/
; ap = 2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc; ct = js; pu = 5173;/? "> </script>
</textArea>
</div>
Verzögern Sie das Laden von Skript und schreiben Sie das Dokument um. Schreiben Sie. Das Folgende ist die Code -Implementierung:
Die Codekopie lautet wie folgt:
/**
* Schreiben Sie das document.write um, um das nicht blockierende Ladeskript zu implementieren
* @param {Dom -Objekt} TextArea -Element
*/
var loadscript = function (elem) {
var url = elem.value.match (/src = "([/s]*?)"/i) [1],
Eltern = Elem.Parentnode,
// natives document.write cache
docwrite = document.write,
// Erstellen Sie ein neues Skript zum Laden
script = document.createelement ('script'),
head = document.head ||
document.getElementsByTagName ('Kopf') [0] ||
document.documentElement;
// Dokument umschreiben. Write
document.write = function (text) {
parent.innerhtml = text;
};
script.type = 'text/javaScript';
script.src = url;
script.onError =
script.onload =
script.onReadyStatechange = Funktion (e) {
e = e || Fenster.Event;
if (! script.readystate ||
/LOADED|COMPLETE/.test(script.ReadyState) ||
e === 'Fehler'
) {
// Native document.write wiederherstellen
document.write = docwrite;
head.removechild (script);
// Ereignisse deinstallieren und DOM -Referenzen trennen
// Versuchen Sie, Speicherlecks zu vermeiden
Kopf =
Elternteil =
elem =
Skript =
script.onError =
script.onload =
script.onReadyStatechange = null;
}
}
// Skript laden
head.insertbefore (script, head.Firstchild);
};
4. Verbesserte Version des Bildverzögerungsladens
Kann es weiter optimiert werden, indem ein nicht blockiertes faules Laden des JavaScript -Anzeigencodes implementiert wird? Wenn die Anzeige nicht auf dem ersten Bildschirm angezeigt wird, kann sie dann verwendet werden, um die Last wie die übliche Verzögerung des Ladens von Bildern zu verzögern? Die Antwort lautet ja. Ich habe das faule Lade-Plug-In für das zuvor geschriebene Bild erweitert und die Original-Bildlastmethode (SRC ersetzen) in die obige Loadscript-Methode geändert, um dies zu erreichen. Natürlich werden solche Modifikationen immer noch problematisch sein. Wenn mehrere Bilder vorhanden sind und dass ein Ladekript gleichzeitig durchgeführt wird, und das Dokument.Write ist eine globale Methode, es wird nicht garantiert, dass B beim Laden A nicht beeinflusst wird. Sie müssen nacheinander geladen werden, damit B erst nach dem Laden A geladen werden kann. A. A.
V. Warteschlangenkontrolle
Damit JavaScript -AD -Codes in der Reihenfolge geladen werden können, ist eine Warteschlange erforderlich, um das Laden zu steuern. Der folgende einfache Warteschlangenkontrollcode ist also ebenfalls verfügbar:
Die Codekopie lautet wie folgt:
var loadQueue = [];
// Treten Sie der Liste bei
var queue = function (data) {
loadQueue.push (Daten);
if (loadQueue [0]! == 'runing') {
dequeue ();
}
};
// Delist
var dequeue = function () {
var fn = loadQueue.shift ();
if (fn === 'runing') {
fn = loadQueue.shift ();
}
if (fn) {
lastqueue.unshift ('runing');
fn ();
}
};
Weitere Informationen finden Sie im Vergleichsartikel für Bildverzögerungsloader: http://www.vevb.com/article/50685.htm