自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

重寫document.write實現(xiàn)無阻塞加載JS廣告

作者：紅草帽
開發(fā) 前端
無阻塞加載javascript，對于頁面性能優(yōu)化有很大的作用，這樣能有效的減少js對頁面加載的阻塞。特別是一些廣告js文件，由于廣告內(nèi)容有可能是富媒體，更是很可能成為你頁面加載提速的瓶頸，高性能javascript告訴我們，同學(xué)，提升你的網(wǎng)頁速度，就無阻塞地加載JS吧。

無阻塞加載javascript，對于頁面性能優(yōu)化有很大的作用，這樣能有效的減少js對頁面加載的阻塞。特別是一些廣告js文件，由于廣告內(nèi)容有可能是富媒體，更是很可能成為你頁面加載提速的瓶頸，高性能javascript告訴我們，同學(xué)，提升你的網(wǎng)頁速度，就無阻塞地加載JS吧。

于是便有一下代碼出現(xiàn)。

  1. (function() {  
  2. var s = document.createElement('script');  
  3. s.type = 'text/javascript';  
  4. s.async = true;  
  5. s.src = 'http://yourdomain.com/script.js';  
  6. var x = document.getElementsByTagName('script')[0];  
  7. x.parentNode.insertBefore(s, x);  
  8. })(); 

上邊都是大家熟悉的，看過書的同學(xué)都知道這樣無阻塞加載的好處，效果挺不錯的，當此等無阻塞腳本遇到一般js廣告就來了寫問題——廣告代碼出現(xiàn)在HTML里面了卻不顯示廣告。

納尼？HTML出來了不渲染到頁面上？

先看看廣告js代碼

  1. document.write('<img src="http://images.cnblogs.com/logo_small.gif" alt="Logo">'); 

代碼挺簡單就一個document.write輸出HTML代碼（相信很多廣告商的廣告都這樣），頁面不顯示廣告問題在哪里呢？ 問題就在這個document.write。為什么？先w3schools看看document.write的定義很使用吧。

定義和用法
write() 方法可向文檔寫入 HTML 表達式或 JavaScript 代碼。
可列出多個參數(shù)(exp1,exp2,exp3,...) ，它們將按順序被追加到文檔中。

方法：
一是在使用該方在文檔中輸出 HTML，另一種是在調(diào)用該方法的的窗口之外的窗口、框架中產(chǎn)生新文檔。在第二種情況中，請務(wù)必使用 close() 方法來關(guān)閉文檔。

但其原理是在頁面流輸入過程中執(zhí)行，一旦頁面加載完畢，再次調(diào)用 document.write()，會隱式地調(diào)用 document.open() 來擦除當前文檔并開始一個新的文檔。也就是說如果在HTML加載完后我們再使用document.write會檫除之前生成html，而顯示document.write輸出的內(nèi)容。

而我們例子中在頁面加載完后在在html中輸出document.write，就不會被執(zhí)行了。問題知道了，原理知道了，那怎么解決這個問題呢？

異步利用ajax，行不同，很多廣告文件都是第三方的，在不同域名下，存在跨域問題，而且不能我們控制其代碼的輸出。在這種情況下我們想到了一個辦法就是重寫掉document.write，在js文件加載結(jié)束后再把document.write重寫回去?？创a。

***版本無阻塞加載js廣告：

  1. function LoadADScript(url, container, callback){  
  2.         this.dw = document.write;  
  3.         this.url = url;  
  4.         this.containerObj = (typeof container == 'string'?document.getElementById(container):container);  
  5.         this.callback = callback || function(){};  
  6.     }  
  7.       
  8.     LoadADScript.prototype = {  
  9.         startLoad: function(){  
  10.             var script = document.createElement('script'),  
  11.                 _this = this;  
  12.               
  13.             if(script.readyState){ //IE  
  14.                 script.onreadystatechange = function(){  
  15.                 if (script.readyState == "loaded" || script.readyState == "complete"){  
  16.                     script.onreadystatechange = null;  
  17.                     _this.finished();  
  18.                 }  
  19.             };  
  20.             }else{ //Other  
  21.                 script.onload = function(){  
  22.                     _this.finished();  
  23.                 };  
  24.             }  
  25.               
  26.             document.write = function(ad){  
  27.                 var html = _this.containerObj.innerHTML;  
  28.                 _this.containerObj.innerHTML = html + ad;  
  29.             }  
  30.               
  31.             script.src = _this.url;  
  32.             script.type = 'text/javascript';  
  33.             document.getElementsByTagName('head')[0].appendChild(script);  
  34.         },  
  35.         finished: function(){  
  36.             document.write = this.dw;  
  37.             this.callback.apply();  
  38.         }  
  39.     }; 

