摘要：什么是百度廣告最近跟百度廣告打了會(huì)交道，如果您正在或者即將和百度廣告打交道，那太好了，本文一定會(huì)讓您不虛此行。插入到新聞信息流將百度廣告插入到新聞信息流，這是很普遍的做法。總結(jié)對(duì)于百度廣告在不同環(huán)境中的投放，有不同的處理方式。

最近跟百度廣告打了會(huì)交道，如果您正在或者即將和百度廣告打交道，那太好了，本文一定會(huì)讓您不虛此行。百度廣告，即百度聯(lián)盟廣告，在 這里 進(jìn)行注冊(cè)后，經(jīng)過(guò) 一些配置，便可以生成一段 js，將該 js 插入到 HTML 頁(yè)面中，便能出現(xiàn)百度的廣告。

恩，百度廣告您一定見(jiàn)過(guò)，隨便截張圖：

隨便給一段生成的百度廣告代碼感受下:

以上代碼如何能夠展現(xiàn)廣告？最重要的原因是 cm.js 中將廣告內(nèi)容用 document.write 方法輸出。

一般場(chǎng)景，也是最簡(jiǎn)單的使用，需要廣告出現(xiàn)在哪個(gè)位置，就把該段 js 放在哪個(gè)位置。非常容易理解，因?yàn)閺V告的生成用的是 document.write，所以執(zhí)行到該段 js 時(shí)，會(huì)同步輸出廣告內(nèi)容。

使用方式大概這樣：

以上的一般場(chǎng)景下，如果有性能瓶頸，很顯然是因?yàn)?strong>百度廣告圖片加載的問(wèn)題，js 的加載并不是首要原因（js還有緩存）。出于好奇，還是首先對(duì) cm.js 試試能否異步加載。

控制臺(tái)有個(gè) warning，但是廣告也出來(lái)了：

之前我們說(shuō)到百度廣告是用 document.write 同步輸出到頁(yè)面上的，很顯然，并不能異步加載有 document.write 方法的 js 文件（到底是重寫(xiě)頁(yè)面呢，還是重寫(xiě)頁(yè)面呢），所以會(huì)有該 warning。但是，為什么會(huì)有廣告呢？

這是因?yàn)榘俣扔幸惶?"備胎" 方案。當(dāng) cm.js 內(nèi)部判斷該 js 是被異步加載的時(shí)候，隨即執(zhí)行這套備胎方案：

createBackupWrapper: function(t) {
    try {
        var e = document.getElementsByTagName("script")
          , i = e[e.length - 1];
        if (i) {
            var n = i.parentNode;
            if (n) {
                var o = document.createElement("div");
                return o.id = t.containerId,
                n.insertBefore(o, i),
                !0
            }
        }
    } catch (r) {}
    return !1
    },

代碼寫(xiě)的很清楚，就是把廣告元素插入到最后一個(gè) script 標(biāo)簽的前面。為了保證廣告所在的位置即是我們希望的位置，很顯然最后一個(gè) script 元素必須就是 cm.js。

這樣理解的話，我們似乎可以得出這樣一個(gè)結(jié)論：當(dāng)廣告位置在頁(yè)面最底部時(shí)（并且只有一處廣告位），我們可以對(duì)這段廣告的 js 進(jìn)行如上的異步加載。但是 js 異步加載了，廣告所需要的圖片還得請(qǐng)求，標(biāo)簽頁(yè)上的小圈圈還是一直在轉(zhuǎn)，所以我覺(jué)得對(duì) cm.js 文件進(jìn)行異步加載，并沒(méi)有什么卵用。

事實(shí)上，cm.js 內(nèi)部就提供了異步加載的方案 -> 廣告位異步加載代碼

HELLO WORLD

這樣不僅 cm.js 只需加載一次，而且調(diào)用也方便多了。（好吧，之前的異步測(cè)試算是無(wú)用功）

單純的異步加載對(duì)于頁(yè)面整體的加載速度似乎并沒(méi)有什么提升（廣告圖片略多），是否可以用 setTimeout 進(jìn)行延遲的異步加載？ok，我們對(duì)之前的代碼進(jìn)行一點(diǎn)改造，用一個(gè)定時(shí)器延遲執(zhí)行 scriptDomElement 函數(shù)。

