Memuat JavaScript tanpa memblokir memiliki efek besar pada optimasi kinerja halaman, yang secara efektif dapat mengurangi penyumbatan beban halaman oleh JS. Khusus untuk beberapa file iklan JS, karena konten periklanan mungkin media yang kaya, kemungkinan akan menjadi hambatan untuk kecepatan pemuatan halaman Anda. JavaScript berkinerja tinggi memberi tahu kami, teman sekelas, untuk meningkatkan kecepatan halaman web Anda, memuat JS tanpa memblokir.
Jadi kode muncul.
(function () {var s = document.createelement ('skrip'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js';var x = document.getElementsbyTagname (' ') [0]; x.parentn;Setiap orang terbiasa dengan hal di atas. Siswa yang telah membaca buku ini tahu manfaat dari pemuatan non-blocking seperti itu, dan efeknya cukup bagus. Ketika skrip non -blocking seperti itu menghadapi iklan JS umum, mereka akan menulis masalah - kode iklan muncul dalam HTML tetapi iklan tidak menampilkan iklan.
Nani? HTML tidak diterjemahkan ke halaman?
Mari kita lihat kode AD JS
Salinan kode adalah sebagai berikut:
document.write ('<img src = "http://img.vevb.com/logo_small.gif">');
Kode ini cukup sederhana, hanya kode HTML output dalam dokumen. Menulis (Saya percaya bahwa banyak iklan pengiklan seperti ini). Apa masalah dengan halaman yang tidak menampilkan iklan? Masalahnya terletak pada dokumen ini. Menulis. Mengapa? Pertama -tama mari kita lihat definisi Document.write.
Definisi dan penggunaan
Metode write () dapat menulis ekspresi html atau kode javascript ke dokumen.
Beberapa parameter (EXP1, EXP2, EXP3, ...) dapat terdaftar dan akan ditambahkan ke dokumen secara berurutan.
metode:
Salah satunya adalah menggunakan pihak ini untuk mengeluarkan HTML dalam dokumen, dan yang lainnya adalah menghasilkan dokumen baru di Windows dan kerangka kerja di luar jendela tempat metode ini dipanggil. Dalam kasus kedua, pastikan untuk menggunakan metode tutup () untuk menutup dokumen.
Tetapi prinsipnya harus dieksekusi selama proses input aliran halaman. Setelah halaman dimuat, Document.write () dipanggil lagi, dan document.open () akan dipanggil secara implisit untuk menghapus dokumen saat ini dan memulai dokumen baru. Dengan kata lain, jika kami menggunakan Document.write setelah HTML dimuat, kami akan menghilangkan HTML yang dihasilkan sebelumnya dan menampilkan output konten dari Document.write.
Dalam contoh kami, setelah halaman dimuat, dokumen.Write adalah output dalam HTML dan tidak akan dieksekusi. Saya tahu masalah dan prinsipnya, jadi bagaimana menyelesaikan masalah ini?
Secara tidak sinkron menggunakan Ajax, dengan garis yang berbeda. Banyak file iklan adalah pihak ketiga. Di bawah nama domain yang berbeda, ada masalah lintas domain, dan kami tidak dapat mengontrol output kode mereka. Dalam hal ini, kami memikirkan cara untuk menulis ulang Document.write dan kemudian menulis ulang Document.write kembali setelah file JS dimuat. Lihat kodenya.
Versi pertama memuat iklan JS tanpa memblokir:
function loadAdscript (url, container, callback) {this.dw = document.write; this.url = url; this.containerobj = (typeof container == 'string'? Document.getElementById (wadah): wadah); this.callback = callback || fungsi(){}; } LoadAdscript.prototype = {startLoad: function () {var Script = document.createElement ('Script'), _this = this; if (script.readystate) {// IE Script.onReadyStateChange = function () {if (skrip.readystate == "dimuat" || script.readystate == "complete") {script.onReadyStAteChange = null; _this.finished (); }}; } else {// script.onload lain = 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 (skrip); }, finish: function () {document.write = this.dw; this.callback.apply (); }};Kode panggilan halaman:
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 ();Iklan Kode JS
//ad.jsdocument.write('<img src = "http://images.cnblogs.com/logo_small.gif"> '); // ad2.jsdocument.write (' <img src = "http://www.baidu.com/img/img/rc =" http://www.baidu.com/img/img/mg/boid/ " useMap = "#mp"> '); // ad3.jsdocument.write (' <img id = "hplogo" src = "http://www.google.com/images/srpr/logo3w.png"> ');Masalah dengan versi pertama adalah bahwa ketika beberapa file dipanggil, beberapa masalah akan muncul:
1. Karena kecepatan pemuatan file yang berbeda, beberapa mungkin dimuat terlebih dahulu dan beberapa mungkin dimuat kemudian, yang tidak berurutan, dan berkali -kali yang kita butuhkan adalah tertib. Misalnya, kita perlu memuat iklan di layar pertama terlebih dahulu.
2. Jika Anda ingin beberapa iklan, Anda perlu mengatur beberapa parameter sebelum pengaturan, seperti Google AdSense
Untuk menyelesaikan dua masalah ini, ini lebih lanjut dimodifikasi ke versi JS non-blocking akhir.
Kode Halaman HTML:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"/> <iteme> new_file </iteme> <script type = "text/javascript" src = "muat-cript.js"> </script> </head> <dev> <v div id = "msat-adript.js"> </script> </head> <god> <Div ID = "msat-cadrcript"> </Script> </head> <body> <Div ID = "msat-adript.js"> </script> </head> <body> <Div id id = "msat-adript"> </script> </head> </div <Div id = "msat-cadrap "msat-adwrap2"> </div> <script type = "text/javaScript"> loadscript.add ({url: 'ad.js', container: 'msat-adwrap', callback: function () {console.log ('msat-adwrap');}}). Add ({{{',', ',', ',', ',', ',', 'MSAT-ADWRAP');}). callback: function () {console.log ('msat-adwrap2');}}). add ({// google adsense url: 'http: //pagead2.googlesyndication.com/pagead/show_ads.js', container: 'msat-adwrap', init: init: {) {loader: 'msat-adwrap' " }). Execute (); </script> </body> </html>LoadScript.js Kode Sumber
/** * Non-blocking 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; this.containerObj = ( typeof container == 'string' ? document.getElementById(container) wadah); Script.onReadyStateChange = function () {if (script.readyState == "Loaded" || Script.ReadyState == "Complete") {Script.onReadyStatechange = NULL; Document.write Document.write = Function (ad) {var html = _this.containerobj.innerhtml; document.geteLementsbyTagname ('head') [0] .AppendChild (skrip); }, finish: 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)); kembalikan ini; }, execute: function () {if (adqueue.length> 0) {adqueue [0] .startload (); }}}};} ());