Methode zum nicht blockierenden Laden von Werbung, die durch die document.write_javascript-Kenntnisse von js ausgegeben wird

1. Analyse des Werbecodes

Viele Werbesysteme von Drittanbietern verwenden document.write, um Anzeigen zu laden, wie zum Beispiel der folgende Javascript-Werbelink.

Code kopieren Der Code lautet wie folgt:

Diese Javascript-Anfrage gibt einen Code wie diesen zurück:

Code kopieren Der Code lautet wie folgt:

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

Dies scheint eine Art Lademethode eines Drittanbieters zu sein, aber Sie können sie nicht ändern, da es sich selbst um einen Drittanbieter handelt. Und der Code hat eine Statistikfunktion hinzugefügt. Der oben genannte Javascript-Werbelink wird bei jeder Anforderung gezählt. Der generierte Code verfügt auch über eine Klickstatistikfunktion, was bedeutet, dass er auf diese Weise geladen werden muss.

Document.write wird synchron ausgeführt, wenn die Seite gerendert wird. Sie müssen warten, bis der Javascript-Code heruntergeladen und document.write ausgeführt wurde, bevor der nachfolgende Inhalt gerendert wird blockiert werden, insbesondere wenn Sie auf dem ersten Bildschirm der Seite mehrere Anzeigen mit relativ großen Bildgrößen einfügen, ist die Blockierungssituation ziemlich offensichtlich und schwerwiegend, was dazu führen kann, dass Benutzer denken, dass Ihre Webseite sehr langsam ist.

2. Dokument.write neu schreiben

Um eine Blockierung zu vermeiden, kann die Methode document.write beim Rendern der Seite nicht ausgeführt werden. Sie müssen einen Weg finden, den Javascript-Werbecode auszuführen, nachdem der DOM-Baum bereit ist (DOM-bereit), aber das Dokument ausführen Nachdem der DOM-Baum fertig ist, wird beim Schreiben die gesamte Seite neu gerendert, was nicht möglich ist. Obwohl document.write eine native Browsermethode ist, können Sie eine Methode auch anpassen, um die ursprüngliche Methode zu überschreiben. Bevor der JavaScript-Anzeigencode geladen wird, schreiben Sie document.write neu und ändern Sie es dann wieder, nachdem es geladen und ausgeführt wurde.

3. Laden des Javascript-Codes verzögern

Der wichtigste Schritt oben ist das verzögerte Laden von Javascript-Code. Versuchen Sie zunächst, das Typattribut des Skripts neu zu schreiben, indem Sie beispielsweise den Typ auf ein benutzerdefiniertes Attribut „Typ/Cache“ festlegen. Die meisten Browser (Chrome lädt ihn jedoch nicht herunter) laden diesen Code zwar herunter, führen ihn jedoch nicht aus Der Code wird weiterhin blockiert, wenn die Seite gerendert wird. Durch Umschreiben des Skripttyps kann er höchstens geladen werden, und es gibt immer noch Kompatibilitätsprobleme.

Fügen Sie das Skript-Tag in das Textarea-Tag ein und lesen Sie dann den Textarea-Inhalt, wenn er geladen werden muss. Dies kann dank der von Yu vorgeschlagenen BigRender-Lösung (außerhalb der Wand) erreicht werden Bo.

Code kopieren Der Code lautet wie folgt:

< textarea style= "display:none">

Laden Sie das Skript verzögert und schreiben Sie document.write neu. Das Folgende ist die Code-Implementierung:

Code kopieren Der Code lautet wie folgt:

/**
* Schreiben Sie document.write neu, um ein nicht blockierendes Ladeskript zu erreichen
* @param { Dom Object } Textarea-Element
*/
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 === 'error'
  ){

   // 卸载事件和断开DOM的引用
   / / 尽量避免内存泄漏
   head =    
   parent =
   elem =
   script =
   script.onerror =
   script.onload =
   script.onreadystatechange =. null ;

 

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

实现了无阻塞式的延迟加载javascript广告代码，能否进一步优化？如果广告没在首屏出现，能否像通常的图片的延迟加载一样来进行延迟加载？答案是肯定的.对我之前写的图片延迟加载的小插件进行扩展, 将原来的图片加载方式(替换src)改成上面的loadScript方式加载就可以实现.当然,仅仅是这样的修改还是会有问题的.如果有多个Laden Sie die Datei „loadScript“ herunter und laden Sie „document.write“ herunter一个个的按顺序加载, 加载完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