Penjelasan terperinci tentang pemuatan dan pelaksanaan Javascript_Pengetahuan asas

Pertama sekali, saya ingin bercakap tentang pemuatan dan pelaksanaan Javascript. Secara umumnya, penyemak imbas mempunyai dua ciri utama untuk menjalankan Javascript: 1) ia dilaksanakan serta-merta selepas dimuatkan, 2) apabila dilaksanakan, ia akan menyekat kandungan halaman berikutnya (termasuk pemaparan halaman dan memuat turun sumber lain). Oleh itu, jika berbilang fail js diimport, maka untuk penyemak imbas, fail js ini dimuatkan secara bersiri dan dilaksanakan mengikut turutan.

Oleh kerana javascript mungkin mengendalikan pepohon DOM dokumen HTML, penyemak imbas biasanya tidak memuat turun fail js secara selari seperti mereka memuat turun fail css secara selari, kerana ini disebabkan oleh kekhususan fail js. Oleh itu, jika javascript anda mahu mengendalikan elemen DOM berikutnya, pada asasnya penyemak imbas akan melaporkan ralat yang mengatakan bahawa objek tidak dapat ditemui. Kerana apabila Javascript dilaksanakan, HTML seterusnya disekat, dan tiada nod DOM berikutnya dalam pepohon DOM. Jadi program melaporkan ralat.

Cara tradisional

Jadi, apabila anda menulis dalam kod tulis kod berikut:

Salin kod Kod adalah seperti berikut:

<script type="text/javascript"
src="http://coolshell.cn/asyncjs/alert.js"></script>

Secara asasnya, teg <skrip> di kepala akan menyekat pemuatan sumber seterusnya dan penjanaan keseluruhan halaman. Saya membuat contoh khas untuk anda lihat: Contoh 1. Nota: Terdapat hanya satu ayat dalam alert.js saya: alert("hello world"), yang memudahkan anda melihat cara javascript menyekat perkara berikut.

Jadi, anda tahu sebab banyak tapak web meletakkan javascript di penghujung halaman web, atau menggunakan acara seperti window.onload atau docmuemt ready.

Selain itu, kerana kebanyakan kod Javascript tidak perlu menunggu halaman, kami mempunyai fungsi pemuatan tak segerak. Jadi bagaimana kita memuatkan secara tak segerak?

kaedah dokumen.tulis

Jadi, anda mungkin berfikir bahawa document.write() boleh menyelesaikan masalah tanpa menyekat. Sudah tentu anda akan berfikir bahawa selepas document.write teg <skrip> anda boleh melaksanakan perkara berikut, yang betul. Ini benar untuk kod Javascript dalam teg skrip yang sama, tetapi untuk keseluruhan halaman, ini masih akan disekat. Berikut ialah kod ujian:

Salin kod Kod adalah seperti berikut:

<script type="text/javascript" language="javascript">
Fungsi loadjs(script_filename) {
         document.write('<' 'script language="javascript" type="text/javascript"');
           document.write(' src="' script_filename '">');
document.write('<' '/script' '>');
alert("loadjs() keluar...");
}
skrip var = 'http://coolshell.cn/asyncjs/alert.js';
Loadjs(skrip);
alert("loadjs() selesai!");
</skrip>
<script type="text/javascript" language="javascript">
alert("blok lain");
</skrip>

Apakah pada pendapat anda susunan makluman? Anda boleh mencubanya dalam pelayar yang berbeza. Berikut ialah halaman ujian yang ingin anda tutup: Contoh 2.

atribut penangguhan dan tak segerak skrip

IE telah menyokong teg tangguh sejak IE6, seperti:

Salin kod Kod adalah seperti berikut:

<script defer type="text/javascript" src="./alert.js" >
</skrip>

