Pertama -tama, saya ingin berbicara tentang pemuatan dan pelaksanaan JavaScript. Secara umum, browser memiliki dua fitur utama untuk operasi JavaScript: 1) dieksekusi segera setelah pemuatan, 2) akan memblokir konten berikutnya dari halaman (termasuk rendering halaman dan pengunduhan sumber daya lainnya) selama pelaksanaan. Oleh karena itu, jika beberapa file JS diperkenalkan, maka untuk browser, file JS ini dimuat secara serial dan dieksekusi secara berurutan.
Karena JavaScript dapat mengoperasikan pohon DOM dari dokumen HTML, browser umumnya tidak mengunduh file CSS secara paralel seperti unduhan paralel, karena ini disebabkan oleh kekhasan file JS. Jadi, jika JavaScript Anda ingin mengoperasikan elemen DOM berikutnya, pada dasarnya, browser akan melaporkan kesalahan yang mengatakan bahwa objek tidak dapat ditemukan. Karena ketika JavaScript dieksekusi, HTML di belakang diblokir, dan tidak ada node DOM di belakang pohon DOM. Jadi program ini dilaporkan sebagai kesalahan.
Cara tradisional
Jadi, saat Anda menulis kode berikut dalam kode:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript"
src = "http://coolshell.cn/asyncjs/alert.js"> </script>
Pada dasarnya, tag <script> di kepala akan memblokir pemuatan sumber daya berikutnya dan generasi seluruh halaman. Saya telah membuat contoh khusus Anda dapat melihat: Contoh 1. Catatan: Hanya ada satu kalimat dalam peringatan saya.
Jadi, Anda tahu mengapa banyak situs web menempatkan JavaScript di akhir halaman web, baik menggunakan acara seperti Window.onload atau DocMuemt Ready.
Selain itu, karena sebagian besar kode JavaScript tidak perlu menunggu halaman, kami memuat fungsi secara tidak sinkron. Jadi bagaimana kita memuat secara asinkron?
Metode Document.Write
Jadi, Anda mungkin berpikir Document.write () dapat menyelesaikan masalah tidak memblokir. Tentu saja Anda akan berpikir bahwa setelah dokumen itu. Tag <script> dapat dieksekusi, hal -hal berikut dapat dieksekusi, yang benar. Ini berlaku untuk kode JavaScript dalam tag skrip yang sama, tetapi untuk seluruh halaman, ini masih akan memblokir. Ini kode uji:
Salinan kode adalah sebagai berikut:
<type script = "text/javascript" bahasa = "javascript">
function loadjs (script_filename) {
Document.write ('<' + 'Script Language = "JavaScript" type = "Text/JavaScript"');
document.write ('src = "' + script_filename + '">');
document.write ('<'+'/script'+'>');
alert ("Loadjs () Exit ...");
}
var skrip = 'http://coolshell.cn/asyncjs/alert.js';
loadjs (skrip);
alert ("Loadjs () selesai!");
</script>
<type script = "text/javascript" bahasa = "javascript">
peringatan ("blok lain");
</script>
Menurut Anda apa urutan peringatannya? Anda dapat mencobanya di browser yang berbeda. Berikut adalah halaman uji yang ingin Anda tutup: Contoh 2.
Menunda dan async properti dari skrip
IE telah mendukung tag tundukan sejak IE6, seperti:
Salinan kode adalah sebagai berikut:
<skrip tundukan type = "text/javascript" src = "./ waspada.js">
</script>
Untuk IE, tag ini akan memungkinkan IE untuk mengunduh file JS secara paralel dan menahan eksekusi mereka sampai seluruh pemuatan DOM selesai (DOMContentloaded). Multiple Disper <script> juga akan berjalan dalam urutan yang muncul ketika dieksekusi. Yang paling penting adalah bahwa setelah tunduk ditambahkan ke <script>, itu tidak akan memblokir rendering DOM berikutnya. Namun, karena penundaan ini hanya digunakan untuk IE, umumnya digunakan lebih sedikit.
HTML5 standar kami juga menambahkan atribut yang memuat JavaScript secara asinkron: async. Tidak peduli apa nilai yang Anda tetapkan untuk itu, selama itu muncul, ia mulai memuat file JS secara tidak sinkron. Namun, pemuatan async akan memiliki masalah serius, yaitu, ia dengan setia mengimplementasikan "eksekusi segera setelah pemuatan", jadi meskipun tidak memblokir rendering halaman, Anda tidak dapat mengontrol urutan dan waktu eksekusi. Anda dapat melihat contoh ini untuk mengalaminya.
Browser yang mendukung tag async adalah: Firefox 3.6+, Chrome 8.0+, Safari 5.0+, IE 10+, Opera tidak mendukungnya (dari sini), jadi metode ini juga tidak terlalu bagus. Karena tidak semua browser dapat melakukannya.
Buat DOM secara dinamis
Metode ini mungkin yang paling banyak digunakan.
Salinan kode adalah sebagai berikut:
function loadjs (script_filename) {
var skrip = document.createElement ('Script');
script.setAttribute ('type', 'text/javascript');
script.setAttribute ('src', script_filename);
script.setAttribute ('id', 'coolshell_script_id');
script_id = document.geteLementById ('coolshell_script_id');
if (script_id) {
document.geteLementsbyTagname ('head') [0] .removechild (script_id);
}
document.geteLementsbyTagname ('head') [0] .AppendChild (skrip);
}
var skrip = 'http://coolshell.cn/asyncjs/alert.js';
loadjs (skrip);
Metode ini hampir menjadi cara asinkron standar untuk memuat file JS. Untuk demonstrasi metode ini, silakan merujuk ke: Contoh 3. Metode ini juga diputar dengan hal -hal JSONP, yaitu, saya dapat menentukan skrip latar belakang (seperti PHP) untuk skrip SRC, dan PHP ini mengembalikan fungsi JavaScript yang parameternya adalah string JSON, yang kembali untuk memanggil fungsi JavaScript yang telah ditentukan sebelumnya. Anda dapat melihat contoh ini: T.JS (Contoh ini adalah contoh kecil dari panggilan AJAX asinkron yang saya kumpulkan di Weibo sebelumnya)
Memuat JS secara tidak sinkron sesuai permintaan
Contoh metode DOM di atas memecahkan masalah pemuatan JavaScript asinkron, tetapi tidak menyelesaikan masalah yang kami inginkan pada saat yang kami tentukan. Jadi, kita hanya perlu mengikat metode DOM di atas ke acara tertentu.
Misalnya:
Terikat ke Window.Load Event - Contoh 4
Anda harus membandingkan perbedaan dalam eksekusi antara Contoh 4 dan Contoh 3. Dalam kedua contoh, saya khususnya menggunakan JavaScript dengan menyorot kode untuk melihat eksekusi skrip dengan penyorotan kode dan eksekusi peringatan saya. Anda akan tahu bedanya)
Salinan kode adalah sebagai berikut:
window.load = loadjs ("http://coolshell.cn/asyncjs/alert.js")
Terikat dengan acara tertentu - Contoh 5
Salinan kode adalah sebagai berikut:
<p style = "kursor: pointer" onclick = "loadjs ()"> klik untuk memuat peringatan.js </p>
Contoh ini sangat sederhana. Hanya ketika Anda mengklik elemen DOM, peringatan kami akan dimuat.
Lagi
Namun, mengikat ke acara tertentu tampaknya sedikit lulus, karena unduhan JS yang sebenarnya hanya akan dilakukan saat mengklik, yang akan terlalu lambat lagi. Oke, di sini kita harus melempar masalah utama kita - kita ingin mengunduh file JS secara tidak sinkron ke area lokal pengguna, tetapi tidak menjalankannya, hanya jika kita ingin menjalankannya.
Akan lebih bagus jika kita memiliki metode berikut:
Salinan kode adalah sebagai berikut:
var skrip = document.createElement ("Script");
script.noExecute = true;
script.src = "alert.js";
document.body.appendChild (skrip);
// kita bisa melakukan ini nanti
script.execute ();
Sayangnya, ini hanya mimpi yang indah. Hari ini JavaScript kami masih relatif primitif, dan "mimpi JS" ini belum terwujud.
Oleh karena itu, programmer kami hanya dapat menggunakan hack untuk melakukannya.
Beberapa programmer menggunakan tipe skrip non-standar untuk cache javascript. menyukai:
Salinan kode adalah sebagai berikut:
<type skrip = cache/skrip src = "./ alert.js"> </script>
Karena "Cache/Script", benda ini tidak dapat diuraikan oleh browser sama sekali, sehingga browser tidak dapat mengeksekusi peringatan. Sayangnya, WebKit secara ketat mengikuti standar HTML - untuk hal -hal yang tidak diakui seperti itu, mereka akan secara langsung menghapusnya dan tidak melakukan apa pun. Jadi, impian kami hancur lagi.
Jadi, kita perlu meretasnya sedikit lagi. Sama seperti n yang diputar gambar preload bertahun -tahun yang lalu, kita dapat menggunakan tag objek (atau tag iframe), jadi kita memiliki kode berikut:
Salinan kode adalah sebagai berikut:
fungsi cacheejs (script_filename) {
var cache = document.createElement ('objek');
cache.data = script_filename;
cache.id = "coolshell_script_cache_id";
cache.width = 0;
cache.height = 0;
Document.Body.AppendChild (Cache);
}
Kemudian, kami menyebut fungsi ini di akhir. Silakan lihat contoh terkait: Contoh 6
Tekan Ctrl+Shit+I di bawah Chrome, beralih ke halaman jaringan, dan Anda dapat melihat bahwa Alert.js telah diunduh tetapi belum dieksekusi. Kemudian kami menggunakan metode Contoh 5, karena sisi browser memiliki cache, Alert.js tidak akan lagi diunduh dari server. Oleh karena itu, kecepatan eksekusi dapat dijamin.
Anda harus terbiasa dengan preload semacam ini. Anda juga dapat menggunakan metode AJAX, seperti:
Salinan kode adalah sebagai berikut:
var xhr = xmlhttpRequest baru ();
xhr.open ('get', 'new.js');
xhr.send ('');
Saya tidak akan mengatakan lebih banyak dan memberikan contoh di sini. Anda dapat mencobanya sendiri.
Akhirnya, mari kita sebutkan dua JS, satu adalah kontrol dan yang lainnya adalah headjs, yang secara khusus digunakan untuk membuat file javascript beban asinkron.
Oke, ini semua konten. Saya harap Anda dapat memiliki pemahaman tentang pemuatan dan eksekusi JavaScript, serta teknologi terkait setelah membacanya. Pada saat yang sama, saya juga berharap bahwa semua ahli front-end akan memberi Anda nasihat!