La carga de JavaScript sin bloquear tiene un gran efecto en la optimización del rendimiento de la página, lo que puede reducir efectivamente el bloqueo de la carga de la página por JS. Especialmente para algunos archivos JS publicitarios, dado que el contenido publicitario puede ser un medio rico, es probable que se convierta en un cuello de botella para la velocidad de carga de su página. JavaScript de alto rendimiento nos dice a los compañeros de clase, que mejore la velocidad de su página web, cargue JS sin bloquear.
Entonces aparece un código.
(function () {var s = document.createElement ('script'); s.type = 'text/javaScript'; s.async = true; s.src = 'http://yourdomain.com/script.js'var x = document.getElementsByTagNameName (' script ') [0]; x.parentnode.insertbe fore (s, x, x);Todos están familiarizados con lo anterior. Los estudiantes que han leído el libro conocen los beneficios de dicha carga sin bloqueo, y el efecto es bastante bueno. Cuando tales scripts sin bloqueo se encuentran con anuncios JS General, escribirán problemas: el código de anuncios aparece en HTML pero el anuncio no muestra el anuncio.
¿Nani? ¿HTML no se presenta a la página?
Echemos un vistazo al código AD JS
La copia del código es la siguiente:
document.write ('<img src = "http://img.vevb.com/logo_small.gif">');
El código es bastante simple, solo emite el código HTML en un documento. Write (creo que los anuncios de muchos anunciantes son así). ¿Cuál es el problema con la página que no muestra anuncios? El problema radica en este documento.write. ¿Por qué? Primero veamos la definición de document.write.
Definición y uso
El método Write () puede escribir expresiones HTML o código JavaScript en el documento.
Se pueden enumerar múltiples parámetros (exp1, exp2, exp3, ...) y se agregarán al documento en orden.
método:
Una es usar esta parte para emitir HTML en el documento, y el otro es generar nuevos documentos en Windows y marcos fuera de las ventanas donde se llama al método. En el segundo caso, asegúrese de usar el método Close () para cerrar el documento.
Pero su principio debe ejecutarse durante el proceso de entrada de flujo de página. Una vez que se carga la página, document.write () se llama nuevamente, y document.open () se llamará implícitamente para borrar el documento actual e iniciar un nuevo documento. Es decir, si usamos document.write después de cargar HTML, eliminaremos el HTML generado anterior y mostraremos la salida de contenido de Document.write.
En nuestro ejemplo, después de cargar la página, el documento.write se emite en HTML y no se ejecutará. Conozco el problema y el principio, entonces, ¿cómo resolver este problema?
Utiliza asíncrono AJAX, con diferentes líneas. Muchos archivos publicitarios son de terceros. Bajo diferentes nombres de dominio, hay problemas de dominio cruzado, y no podemos controlar la salida de su código. En este caso, pensamos en una forma de reescribir document.write y luego reescribir document.write Back después de cargar el archivo JS. Mira el código.
La primera versión carga los anuncios JS sin bloquear:
función loadAdscript (url, contenedor, devolución de llamada) {this.dw = document.write; this.url = url; this.ContainerObj = (typeof Container == 'String'? Document.getElementById (Container): Container); this.callback = Callback || función(){}; } Loadadscript.prototype = {startLoad: function () {var script = document.createElement ('script'), _this = this; if (script.readyState) {// ie script.onreadyStateChange = function () {if (script.readyState == "cargado" || script.readyState == "completo") {script.onreadyStateChange = null; _THIS.FINED (); }}; } else {// otro 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); }, terminado: function () {document.write = this.dw; this.callback.apply (); }};Código de llamada de la página:
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-adrap3');}); loadScript.StartLoad ();Código de publicidad 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"> ');El problema con la primera versión es que cuando se llaman múltiples archivos, surgirán algunos problemas:
1. Debido a la diferente velocidad de carga de archivos, algunos se pueden cargar primero y otros se pueden cargar más tarde, lo cual está desordenado, y muchas veces lo que necesitamos es ordenado. Por ejemplo, primero debemos cargar el anuncio en la primera pantalla.
2. Si desea algunos anuncios, debe establecer algunos parámetros antes de configurar, como Google Adsense
Para resolver estos dos problemas, se modifica aún más a la versión JS sin bloqueo final.
Código de página HTML:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"/> <title> new_file </title> <script type = "text/javascript" src = "LoadScript.js"> </script> </head> <body> <Div Id = "msat -adwrap"> </div> "msat-adwrap2"> </div> <script type = "text/javaScript"> loadScript.Add ({url: 'ad.js', contenedor: 'msat-adwrap', call Callback: function () {console.log ('msat-adrap');}}). add ({{url: 'ad2.js', contenedor: '' msatwrap ', msat2', msat. Callback: function () {console.log ('msat-adwrap2'); "CA-PUB-2152294856721899"; }). Execute (); </script> </body> </html>Código fuente de loadscript.js
/*** anuncios sin bloqueo* @author arain.yu*/var loadScript = (function () {var adqueue = [], dw = document.write; // caché js 'document.write function loadAdscript (url, contenedor, inicio, callback) {this.url = url; this.containerObj = (typeef contenedor == string'? : container); this.init = init || function() { }; this.callback = callback || function() { }; } LoadADScript.prototype = { startLoad : function() { var script = document.createElement('script'), _this = this; _this.init.apply(); if(script.readyState) {//IE script.onreadystatechange = function () {if (script.readyState == "Cargado" || var html = _this.containerobj.innerhtml; }, terminado: function () {// restaurar documento.write document.write = this.dw; }, startNext: function () {adqueue.hift (); 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)); devolver esto; }, ejecutar: function () {if (adqueue.length> 0) {adqueue [0] .StartLoad (); }}}};} ());