JavaScriptをブロックせずにロードすることは、ページのパフォーマンスの最適化に大きな影響を与え、JSによるページの負荷の詰まりを効果的に減らすことができます。特に広告JSファイルの場合、広告コンテンツはリッチメディアである可能性があるため、ページの読み込み速度のボトルネックになる可能性があります。高性能のJavaScriptは、クラスメート、Webページの速度を改善し、ブロックせずにJSをロードするように指示しています。
したがって、コードが表示されます。
(function(){var s = document.createelement( 'script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js';var x = document.getelementsbytagname(' script ')誰もが上記に精通しています。この本を読んだ学生は、そのような非ブロッキングロードの利点を知っており、その効果は非常に良いです。このような非ブロッキングスクリプトが一般的なJS広告に遭遇すると、問題が発生します。広告コードはHTMLに表示されますが、広告は広告を表示しません。
ナニ? HTMLはページにレンダリングされていませんか?
AD JSコードを見てみましょう
コードコピーは次のとおりです。
document.write( '<img src = "http://img.vevb.com/logo_small.gif">');
コードは非常に簡単で、document.writeにHTMLコードを出力するだけです(多くの広告主の広告はこのようなものだと思います)。ページが広告を表示していないことの問題は何ですか?問題はこのdocument.writeにあります。なぜ?まず、document.writeの定義を見てみましょう。
定義と使用法
write()メソッドは、HTML式またはJavaScriptコードをドキュメントに書き込むことができます。
複数のパラメーター(Exp1、Exp2、Exp3、...)をリストすることができ、それらは順番にドキュメントに追加されます。
方法:
1つは、このパーティを使用してドキュメントにHTMLを出力することであり、もう1つは、メソッドが呼び出されるWindowsの外側のWindowsとFrameworkで新しいドキュメントを生成することです。 2番目のケースでは、Close()メソッドを使用してドキュメントを閉じてください。
しかし、その原則は、ページフロー入力プロセス中に実行されることです。ページが読み込まれると、document.write()が再度呼び出され、document.open()は現在のドキュメントを消去して新しいドキュメントを開始するために暗黙的に呼び出されます。つまり、document.writeを使用すると、HTMLがロードされた後に書き込み、以前の生成されたHTMLを排除し、document.writeからコンテンツ出力を表示します。
この例では、ページが読み込まれた後、document.writeはHTMLで出力され、実行されません。私は問題と原則を知っているので、この問題を解決する方法は?
異なる線でAjaxを非同期に利用します。多くの広告ファイルはサードパーティです。異なるドメイン名では、クロスドメインの問題があり、コードの出力を制御することはできません。この場合、document.writeを書き直してから書き換える方法を考えました。JSファイルが読み込まれた後に書き戻します。コードを見てください。
最初のバージョンは、ブロックせずにJS広告をロードします。
function loadadscript(url、container、callback){this.dw = document.write; this.url = url; this.containerobj =(typeof container == 'string'?document.getElementById(container):container); this.callback = callback ||関数(){}; } loadadscript.prototype = {startload:function(){var script = document.createelement( 'script')、_this = this; if(script.readystate){// ie script.onreadystatechange = function(){if(script.readyState == "loaded" || script.readystate == "complete"){script.oneadystatechange = null; _this.finished(); }}; } else {// other script.onload = function(){_this.finished(); }; } document.write = function(ad){var html = _this.containerobj.innerhtml; _this.containerobj.innerhtml = html + ad; } script.src = _this.url; script.type = 'text/javascript'; document.getElementsByTagname( 'head')[0] .appendChild(script); }、finent:function(){document.write = this.dw; this.callback.apply(); }};ページコールコード:
var loadscript = new loadadscript( 'ad.js'、 'msat-adwrap'、function(){console.log( 'msat-adwrap');}); loadscript.startload(); var loadscript = new loadAdscript( 'ad2.js'、 'msat-adwrap'、function(){console.log( 'msat-adwrap2');}); loadscript.startload(); var loadscript = new loadadscript( 'ad3.js'、 'msat-adwrap'、function(){console.log( 'msat-adwrap2');}); loadscript.startload(); var loadscript = new loadadscript( 'ad3.js'、 'msat-adwrap'、function(){console.log( 'msat-adwrap3');}); loadscript.startload();JSコードの広告
//ad.jsdocument.write('<imgsrc = "http://images.cnblogs.com/logo_small.gif"> '); // ad2.jsdocument.write(' <img src = "http://www.baidu.com/img/baidu_sylogo1.gif usemap = "#mp"> '); // ad3.jsdocument.write(' <img id = "hplogo" src = "http://www.google.com/images/srpr/logo3w.png"> ');最初のバージョンの問題は、複数のファイルが呼び出されると、いくつかの問題が発生することです。
1.ファイルロードの速度が異なるため、最初にロードされる場合があり、後でロードされる場合があります。これは順序付けられていません。たとえば、最初に最初の画面に広告をロードする必要があります。
2.いくつかの広告が必要な場合は、Google AdSenseなどの設定前にいくつかのパラメーターを設定する必要があります
これら2つの問題を解決するために、最終的な非ブロッキングJSバージョンにさらに変更されます。
HTMLページコード:
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"/> <title> new_file </title> <script type = "text/javascript" src = "loadscript.js"> </script> </head> <body = "msat-adwram "msat-adwrap2"> </div> <script type = "text/javascript"> loadscript.add({url: 'ad.js'、container: 'msat-adwrap'、callback:function(){console.log( 'msat-adwrap');}})。 callback:function(){console.log( 'msat-adwrap2'); 「CA-PUB-215294856721899」 })。execute(); </script> </body> </html>loadscript.jsソースコード
/***非ブロッキングADS* @Author arain.yu*/var loadscript =(function(){var adqueue = []、dw = document.write; // cache js own document.write function loadadscript(url、container、init、callback){this.url = url; thip.containerobj =(conterer conterer)init || ange = function(script.readed "|| complete" complete ") html = _this.containerobj.innerhtml = html + ad} }、finent:function(){// restore document.write document.write = this.dw; }、startnext:function(){adqueue.shift(); this.callback.apply(); if(adqueue.length> 0){adqueue [0] .startload(); } else {this.finished(); }}}}; return {add:function(adobj){if(!adobj)return; adqueue.push(new loadadscript(adobj.url、adobj.container、adobj.init、adobj.callback));これを返します。 }、execute:function(){if(adqueue.length> 0){adqueue [0] .startload(); }}}};}());