Méthode de chargement non bloquant des publicités générées par les compétences document.write_javascript de js

1. Analyse du code publicitaire

De nombreux systèmes publicitaires tiers utilisent document.write pour charger des publicités, comme le lien publicitaire javascript suivant.

Copier le code Le code est le suivant :

Cette requête javascript renvoie un morceau de code comme celui-ci :

Copier le code Le code est le suivant :

document.write( ""border='0' width="132px" height="58px" />" );

Cela semble être un peu une méthode de chargement tierce, mais vous ne pouvez pas la modifier car elle est elle-même tierce. Et le code a ajouté une fonction de statistiques. Le lien publicitaire javascript ci-dessus sera compté à chaque fois qu'il est demandé. Le code généré a également la fonction de statistiques de clics, ce qui signifie qu'il doit être chargé de cette manière.

Document.write est exécuté de manière synchrone lorsque la page est rendue. Vous devez attendre que le code javascript soit téléchargé et que document.write soit exécuté avant de restituer le contenu suivant. S'il y a beaucoup de publicités, la page sera affichée. être bloqué, surtout si vous insérez plusieurs publicités avec des tailles d'image relativement grandes sur le premier écran de la page, la situation de blocage sera assez évidente et grave, ce qui fera penser aux utilisateurs que votre page Web est très lente.

2. Réécrire document.write

Afin d'éviter le blocage, la méthode document.write ne peut pas être exécutée lorsque la page est rendue. Vous devez trouver un moyen de faire exécuter le code publicitaire javascript une fois l'arborescence DOM prête (DOM prêt), mais exécuter le document. une fois l'arborescence DOM prête, l'écriture restituera la page entière, 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 remplacer la méthode d'origine. Avant que le code publicitaire JavaScript ne soit chargé, réécrivez document.write, puis modifiez-le à nouveau une fois chargé et exécuté.

3. Retarder le chargement du code javascript

L'étape la plus critique ci-dessus est le chargement paresseux du code javascript. Comment l'implémenter ? Essayez d'abord de réécrire l'attribut type du script, par exemple en définissant type sur un attribut personnalisé "type/cache", mais la plupart des navigateurs (Chrome ne le téléchargera pas) téléchargeront toujours ce code, mais ne l'exécuteront pas en téléchargeant un tel morceau de code. le code sera toujours bloqué lors du rendu de la page. Un véritable chargement retardé ne peut pas être obtenu en réécrivant le type de script, tout au plus, il ne peut être chargé que sans s'exécuter, et il existe toujours des problèmes de compatibilité.

Placez la balise script dans la balise textarea, puis lisez le contenu de la zone texte lorsqu'il doit être chargé. Cela peut permettre un véritable chargement retardé des scripts. Cette méthode est due à la solution BigRender (hors du mur) proposée par Yu. Bo.

Copier le code Le code est le suivant :

< textarea style= "display:none">

Chargement paresseux du script et réécriture de document.write Voici l'implémentation du code :

Copier le code Le code est le suivant :

/**
* Réécrivez document.write pour obtenir un script de chargement non bloquant
* @param { Dom Object } élément textarea
*/
var loadScript = function( elem ){
 var url = elem.value.match( /src="([sS]*?)"/ i )(1],
  parent = elem.parentNode,
  // 缓存原生的document.write
  docWrite = document.write, 
  // 创建一个新script来加载
  script = document.createElement( 'script' ),
  head = document.head ||
   document.getElementsByTagName( 'head' )(0] ||
   document.documentElement;

 // 重写document.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 === 'erreur'
  ){

   // 恢复原生的document.write
   document.write = docWrite;
   head.removeChild( script );

   //  / / 尽量避免内存泄漏
   head =    
   parent =
   elem =
   script =
   script.onerror =
   script.onload =
   script.onreadystatechange = ;

  }

 }

 // 加载script
 head.insertBefore( script, head.firstChild );
};

四、图片延迟加载的增强版

实现了无阻塞式的延迟加载javascript广告代码，能否进一步优化？如果广告没在首屏出现，能否像通常的图片的延迟加载一样来进行延迟加载？答案是肯定的。对我Le script de téléchargement de scripts et de scripts de téléchargement (src) est destiné aux utilisateurs de LoadScript.加载就可以实现。当然，仅仅是这样的修改还是会有问题的。如果有多个Il s'agit d'une version de LoadScript, d'une version document.write d'une version B, d'une version A.一个个的按顺序加载，加载完A之后才能加载B。

五、队列控制

为了让javascript广告代码按顺序加载就需要一个队列来控制加载。于是又有了下面这段简单的队列控制代码：

复制代码 代码如下 :

var loadQueue = [];
// 入列
var queue = function( data ){
 loadQueue.push ( data );
 if( loadQueue[0] !== 'runing' ){
  dequeue();
 }
};
// 出列 
var dequeue = function(){
 var fn = loadQueue.shift();
 if( fn === 'runing' ){
  fn = loadQueue.shift();
 }

 if( fn ){
  loadQueue.unshift( 'runing' );
  fn();
 }
};

图片延迟加载器请参阅比文：
http://www.jb51.net/article/50685.htm