前面說(shuō)了，異步加載僅適用于 cm.js 作為最后一個(gè) script 標(biāo)簽的情況，也就是廣告在頁(yè)面最底部的情況。what"s more，經(jīng)過(guò)這樣的處理，大多數(shù)情況下是可以看到廣告的，但是小部分情況廣告無(wú)法展現(xiàn)，究其原因，樓主覺(jué)得是 cm.js 內(nèi)部對(duì)該 js 是否是異步加載無(wú)法精確判斷。

所以樓主覺(jué)得，如果可以接受某些機(jī)器下無(wú)法展現(xiàn)百度廣告，這個(gè)方法還是可以一試的。

恩，其實(shí)我們完全可以用 cm.js 提供的 BAIDU_CLB_fillSlotAsync 方法和 setTimeout 進(jìn)行配合。

（強(qiáng)勢(shì)插入硬廣一枚：樓主 Github 求關(guān)注~）

非常簡(jiǎn)單，寫(xiě)個(gè)簡(jiǎn)單的 DEMO（重寫(xiě)完后記得改回來(lái)，DEMO 中沒(méi)改回來(lái)）：

Hello world!

如何能做到延遲加載？我們可以采用 BigRender 的思路，將廣告代碼放在 textarea 標(biāo)簽中，當(dāng) textarea 出現(xiàn)在視野中時(shí)，取出廣告代碼執(zhí)行。參考雨夜帶刀的代碼：

<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/
;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script>


延遲加載script并重寫(xiě)document.write，下面是代碼實(shí)現(xiàn)：

var loadScript = function( elem ){
    var url = elem.value.match( /src="([sS]*?)"/i )[1],
        parent = elem.parentNode,
        // 緩存原生的document.write
        docWrite = document.write,    
        // 創(chuàng)建一個(gè)新script來(lái)加載
        script = document.createElement( "script" ), 
        head = document.head || 
            document.getElementsByTagName( "head" )[0] || 
            document.documentElement;
    
    // 重寫(xiě)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"
        ){

            // 恢復(fù)原生的document.write
            document.write = docWrite;
            head.removeChild( script );
            
            // 卸載事件和斷開(kāi)DOM的引用
            // 盡量避免內(nèi)存泄漏
            head =             
            parent = 
            elem =
            script = 
            script.onerror = 
            script.onload = 
            script.onreadystatechange = null;

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

如果有多個(gè)廣告片段，因?yàn)?document.write 是全局方法，所以不得不維護(hù)個(gè)腳本隊(duì)列，一個(gè)一個(gè)執(zhí)行，又退化成了同步執(zhí)行腳本。如果異步并發(fā)執(zhí)行的話，很可能廣告的位置會(huì)出現(xiàn)對(duì)調(diào)現(xiàn)象。當(dāng)然，有些百度廣告并不會(huì)十分在乎順序，比如下面要說(shuō)的新聞信息流。

其實(shí)我覺(jué)得如果要延遲加載某些特定位置的廣告區(qū)域，可以用 BAIDU_CLB_fillSlotAsync 方法，將該方法所在的代碼塞入 textarea 中。 有一點(diǎn)需要注意的是，BAIDU_CLB_fillSlotAsync 必須指定廣告位置的 DOM id。

將百度廣告插入到新聞信息流，這是很普遍的做法。

比如網(wǎng)易：

那么如何將廣告插入到新聞信息流當(dāng)中去呢？我們還是可以用重寫(xiě) document.write 的方法。

舉個(gè)簡(jiǎn)單的例子：

重寫(xiě)一個(gè)系統(tǒng)的方法畢竟不是什么好事，網(wǎng)易、 頭條新聞 采用的都是另一種方法，套一個(gè) iframe，非常巧妙。

index.htm 文件：

ad.htm 文件：

當(dāng)然，一些樣式方面的細(xì)節(jié)還需要自己去把握，這里只提供一個(gè)思路。

對(duì)于百度廣告在不同環(huán)境中的投放，有不同的處理方式。主要有三種：

利用 cm.js 中的 BAIDU_CLB_fillSlotAsync 方法（該方法需要廣告位置的 DOM id）

重寫(xiě) document.write

新建 iframe，在該 iframe 中同步輸出廣告代碼

仁者見(jiàn)仁智者見(jiàn)智吧。

Read more：

重寫(xiě)document.write實(shí)現(xiàn)無(wú)阻塞加載js廣告

讓document.write的廣告無(wú)阻塞的加載