1。広告コード分析
多くのサードパーティ広告システムは、document.writeを使用して、次のJavaScript広告リンクなどの広告をロードします。
コードコピーは次のとおりです。
<script type = "text/javascript" src = "http://gg.5173.com/adpolestar/5173/
; AP = 2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC; CT = JS; PU = 5173;/？ "> </scrip>
このJavaScriptリクエストは、次のようなコードを返します。
コードコピーは次のとおりです。
document.write（ "<a href = 'http：//gg.5173.com/adpolestar/wayl/;" +
"AD = 6FF3F844_33E6_86EE_3B96_D94C1CF1AEC4; AP = 2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;" +
"pu = 5173;/？http：//www.7bao.com/g/xlsbz/index 'ターゲット=' _ blank '> <img src ='" +
"http://html.5173cdn.com/market/yunyinga/xly132.gif '" +
"border = '0' /> </a>"）;
この種の読み込み方法は少し2のように見えますが、サードパーティなので変更することはできません。さらに、コードには統計関数が追加されています。上記のJavaScript広告リンクは、要求されるたびに1回カウントされます。生成されたコードには、クリック統計の関数もあります。つまり、この方法でロードする必要があります。
document.writeは、ページレンダリング中に同期されます。 JavaScriptコードがダウンロードされ、document.writeが実行されるまで、次のコンテンツをレンダリングするまで待機する必要があります。多くの広告がある場合、特にページの最初の画面に大きな画像サイズのいくつかの広告が挿入されている場合、ページがブロックされます。ブロッキングの状況は非常に明白で深刻になります。これにより、ユーザーはあなたのWebページが非常に遅いと感じるようになります。
2。document.writeを書き直します
閉塞を避けるために、ページレンダリング中にdocument.writeメソッドを実行することはできません。 DOMツリーの準備ができた後、JavaScript広告コードを実行する方法を見つける必要があります。ただし、DOMツリーの準備ができた後、ページ全体が再レンダリングされますが、これは不可能です。 document.writeはブラウザーネイティブメソッドですが、メソッドをカスタマイズして元の方法を上書きすることもできます。 JavaScript広告コードがロードされる前に、document.writeを書き直し、変更してから実行する前にロードして実行するまで待ちます。
3. JavaScriptコードの遅延ロード
上記の重要なステップは、JavaScriptコードの読み込みを遅らせることです。それを実装する方法は？まず、タイプをカスタムプロパティ「タイプ/キャッシュ」に設定するなど、スクリプトのタイプ属性を書き換えてみてください。このようにして、ほとんどのブラウザー（Chromeはダウンロードしません）はまだこのコードをダウンロードしますが、実行しません。ページレンダリング中にこのようなコードをダウンロードすると、まだブロックされます。スクリプトのタイプを書き換えることで、実際の遅延荷重を実現できません。せいぜい、ロードすることしかできませんが、実行することはできません。また、互換性の問題があります。
スクリプトタグをTextAreaタグに入れ、ロードする必要があるときにTextAreaコンテンツを読み取ります。これにより、スクリプトの実際の遅延ロードを実現できます。この方法は、Yu BoのBigRender（壁の外側）ソリューションのおかげです。
コードコピーは次のとおりです。
<div>
<textarea style = "display：none">
<script type = "text/javascript" src = "http://gg.5173.com/adpolestar/5173/
; AP = 2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC; CT = JS; PU = 5173;/？ "> </scrip>
</textarea>
</div>
読み込みを遅らせ、document.writeを書き直します。以下はコードの実装です。
コードコピーは次のとおりです。
/**
* document.writeを書き直して、非ブロッキング読み込みスクリプトを実装します
* @param {dom object} textarea要素
*/
var loadscript = function（elem）{
var url = elem.value.match（/src = "（[/s/s]*？）"/i）[1]、
親= elem.parentnode、
//ネイティブDocument.writeをキャッシュします
docwrite = document.write、
//ロードする新しいスクリプトを作成します
script = document.createelement（ 'script'）、
head = document.head ||
document.getElementsByTagname（ 'head'）[0] ||
document.documentlement;
// 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 ||
/loded|complete/.test(script.readystate）||
E === 'エラー'
）{
//ネイティブDocument.writeを復元します
document.write = docwrite;
head.RemoveChild（スクリプト）;
//イベントをアンインストールし、DOM参照を切断します
//メモリリークを避けてみてください
head =
親=
Elem =
スクリプト=
script.onerror =
script.onload =
script.oneadystatechange = null;
}
}
//スクリプトを読み込みます
head.insertbefore（script、head.firstchild）;
};
4。画像遅延ロードの拡張バージョン
JavaScript ADコードのブロックされていないレイジーロードを実装することで、さらに最適化できますか？広告が最初の画面に表示されない場合、画像の通常の遅延ロードのように負荷を遅らせるために使用できますか？答えはイエスです。以前に書いた画像用のLazy Loadingプラグインを展開し、元の画像読み込み方法（SRC）を上記のLoadScriptメソッドに置き換えて、それを実現しました。もちろん、まさにそのような変更は依然として問題になるでしょう。複数の写真があり、LoadScriptが同時に実行され、Document.Writeがグローバルな方法である場合、AをロードするときにBに影響を与える必要がないことは保証されていません。
V.キューコントロール
JavaScript ADコードが順番にロードするには、荷重を制御するためにキューが必要です。したがって、次の簡単なキュー制御コードも利用できます。
コードコピーは次のとおりです。
var loadqueue = [];
//リストに参加します
var queue = function（data）{
loadqueue.push（data）;
if（loadqueue [0]！== 'runing'）{
dequeue（）;
}
};
// LETIST
var dequeue = function（）{
var fn = loadqueue.shift（）;
if（fn === 'raning'）{
fn = loadqueue.shift（）;
}
if（fn）{
loadqueue.unshift（ 'runing'）;
fn（）;
}
};
画像遅延ローダーについては、比較記事を参照してください：http：//www.vevb.com/article/50685.htm