頁面調(diào)用代碼：

  1. var loadScript = new LoadADScript('ad.js','msat-adwrap',function(){ console.log('msat-adwrap'); });  
  2. loadScript.startLoad();  
  3.       
  4. var loadScript = new LoadADScript('ad2.js','msat-adwrap',function(){ console.log('msat-adwrap2'); });  
  5. loadScript.startLoad();  
  6.       
  7. var loadScript = new LoadADScript('ad3.js','msat-adwrap',function(){ console.log('msat-adwrap3'); });  
  8. loadScript.startLoad(); 

廣告JS代碼

  1. //ad.js  
  2. document.write('<img src="http://images.cnblogs.com/logo_small.gif" alt="Logo">');  
  3.  
  4. //ad2.js  
  5. document.write('<img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129" usemap="#mp">');  
  6.  
  7. //ad3.js  
  8. document.write('<img alt="Google" height="95" id="hplogo" src="http://www.google.com/images/srpr/logo3w.png" width="275">'); 

***版本的問題是在多個文件調(diào)用的時候，會出現(xiàn)一些問題：

1. 由于文件加載的速度不一樣，導(dǎo)致可能有些先加載有些后加載，也就是無序的，而且很多時候我們需要的是有序的。比如我們需要先加載***屏的廣告。

2. 想有些廣告需要前置設(shè)置一些參數(shù)的，例如google adsense

 

為了解決這兩個問題好進一步修改成最終無阻塞加載js版本。

HTML頁面代碼:

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>new_file</title>  
  6.         <script type="text/javascript" src="loadscript.js"></script>  
  7.     </head>  
  8. <body>  
  9. <div id = "msat-adwrap"></div>  
  10. <div id = "msat-adwrap2"></div>  
  11. <script type="text/javascript">  
  12.     loadScript.add({  
  13.         url:'ad.js',  
  14.         container: 'msat-adwrap',  
  15.         callback:function(){ console.log('msat-adwrap'); }  
  16.     }).add({  
  17.         url:'ad2.js',  
  18.         container: 'msat-adwrap2',  
  19.         callback:function(){ console.log('msat-adwrap2'); }  
  20.     }).add({//google adsense  
  21.         url:'http://pagead2.googlesyndication.com/pagead/show_ads.js',  
  22.         container: 'msat-adwrap',  
  23.         init: function(){  
  24.             google_ad_client = "ca-pub-2152294856721899";  
  25.             /* 250x250 rich */ 
  26.             google_ad_slot = "3929903770";  
  27.             google_ad_width = 250;  
  28.             google_ad_height = 250;  
  29.         },  
  30.         callback:function(){ console.log('msat-adwrap3'); }  
  31.     }).execute();  
  32. </script>  
  33. </body>  
  34. </html> 

