Le chargement JavaScript sans blocage a un grand effet sur l'optimisation des performances de la page, ce qui peut réduire efficacement le blocage de la charge de page par JS. Surtout pour certains fichiers JS publicitaires, car le contenu publicitaire peut être des médias riches, il deviendra probablement un goulot d'étranglement pour votre vitesse de chargement de page. JavaScript haute performance nous dit, camarades de classe, pour améliorer la vitesse de votre page Web, charger JS sans blocage.
Donc un code apparaît.
(function () {var s = document.createElement ('script'); s.type = 'text / javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js' ;var x = document.getElementsbytagname (' script ');Tout le monde connaît ce qui précède. Les étudiants qui ont lu le livre connaissent les avantages d'une telle charge non bloquante, et l'effet est assez bon. Lorsque de tels scripts non bloquants rencontrent des publicités générales JS, elles écriront des problèmes - le code d'annonce apparaît dans HTML mais l'annonce n'affiche pas l'annonce.
Nani? HTML n'est pas rendu à la page?
Jetons un coup d'œil au code AD JS
La copie de code est la suivante:
document.write ('<img src = "http://img.vevb.com/logo_small.gif">');
Le code est assez simple, il suffit de produire du code HTML dans un document.Write (je crois que de nombreuses publicités des annonceurs sont comme ça). Quel est le problème avec la page qui ne montre pas de publicités? Le problème réside dans ce document.write. Pourquoi? Examinons d'abord la définition de document.write.
Définition et utilisation
La méthode écrite () peut écrire des expressions HTML ou du code JavaScript dans le document.
Plusieurs paramètres (EXP1, Exp2, Exp3, ...) peuvent être répertoriés et ils seront annexés au document dans l'ordre.
méthode:
L'un consiste à utiliser cette partie pour produire HTML dans le document, et l'autre consiste à générer de nouveaux documents sous Windows et Frameworks à l'extérieur des fenêtres où la méthode est appelée. Dans le deuxième cas, assurez-vous d'utiliser la méthode Close () pour fermer le document.
Mais son principe doit être exécuté pendant le processus d'entrée de flux de page. Une fois la page chargée, document.write () est appelé à nouveau, et document.open () sera appelé implicitement pour effacer le document actuel et démarrer un nouveau document. C'est-à-dire que si nous utilisons Document.Write après le chargement HTML, nous éliminerons le HTML généré précédent et afficherons la sortie de contenu de Document.Write.
Dans notre exemple, une fois la page chargée, le document.Write est sorti en HTML et ne sera pas exécuté. Je connais le problème et le principe, alors comment résoudre ce problème?
Utilise de manière asynchrone Ajax, avec différentes lignes. De nombreux fichiers publicitaires sont tiers. Sous différents noms de domaine, il y a des problèmes de domaine croisé et nous ne pouvons pas contrôler la sortie de leur code. Dans ce cas, nous avons pensé à un moyen de réécrire Document.Write, puis de réécrire Document.Write, une fois le fichier JS chargé. Regardez le code.
La première version charge les annonces JS sans blocage:
Function LoadAdScript (URL, conteneur, rappel) {this.dw = document.write; this.url = url; this.ContainerObj = (typeof conteneur == 'String'? document.getElementById (conteneur): conteneur); this.callback = rappel || fonction(){}; } LoadAdScript.prototype = {startload: function () {var script = document.createElement ('script'), _This = this; if (script.readystate) {// ie script.onreadystatechange = function () {if (script.readystate == "chargé" || script.readystate == "complet") {script.onreadystatechange = null; _Te.Finished (); }}; } else {// autre 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); }, fini: function () {document.write = this.dw; this.callback.apply (); }};Code d'appel de page:
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 chargescript = new LoadAdScript ('ad3.js', 'msat-adwrap', function () {console.log ('MSAT-ADWRAP2');}); Loadscript.StartLoad (); var chargescript = new LoadAdScript ('ad3.js', 'msat-adwrap', function () {console.log ('MSAT-ADWRAP3');}); Loadscript.StartLoad ();Code JS publicitaire
//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"> ');Le problème avec la première version est que lorsque plusieurs fichiers sont appelés, certains problèmes surviendront:
1. En raison de la vitesse différente de chargement de fichiers, certains peuvent être chargés en premier et certains peuvent être chargés plus tard, ce qui n'est pas ordonné, et plusieurs fois ce dont nous avons besoin est ordonné. Par exemple, nous devons d'abord charger l'annonce sur le premier écran.
2. Si vous voulez des publicités, vous devez définir certains paramètres avant de définir, comme Google Adsense
Afin de résoudre ces deux problèmes, il est encore modifié à la version JS finale non bloquante.
Code de page HTML:
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8" /> <itle> new_file </ title> <script type = "text / javascript" src = "loadscript.js"> </ script> </ head> <body> <div id = "msat-adwrap"> </ script> "MSAT-ADWRAP2"> </ div> <Script Type = "Text / JavaScript"> Loadscript.Add ({url: 'ad.js', conteneur: 'MSAT-ADWRAP', Callback: function () {console.log ('MSAT-ADRAP');}}). rappel: function () {console.log ('msat-adwrap2');}}). Add ({// google adsense "Ca-Pub-2152294856721899"; }). EXECUTE (); </cript> </ body> </html>Code source Loadscript.js
/ ** * ADS non bloquants * @author arain.yu * / var loadScript = (function () {var adqueue = [], dw = document.write; // cache js '' propre document.write function loadAdScript (url, contener, init, callback) {this.url = url; this.contineroBj = (typeof contener == '' string '? conteneur); script.onreadystateChange = fonction () {si Document.Write Document.Write = Fonction (AD) {var html = _This.ContainerObj.innerhtml; document.getElementsByTagName ('Head') [0] .APPEndChild (script); }, fini: function () {// restaurer 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.connainer, adobj.init, adobj.callback)); retourner ceci; }, exécuter: function () {if (adqueue.length> 0) {adqueue [0] .startLoad (); }}}};} ());