1. Analisis Kode Periklanan
Banyak sistem iklan pihak ketiga menggunakan Document.write untuk memuat iklan, seperti tautan iklan JavaScript berikut.
Salinan kode adalah sebagai berikut:
<type skrip = "text/javascript" src = "http://gg.5173.com/adpolestar/5173/
; ap = 2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc; ct = js; pu = 5173;/? "> </script>
Permintaan JavaScript ini mengembalikan sepotong kode seperti ini:
Salinan kode adalah sebagai berikut:
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 'target =' _ blank '> <img src ='" +
"http://html.5173cdn.com/market/yunyinga/xly132.gif '" +
"Border = '0' /> </a>");
Metode pemuatan semacam ini yang tampaknya sedikit 2, tetapi Anda tidak dapat memodifikasinya karena ini adalah pihak ketiga. Selain itu, kode telah menambahkan fungsi statistik. Tautan iklan JavaScript di atas akan dihitung sekali setiap kali diminta. Kode yang dihasilkan juga memiliki fungsi statistik klik, yang berarti harus dimuat dengan cara ini.
Document.write disinkronkan selama rendering halaman. Anda harus menunggu sampai kode JavaScript diunduh dan Document.write dieksekusi sebelum merender konten berikut. Jika ada banyak iklan, itu akan menyebabkan halaman diblokir, terutama jika beberapa iklan dengan ukuran gambar yang lebih besar dimasukkan pada layar pertama halaman. Situasi pemblokiran akan sangat jelas dan serius, yang akan membuat pengguna merasa bahwa halaman web Anda sangat lambat.
2. Menulis ulang dokumen.write
Untuk menghindari penyumbatan, metode dokumen. Penulis tidak dapat dieksekusi selama rendering halaman. Anda harus menemukan cara untuk membuat kode iklan JavaScript dieksekusi setelah pohon DOM siap. Namun, setelah pohon DOM siap, seluruh halaman akan diserahkan kembali, yang tidak dimungkinkan. Meskipun Document.Write adalah metode browser asli, Anda juga dapat menyesuaikan metode untuk menimpa metode asli. Sebelum kode iklan JavaScript dimuat, tulis ulang dokumen.write, tunggu sampai dimuat dan dieksekusi sebelum mengubahnya kembali.
3. Tunda Memuat Kode JavaScript
Langkah kunci di atas adalah menunda memuat kode JavaScript. Bagaimana cara mengimplementasikannya? Pertama cobalah untuk menulis ulang atribut tipe skrip, seperti mengatur tipe ke properti khusus "Type/Cache", tetapi dengan cara ini, sebagian besar browser (Chrome tidak akan mengunduh) masih akan mengunduh kode ini, tetapi tidak akan menjalankannya. Mengunduh sepotong kode seperti itu selama rendering halaman masih akan diblokir. Menulis ulang jenis skrip tidak dapat mencapai pemuatan yang benar -benar tertunda. Paling -paling, itu hanya dapat memuat tetapi tidak dijalankan, dan ada masalah kompatibilitas.
Masukkan tag skrip ke dalam tag TextArea dan baca konten TextArea saat perlu dimuat. Dengan cara ini, Anda dapat mewujudkan penundaan pemuatan skrip yang sebenarnya. Metode ini berkat solusi Bigrender Yu Bo (di luar dinding).
Salinan kode adalah sebagai berikut:
<div>
<TextArea style = "Display: None">
<type skrip = "text/javascript" src = "http://gg.5173.com/adpolestar/5173/
; ap = 2ebe5681_1ba3_4663_fa3f_e73d2b83fbdc; ct = js; pu = 5173;/? "> </script>
</textarea>
</div>
Tunda memuat skrip dan tulis ulang dokumen.write. Berikut ini adalah implementasi kode:
Salinan kode adalah sebagai berikut:
/**
* Menulis ulang dokumen.write untuk mengimplementasikan skrip pemuatan yang tidak memblokir
* @param {DOM Object} Elemen TextArea
*/
var loadscript = function (elem) {
var url = elem.value.match (/src = "([/s/s]*?)"/i) [1],
Parent = elem.parentnode,
// cache dokumen asli.write
docwrite = document.write,
// Buat skrip baru untuk dimuat
Script = Document.CreateElement ('Script'),
head = document.head ||
Document.getElementsByTagname ('head') [0] ||
Document.DocumentElement;
// Tulis ulang dokumen.write
document.write = function (teks) {
parent.innerHtml = teks;
};
script.type = 'Text/JavaScript';
script.src = url;
script.onError =
script.onload =
Script.onReadyStateChange = function (e) {
E = E || window.event;
if (! script.readystate ||
/Loaded|clete/.test(script.readyState) ||
E === 'Kesalahan'
) {
// Kembalikan dokumen asli.write
document.write = docwrite;
head.removechild (skrip);
// uninstall acara dan lepaskan referensi dom
// Cobalah untuk menghindari kebocoran memori
head =
induk =
elem =
skrip =
script.onError =
script.onload =
script.onreadystatechange = null;
}
}
// Muat skrip
head.insertbefore (skrip, head.firstchild);
};
4. Versi yang disempurnakan dari pemuatan penundaan gambar
Dapatkah lebih lanjut dioptimalkan dengan mengimplementasikan pemuatan malas yang tidak diblokir dari kode iklan JavaScript? Jika iklan tidak muncul di layar pertama, dapatkah digunakan untuk menunda beban seperti pemuatan gambar penundaan biasa? Jawabannya adalah ya. Saya memperluas plug-in pemuatan malas untuk gambar yang saya tulis sebelumnya, dan mengubah metode pemuatan gambar asli (ganti SRC) ke metode LoadScript di atas untuk mencapainya. Tentu saja, modifikasi seperti itu masih akan bermasalah. Jika ada beberapa gambar dan muat dilakukan secara bersamaan, dan dokumen. Penulisan adalah metode global, itu tidak dijamin tidak mempengaruhi B ketika memuat A. Mereka harus dimuat satu per satu, sehingga B hanya dapat dimuat setelah memuat A.
V. Kontrol Antrian
Agar kode iklan JavaScript dimuat secara berurutan, antrian diperlukan untuk mengontrol pemuatan. Jadi kode kontrol antrian sederhana berikut juga tersedia:
Salinan kode adalah sebagai berikut:
var loadqueue = [];
// Bergabunglah dengan daftar
var queue = function (data) {
loadqueue.push (data);
if (loadqueue [0]! == 'runing') {
dequeue ();
}
};
// delist
var dequeue = function () {
var fn = loadqueue.shift ();
if (fn === 'runing') {
fn = loadqueue.shift ();
}
if (fn) {
loadqueue.unshift ('runing');
fn ();
}
};
Silakan merujuk ke artikel perbandingan untuk pemuatan penundaan gambar: http://www.vevb.com/article/50685.htm