loadscript.js源代碼

  1. /**  
  2.  * 無阻塞加載廣告  
  3.  * @author Arain.Yu  
  4.  */ 
  5.  
  6. var loadScript = ( function() {  
  7.     var adQueue = [], dw = document.write;  
  8.     //緩存js自身的document.write  
  9.  
  10.     function LoadADScript(url, container, init, callback) {  
  11.         this.url = url;  
  12.         this.containerObj = ( typeof container == 'string' ? document.getElementById(container) : container);  
  13.         this.init = init ||  
  14.         function() {  
  15.         };  
  16.  
  17.         this.callback = callback ||  
  18.         function() {  
  19.         };  
  20.  
  21.     }  
  22.  
  23.     LoadADScript.prototype = {  
  24.         startLoad : function() {  
  25.             var script = document.createElement('script'), _this = this;  
  26.  
  27.             _this.init.apply();  
  28.  
  29.             if(script.readyState) {//IE  
  30.                 script.onreadystatechange = function() {  
  31.                     if(script.readyState == "loaded" || script.readyState == "complete") {  
  32.                         script.onreadystatechange = null;  
  33.                         _this.startNext();  
  34.                     }  
  35.                 };  
  36.             } else {//Other  
  37.                 script.onload = function() {  
  38.                     _this.startNext();  
  39.                 };  
  40.             }  
  41.             //重寫document.write  
  42.             document.write = function(ad) {  
  43.                 var html = _this.containerObj.innerHTML;  
  44.                 _this.containerObj.innerHTML = html + ad;  
  45.             }  
  46.  
  47.             script.src = _this.url;  
  48.             script.type = 'text/javascript';  
  49.             document.getElementsByTagName('head')[0].appendChild(script);  
  50.         },  
  51.         finished : function() {  
  52.             //還原document.write  
  53.             document.write = this.dw;  
  54.         },  
  55.         startNext : function() {  
  56.             adQueue.shift();  
  57.             this.callback.apply();  
  58.             if(adQueue.length > 0) {  
  59.                 adQueue[0].startLoad();  
  60.             } else {  
  61.                 this.finished();  
  62.             }  
  63.         }  
  64.     };  
  65.  
  66.     return {  
  67.         add : function(adObj) {  
  68.             if(!adObj)  
  69.                 return;  
  70.  
  71.             adQueue.push(new LoadADScript(adObj.url, adObj.container, adObj.init, adObj.callback));  
  72.             return this;  
  73.         },  
  74.         execute : function() {  
  75.             if(adQueue.length > 0) {  
  76.                 adQueue[0].startLoad();  
  77.             }  
  78.         }  
  79.     };  
  80. }()); 

原文鏈接：http://www.cnblogs.com/hongcaomao/archive/2012/03/27/javascript_loadad.html

【編輯推薦】

  1. 5種JavaScript調(diào)用函數(shù)的方法
  2. 10件有關(guān)JavaScript讓人費解的事情
  3. 面向?qū)ο蟮腏avaScript基本知識指南大全
  4. 是時候開始使用JavaScript嚴格模式了
  5. 好用的高質(zhì)量JavaScript庫一覽
責(zé)任編輯：林師授 來源： 紅草帽的博客
JavaScript
相關(guān)推薦

2014-10-09 09:48:14

JavaScript

2014-11-05 10:31:28

2014-10-10 14:00:52

JavascriptHTML

2009-06-30 15:19:00

阻塞讀取遠程文件Java多線程

2010-01-07 17:03:31

千兆路由交換機

2010-01-11 09:30:39

千兆路由交換機技術(shù)

2021-06-04 18:14:15

阻塞非阻塞tcp

2013-08-22 10:39:03

VOD網(wǎng)絡(luò)建設(shè)VOD網(wǎng)絡(luò)華為

2015-04-30 12:34:05

WordPressNode.js

2016-12-01 09:24:56

Android

2011-07-28 14:29:45

JavaScript

2024-12-20 07:30:00

重定向服務(wù)器端指令Next.js

2017-04-12 10:02:21

Java阻塞隊列原理分析

2010-04-30 09:45:05

廣告木馬網(wǎng)絡(luò)安全卡巴斯基

2012-12-28 14:23:12

Android開發(fā)TextView

2009-12-30 15:26:02

Silverlight

2021-09-16 05:32:31

No.js 模塊加載器module1.js

2018-04-18 14:38:14

廣告

2022-04-21 07:52:08

JS線程GUI渲染

2011-04-25 11:05:10

javascript
點贊
收藏

51CTO技術(shù)棧公眾號