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

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

恩，百度廣告您一定見過，隨便截張圖：

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

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

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

使用方式大概這樣：

以上的一般場景下，如果有性能瓶頸，很顯然是因為百度廣告圖片加載的問題，js 的加載并不是首要原因（js還有緩存）。出于好奇，還是首先對 cm.js 試試能否異步加載。

控制臺有個 warning，但是廣告也出來了：

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

這是因為百度有一套 "備胎" 方案。當(dāng) cm.js 內(nèi)部判斷該 js 是被異步加載的時候，隨即執(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
    },

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

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

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

HELLO WORLD

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

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

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

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

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

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

非常簡單，寫個簡單的 DEMO（重寫完后記得改回來，DEMO 中沒改回來）：

Hello world!

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

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


延遲加載script并重寫document.write，下面是代碼實現(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)建一個新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"
        ){

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

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

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

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

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

比如網(wǎng)易：

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

舉個簡單的例子：

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

index.htm 文件：

ad.htm 文件：

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

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

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

重寫 document.write

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

仁者見仁智者見智吧。

Read more：

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

讓document.write的廣告無阻塞的加載