1. Analyse du code publicitaire
De nombreux systèmes de publicité tiers utilisent un document.Write pour charger des publicités, telles que le lien publicitaire JavaScript suivant.
La copie de code est la suivante:
<script type = "text / javascript" src = "http://gg.5173.com/adpolestar/5173/
; ap = 2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc; ct = js; pu = 5173; /? "> </ script>
Cette demande JavaScript renvoie un morceau de code comme celui-ci:
La copie de code est la suivante:
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: //www.7bao.com/g/xlsbz/index 'cible =' _ Blank '> <img src ='" +
"http://html.5173cdn.com/market/yunyinga/xly132.gif '" +
"border = '0' /> </a>");
Ce type de méthode de chargement qui semble un peu 2, mais vous ne pouvez pas le modifier car c'est un tiers. De plus, le code a ajouté une fonction statistique. Le lien AD JavaScript ci-dessus sera compté une fois à chaque fois qu'il sera demandé. Le code généré a également la fonction des statistiques de clic, ce qui signifie qu'elle doit être chargée de cette manière.
Document.Write est synchronisé lors du rendu de la page. Vous devez attendre que le code JavaScript soit téléchargé et document.Write est exécuté avant de rendre le contenu suivant. S'il existe de nombreuses publicités, cela entraînera le blocage de la page, surtout si plusieurs publicités avec des tailles d'image plus grandes sont insérées sur le premier écran de la page. La situation de blocage sera assez évidente et sérieuse, ce qui obligera les utilisateurs à sentir que votre page Web est très lente.
2. Réécrivez le document.Write
Afin d'éviter le blocage, la méthode Document.Write ne peut pas être exécutée lors du rendu de la page. Vous devez trouver un moyen de faire en sorte que le code d'annonce JavaScript s'exécute après que l'arborescence DOM est prête. Cependant, une fois l'arbre DOM Prêt, la page entière sera renvoyée, ce qui n'est pas possible. Bien que Document.Write soit une méthode native du navigateur, vous pouvez également personnaliser une méthode pour écraser la méthode d'origine. Avant que le code publicitaire JavaScript ne soit chargé, réécrivez Document.Write, attendez qu'il soit chargé et exécuté avant de le changer.
3. Retard Chargement du code JavaScript
L'étape de clé ci-dessus consiste à retarder le chargement du code JavaScript. Comment l'implémenter? Essayez d'abord de réécrire l'attribut de type de script, tel que la définition du type dans une propriété personnalisée "type / cache", mais de cette manière, la plupart des navigateurs (Chrome ne téléchargeront pas) téléchargeront toujours ce code, mais ne l'exécutera pas. Le téléchargement d'un tel morceau de code pendant le rendu de la page bloquera toujours. La réécriture du type de script ne peut pas réaliser un chargement réel retardé. Tout au plus, il ne peut que charger mais ne pas s'exécuter, et il y a des problèmes de compatibilité.
Mettez la balise de script dans la balise TextArea et lisez le contenu TextArea lorsqu'il doit être chargé. De cette façon, vous pouvez réaliser le véritable chargement de retard du script. Cette méthode est grâce à la solution Bigrender (en dehors du mur) de Yu Bo.
La copie de code est la suivante:
<div>
<TextArea Style = "Affichage: aucun">
<script type = "text / javascript" src = "http://gg.5173.com/adpolestar/5173/
; ap = 2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc; ct = js; pu = 5173; /? "> </ script>
</ textarea>
</div>
Retarder le script de chargement et réécrire Document.Write. Ce qui suit est l'implémentation du code:
La copie de code est la suivante:
/ **
* Réécrivez Document.Write pour implémenter le script de chargement non bloquant
* @param {objet Dom}
* /
var chargescript = fonction (elem) {
var url = elem.value.match (/ src = "([/ s / s] *?)" / i) [1],
parent = elem.parentNode,
// cache natif document.write
docwrite = document.write,
// Créer un nouveau script à charger
script = document.createElement ('script'),
head = document.head ||
document.getElementsByTagName ('Head') [0] ||
document.DocumentElement;
// réécriture du document.write
document.write = fonction (texte) {
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 === 'Erreur'
) {
// restaurer le document natif.Write
document.write = docwrite;
head.removechild (script);
// désinstaller les événements et déconnecter les références DOM
// Essayez d'éviter les fuites de mémoire
tête =
parent =
elem =
script =
script.onerror =
script.onload =
script.onreadystateChange = null;
}
}
// Chargez le script
head.insertbefore (script, head.firstchild);
};
4. Version améliorée du chargement de retard d'image
Peut-il être encore optimisé en implémentant le chargement paresseux non bloqué du code publicitaire JavaScript? Si l'annonce n'apparaît pas sur le premier écran, peut-il être utilisé pour retarder la charge comme le chargement de retard habituel des images? La réponse est oui. J'ai élargi le plug-in de chargement paresseux pour l'image que j'ai écrite auparavant, et j'ai modifié la méthode de chargement d'image d'origine (remplacer SRC) à la méthode de chargement ci-dessus pour l'y parvenir. Bien sûr, de telles modifications seront toujours problématiques. S'il y a plusieurs images et que le chargement est effectué simultanément, et Document.Write est une méthode globale, il n'est pas garanti de ne pas affecter B lors du chargement A. ils doivent être chargés un par un, de sorte que B ne peut être chargé qu'après le chargement A.
V. Contrôle de la file d'attente
Pour que les codes AD JavaScript se chargent dans l'ordre, une file d'attente est nécessaire pour contrôler le chargement. Le code de contrôle de file d'attente simple suivant est donc également disponible:
La copie de code est la suivante:
var loadQueue = [];
// rejoigne la liste
var queue = fonction (data) {
loadQueue.push (données);
if (loadQueue [0]! == 'Runing') {
Dequeue ();
}
};
// Déliste
var dequeue = function () {
var fn = loadQueue.shift ();
if (fn === 'Runing') {
fn = loadQueue.shift ();
}
if (fn) {
loadQueue.unshift («Runing»);
fn ();
}
};
Veuillez vous référer à l'article de comparaison pour le chargeur de retard d'image: http://www.vevb.com/article/50685.htm