重寫document.write實現無阻塞加載js廣告(補充)_javascript技巧

于是便有一下代碼出現。

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

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

先看看廣告js代碼

代碼如下:
document.write('');

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

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

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

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

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

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

第一版本無阻塞加載js廣告：

頁面調用代碼：

廣告js代碼

第一版本的問題是在多個文件調用的時候，會出現一些問題：

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

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

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

HTML頁面代碼:

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

重寫document.write實現無阻塞加載js廣告(補充)_javascript技巧

重寫document.write實現無阻塞加載js廣告(補充)_javascript技巧:無阻塞加載javascript，對于頁面性能優化有很大的作用，這樣能有效的減少js對頁面加載的阻塞。特別是一些廣告js文件，由于廣告內容有可能是富媒體，更是很可能成為你頁面加載提速的瓶頸，高性能javascript告訴我們，同學，提升你的網頁速度，就無阻塞地加載J

推薦度：

點擊下載本文 文檔為doc格式