Untuk IE, teg ini akan menyebabkan IE memuat turun fail js secara selari dan menahan pelaksanaannya sehingga keseluruhan DOM dimuatkan (DOMContentLoaded <skrip> juga akan dilaksanakan mengikut susunan yang dipaparkan). untuk berlari. Perkara yang paling penting ialah selepas <skrip> ditambahkan untuk menangguhkan, ia tidak akan menyekat pemaparan DOM berikutnya. Tetapi kerana penangguhan ini hanya untuk IE, ia biasanya digunakan kurang.

HTML5 standard kami juga menambahkan atribut untuk pemuatan tak segerak javascript: async Tidak kira apa nilai yang anda berikan kepadanya, selagi ia muncul, ia akan mula memuatkan fail js secara tidak segerak. Walau bagaimanapun, pemuatan asynchronous async mempunyai masalah yang serius, iaitu, ia melaksanakan peraturan ketenteraan dengan setia "sejurus selepas memuatkan". Oleh itu, walaupun ia tidak menyekat pemaparan halaman, anda tidak boleh mengawalnya daripada pelaksanaannya. Anda boleh melihat contoh ini untuk merasakannya.

Pelayar yang menyokong teg async ialah: Firefox 3.6, Chrome 8.0, Safari 5.0, IE 10, Opera belum menyokongnya lagi (dari sini), jadi kaedah ini tidak begitu baik. Kerana tidak semua pelayar boleh melakukannya.

Penciptaan dinamik DOM

Kaedah ini mungkin yang paling biasa digunakan.

Salin kod Kod adalah seperti berikut:

function loadjs(script_filename) {
skrip var = document.createElement('skrip');
​ script.setAttribute('type', 'text/javascript');
​ script.setAttribute('src', script_filename);
​ script.setAttribute('id', 'coolshell_script_id');

​ script_id = document.getElementById('coolshell_script_id');
Jika(id_skrip){
           document.getElementsByTagName('head')[0].removeChild(script_id);
}
Document.getElementsByTagName('head')[0].appendChild(skrip);
}

skrip var = 'http://coolshell.cn/asyncjs/alert.js';
loadjs(skrip);

Kaedah ini hampir menjadi cara standard untuk memuatkan fail js secara tidak segerak Untuk demonstrasi kaedah ini, sila lihat: Contoh 3. Kaedah ini juga telah dieksploitasi oleh JSONP, iaitu, saya boleh menentukan skrip latar belakang (seperti PHP) untuk src skrip, dan PHP ini mengembalikan fungsi javascript yang parameternya ialah rentetan json, dan mengembalikan Call javascript kami yang telah ditetapkan. fungsi. Anda boleh lihat contoh ini: t.js (Contoh ini ialah contoh kecil panggilan ajax tak segerak yang saya minta di Weibo sebelum ini)

Muatkan js secara tak segerak atas permintaan

Contoh kaedah DOM di atas menyelesaikan masalah pemuatan asynchronous Javascript, tetapi ia tidak menyelesaikan masalah kami mahu ia dijalankan pada masa yang kami tetapkan. Oleh itu, kita hanya perlu mengikat kaedah DOM di atas kepada acara tertentu.

Contohnya:

Ikat pada peristiwa window.load - Contoh 4

Anda mesti membandingkan perbezaan pelaksanaan antara Contoh 4 dan Contoh 3. Saya secara khusus menggunakan javascript penonjolan kod dalam kedua-dua contoh untuk melihat pelaksanaan dan pelaksanaan skrip penonjolan kod Anda akan mengetahui perbezaannya berdasarkan pelaksanaan amaran saya .js)

Salin kod Kod adalah seperti berikut:

window.load = loadjs("http://coolshell.cn/asyncjs/alert.js")

Ikatan dengan acara tertentu - Contoh 5

Salin kod Kod adalah seperti berikut:

<p style="cursor: pointer" onclick="LoadJS()">Klik untuk memuatkan alert.js </p>

