jsのdocument.write_javascriptスキルで出力された広告をノンブロッキングで読み込む方法

1. 広告コードの分析

多くのサードパーティ広告システムは、次の JavaScript 広告リンクなど、document.write を使用して広告を読み込みます。

コードをコピー コードは次のとおりです:

この JavaScript リクエストは次のようなコードを返します:

コードをコピー コードは次のとおりです:

document.write( ""http://html.5173cdn.com/market /yunyinga/ xly132.gif' "
"border='0' width="132px" height="58px" />" );

これは少しセカンドパーティの読み込み方法のようですが、それ自体がサードパーティであるため、変更することはできません。また、コードには統計機能が追加されており、上記の JavaScript 広告リンクはリクエストされるたびにカウントされます。つまり、生成されたコードにはクリック統計の機能もあります。つまり、この方法でロードする必要があります。

Document.write は、ページのレンダリング時に同期的に実行されます。後続のコンテンツをレンダリングする前に、JavaScript コードがダウンロードされ、document.write が実行されるまで待つ必要があります。多くの広告がある場合、ページがレンダリングされます。特に、ページの最初の画面に比較的大きな画像サイズの複数の広告を挿入すると、ブロックされる状況が非常に明白かつ深刻になり、ユーザーに Web ページが非常に遅いと思われてしまいます。

2. document.write

を書き換えます

ブロックを回避するには、ページのレンダリング時に document.write メソッドを実行できませんが、DOM ツリーの準備ができた (DOM の準備ができた) 後で、ドキュメントを実行するように JavaScript 広告コードを実行する方法を見つける必要があります。 DOM ツリーの準備ができた後に write を実行すると、ページ全体が再レンダリングされますが、これは不可能です。 document.write はブラウザーのネイティブ メソッドですが、メソッドをカスタマイズして元のメソッドをオーバーライドすることもできます。 JavaScript 広告コードが読み込まれる前に document.write を書き換え、読み込まれて実行された後に元に戻します。

3. JavaScript コードの読み込みを遅延します

上記の最も重要なステップは、JavaScript コードの遅延読み込みです。これを実装するにはどうすればよいでしょうか。まず、カスタム属性「type/cache」に type を設定するなど、スクリプトの type 属性を書き換えてみますが、ほとんどのブラウザ (Chrome ではダウンロードされません) は引き続きこのコードをダウンロードしますが、そのような部分のダウンロードは実行しません。ページがレンダリングされるときにコードは依然としてブロックされます。実際の遅延読み込みは、スクリプト タイプを書き換えることによっては実現できず、実行せずに読み込むことしかできません。また、互換性の問題も依然として存在します。

script タグを textarea タグに配置し、ロードする必要があるときに textarea のコンテンツを読み取るこの方法は、Yubo が提案した BigRender (壁の外) ソリューションのおかげで実現できます。 。

コードをコピー コードは次のとおりです。

< textarea style= "display:none">

スクリプトを遅延ロードし、document.write を書き換えます。コードの実装は次のとおりです。

コードをコピー コードは次のとおりです:

/**
* ノンブロッキング読み込みスクリプトを実現するために document.write を書き換えます
* @param { Dom Object } textarea 要素
*/
varloadScript = function( elem ){
var url = elem.value.match( /src="([sS]*?)"/ i )[1],
parent = elem.parentNode,
// 缓存原生的document.write
docWrite = document.write,
// 创建一新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'
){

// 恢复原生的document.write
document.write = docWrite;
head.removeChild( script );

// 卸売イベントと断开DOMの引用
/ / 全力回避内部残漏漏
head =
親 =
elem =
script =
script.onerror =
script.onload =
script.onreadystatechange = null;

}
}

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

四、图片延迟追加增强版

障害のない遅延追加 JavaScript レポート コードが実装されていますが、さらに拡張できますか? レポートがトップ画面に表示されない場合、通常の写真の遅延追加と同様に遅延追加を実行できますか? 応答案は肯定的です。当然ながら、このような修正は、以前に書き込まれたグラフィックスを拡張し、元のグラフィックスをロードする方法 (代替 src) を上のloadScript 方法で実行することによっても実現できます。イメージとloadScriptは同時に実行されますが、document.writeは完全にローカルなメソッドであり、Aのロード時にBに影響を与えないように、いずれかの順序でロードする必要があり、Aのロードが完了するとBをロードできます。

五、队列制御

JavaScript レポートコードのシーケンスの追加には、追加を制御するための 1 つのブロックが必要です。その後、次のセグメントの個別の制御コード:

が追加されます。 🎜> 代码如下:

varloadQueue = [];
// 入列
var queue = function( data ){
loadQueue.push ( data );
if(loadQueue[0] !== 'runing' ){
dequeue();
}
};
// 出列
var dequeue = function(){
var fn =loadQueue.shift();
if( fn === 'runing' ){
fn =loadQueue.shift();
}

if( fn ){
loadQueue.unshift( 'runing' );
fn();
}
};

图片延迟加ダウンロード器请参阅比文：
http://www.jb51.net/article/50685.htm