1. Análisis de código publicitario
Muchos sistemas de publicidad de terceros usan documentos. Escribe para cargar anuncios, como el siguiente enlace de publicidad de JavaScript.
La copia del código es la siguiente:
<script type = "text/javaScript" src = "http://gg.5173.com/adpolestar/5173/
; ap = 2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc; ct = js; pu = 5173;/? "> </script>
Esta solicitud de JavaScript devuelve un código como este:
La copia del código es la siguiente:
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/yuninya/xly132.gif '" +
"border = '0' /> </a>");
Este tipo de método de carga que parece un poco 2, pero no puede modificarlo porque es un tercero. Además, el código ha agregado la función estadística. El enlace de anuncio JavaScript anterior se contará una vez cada vez que se solicite. El código generado también tiene la función de las estadísticas de clic, lo que significa que debe cargarse de esta manera.
Document.Write se sincroniza durante la representación de la página. Debe esperar hasta que se descargue el código JavaScript y el documento. Write se ejecuta antes de realizar el siguiente contenido. Si hay muchos anuncios, hará que la página se bloquee, especialmente si se insertan varios anuncios con tamaños de imagen más grandes en la primera pantalla de la página. La situación de bloqueo será bastante obvia y grave, lo que hará que los usuarios consideren que su página web es muy lenta.
2. Reescribir documento. Escribe
Para evitar el bloqueo, el método Docum.Write no se puede ejecutar durante la representación de la página. Debe encontrar una manera de hacer que el código de anuncio JavaScript se ejecute después de que el árbol DOM esté listo. Sin embargo, después de que el árbol DOM esté listo, toda la página se volverá a renderizar, lo cual no es posible. Aunque document.write es un método nativo de navegador, también puede personalizar un método para sobrescribir el método original. Antes de cargar el código de anuncio JavaScript, reescribe documentos. Escribe, espere hasta que se cargue y ejecute antes de cambiarlo.
3. Retraso de carga del código JavaScript
El paso clave anterior es retrasar la carga del código JavaScript. ¿Cómo implementarlo? Primero intente reescribir el atributo de tipo de script, como configurar el tipo en una propiedad personalizada "Tipo/caché", pero de esta manera, la mayoría de los navegadores (Chrome no se descargarán) aún descargará este código, pero no lo ejecutará. La descarga de tal código durante la representación de la página aún se bloqueará. Reescribir el tipo de script no puede lograr una carga retrasada real. A lo sumo, solo puede cargarse pero no ejecutar, y hay problemas de compatibilidad.
Coloque la etiqueta de script en la etiqueta TextAREA y lea el contenido de TextAREA cuando sea necesario cargarlo. De esta manera, puede darse cuenta de la carga de script de retraso real. Este método es gracias a la solución Bigrender (fuera de la pared) de Yu Bo.
La copia del código es la siguiente:
<div>
<Textarea style = "Display: Ninguno">
<script type = "text/javaScript" src = "http://gg.5173.com/adpolestar/5173/
; ap = 2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc; ct = js; pu = 5173;/? "> </script>
</textarea>
</div>
Retrasar la carga de script y reescribir documento.write. La siguiente es la implementación del código:
La copia del código es la siguiente:
/**
* Reescribir documento.write para implementar un script de carga sin bloqueo
* @param {DOM Object} Elemento TextAREA
*/
var loadScript = function (elem) {
var url = elem.value.match (/src = "([/s/s]*?)"/i) [1],
parent = elem.parentnode,
// Cache Native Docum.Write
docwrite = document.write,
// Crear un nuevo script para cargar
script = document.createElement ('script'),
head = document.head ||
document.getElementsBytagName ('Head') [0] ||
document.documentelement;
// reescribe documento.write
document.write = function (text) {
parent.innerhtml = text;
};
script.type = 'text/javaScript';
script.src = url;
script.onerror =
script.onload =
script.onreadyStateChange = function (e) {
E = E || Window.event;
if (! script.readyState ||
/Loaded|Complete/.test(Script.readyState) ||
e === 'Error'
) {
// restaurar documento nativo.write
document.write = DocWrite;
head.removechild (script);
// desinstalar eventos y desconectar las referencias DOM
// Intenta evitar fugas de memoria
Cabeza =
Padre =
Elem =
script =
script.onerror =
script.onload =
script.onreadyStateChange = null;
}
}
// Cargar script
head.insertbefore (script, head.firstchild);
};
4. Versión mejorada de la carga del retraso de la imagen
¿Se puede optimizar aún más mediante la implementación de la carga perezosa desbloqueada del código de anuncios JavaScript? Si el anuncio no aparece en la primera pantalla, ¿se puede usar para retrasar la carga como la carga de imágenes de demora habitual? La respuesta es sí. Expandí el complemento de carga perezoso para la imagen que escribí antes y cambié el método de carga de imagen original (reemplazar SRC) al método de LoadScript anterior para lograrlo. Por supuesto, solo tales modificaciones seguirán siendo problemáticas. Si hay múltiples imágenes y LoadScript se realiza simultáneamente, y document.write es un método global, no se garantiza que no afecte a B al cargar A. Deben cargarse uno por uno, para que B solo se pueda cargar después de cargar A.
V. Control de la cola
Para que los códigos de anuncios de JavaScript se carguen en orden, se necesita una cola para controlar la carga. Entonces, el siguiente código de control de cola simple también está disponible:
La copia del código es la siguiente:
var Loadqueue = [];
// unirse a la lista
var queue = function (data) {
loadqueue.push (datos);
if (loadqueue [0]! == 'runing') {
dequeue ();
}
};
// Delist
var dequeue = function () {
var fn = loadqueue.shift ();
if (fn === 'runing') {
fn = loadqueue.shift ();
}
if (fn) {
loadqueue.unshift ('runing');
fn ();
}
};
Consulte el artículo de comparación para el cargador de retraso de la imagen: http://www.vevb.com/article/50685.htm