Contoh ini sangat mudah. Apabila anda mengklik pada elemen DOM, alert.js kami sebenarnya akan dimuatkan.

Lagi

Walau bagaimanapun, mengikat kepada acara tertentu nampaknya agak terlalu banyak, kerana js hanya akan dimuat turun sebenarnya apabila diklik, yang akan menjadi terlalu perlahan. Okay, di sini kita sampai kepada soalan muktamad kami - kami mahu memuat turun fail js secara tak segerak ke kawasan setempat pengguna, tetapi tidak melaksanakannya, hanya melaksanakannya apabila kami mahu melaksanakannya.

Alangkah baiknya jika kita mempunyai sesuatu seperti ini:

Salin kod Kod adalah seperti berikut:

var script = document.createElement("skrip");
script.noexecute = benar;
script.src = "alert.js";
document.body.appendChild(skrip);

//Kita boleh lakukan ini kemudian
script.execute();

Malangnya, ini hanyalah mimpi indah Hari ini Javascript kami masih agak primitif, dan "impian JS" ini masih belum direalisasikan.

Jadi, pengaturcara kami hanya boleh menggunakan kaedah penggodaman untuk melakukannya.

Sesetengah pengaturcara menggunakan jenis skrip bukan standard untuk cache javascript. Seperti:

Salin kod Kod adalah seperti berikut:

<script type=cache/script src="./alert.js"></script>

Disebabkan "cache/script", perkara ini tidak boleh dihuraikan oleh penyemak imbas sama sekali, jadi penyemak imbas tidak boleh melaksanakan alert.js sebagai javascript, tetapi ia perlu memuat turun fail js, supaya ia boleh diselesaikan. Sayang sekali bahawa webkit mematuhi piawaian HTML dengan ketat-untuk perkara yang anda tidak kenali, hanya padamkannya dan tidak berbuat apa-apa. Jadi, impian kami hancur sekali lagi.

Jadi, kita perlu menggodam sekali lagi, seperti cara kita bermain dengan imej pramuat bertahun-tahun yang lalu, kita boleh menggunakan teg objek (atau teg iframe), jadi kita mempunyai kod berikut:

Salin kod Kod adalah seperti berikut:

function cachejs(script_filename){
var cache = document.createElement('objek');
cache.data = nama fail_skrip;
​ cache.id = "coolshell_script_cache_id";
cache.width = 0;
cache.height = 0;
Document.body.appendChild(cache);
}

Kemudian, kita panggil fungsi ini pada penghujungnya. Sila lihat contoh yang berkaitan: Contoh 6

Tekan Ctrl Shit I dalam Chrome dan beralih ke halaman rangkaian Anda boleh melihat bahawa alert.js telah dimuat turun tetapi tidak dilaksanakan Kemudian kami akan menggunakan kaedah dalam Contoh 5 kerana terdapat cache pada bahagian penyemak imbas dan ia tidak akan dilaksanakan lagi. Muat turun alert.js daripada pelayan. Oleh itu, kelajuan pelaksanaan boleh dijamin.

Anda sepatutnya biasa dengan pramuat jenis ini. Anda juga boleh menggunakan Ajax, seperti:

Salin kod Kod adalah seperti berikut:

var xhr = XMLHttpRequest();
xhr.open('DAPAT', 'new.js');
xhr.send('');

Saya tidak akan memberitahu lebih lanjut di sini, saya juga tidak akan memberikan contoh. Anda boleh mencubanya sendiri.

Akhir sekali, izinkan saya menyebut dua js, ​​satu ialah ControlJS dan satu lagi dipanggil HeadJS, yang digunakan khas untuk memuatkan fail javascript secara tidak segerak.

Baiklah, ini semua kandungan saya harap selepas membacanya, anda boleh memahami pemuatan dan pelaksanaan Javascript, serta teknologi yang berkaitan. Pada masa yang sama, saya juga berharap semua pakar front-end akan memberi nasihat kepada anda!