Analisis pemuatan dan pelaksanaan skrip JavaScript dalam persekitaran penyemak imbas: tangguh dan ciri async

Ciri tangguh dan tak segerak dipercayai merupakan dua ciri yang kebanyakan pembangun JavaScript "biasa tetapi tidak biasa dengannya". dan kesan "skrip tak segerak". Walau bagaimanapun, mengambil penangguhan sebagai contoh, pembangun mungkin tidak semestinya mengetahui beberapa butiran, seperti: bilakah skrip dengan ciri penangguhan akan ditangguhkan untuk dilaksanakan sama ada skrip dalaman dan skrip luaran boleh menyokong penangguhan; selain pelaksanaan tertangguh, apakah ciri khasnya, dsb. Artikel ini menggabungkan beberapa artikel sedia ada dan perihalan dua ciri dalam dokumen MDN untuk menjalankan kajian dan ringkasan penangguhan dan async yang lebih komprehensif, dengan harapan dapat membantu pembangun menguasai kedua-dua ciri ini dengan lebih baik.

1 Pengenalan

Dalam "Analisis Pemuatan dan Pelaksanaan Skrip JavaScript dalam Persekitaran Pelayar: Urutan Pelaksanaan Kod" kami menyebut bahawa pelaksanaan kod JavaScript akan menyekat penghuraian dan pemaparan halaman serta memuat turun sumber lain . Sudah tentu, kerana JavaScript adalah bahasa berutas tunggal, yang bermaksud bahawa dalam keadaan biasa, kod JavaScript dalam halaman hanya boleh dilaksanakan mengikut urutan dari atas ke bawah Sudah tentu, seperti dalam " Analisis JavaScript Pemuatan dan Pelaksanaan Skrip dalam Persekitaran Penyemak Imbas Seperti yang kami analisis dalam "Jujukan Pelaksanaan ", dalam beberapa kes, seperti apabila memasukkan skrip melalui document.write atau memperkenalkan skrip melalui teknologi skrip dinamik, susunan pelaksanaan kod JavaScript tidak tidak semestinya mengikut perintah yang ketat dari atas ke bawah dan async juga yang kita panggil "situasi tidak normal".

Kami sering mengatakan bahawa pelaksanaan JavaScript adalah menyekat Dalam pembangunan sebenar, penyekatan yang biasanya paling kami bimbangkan dan penyekatan yang paling mempengaruhi pengalaman pengguna haruslah aspek berikut:

[1] Menyekat penghuraian dan pemaparan halaman

[2] Skrip permulaan halaman yang kami tulis (biasanya skrip terikat untuk mendengar acara DOMContentLoaded ini ialah skrip yang kami mahu laksanakan dahulu, kerana kami akan menulis kod yang paling berkaitan dengan interaksi pengguna). di sini.)

[3] Menyekat muat turun sumber luaran pada halaman (seperti gambar)

Jika kami mempunyai operasi skrip yang memakan masa, dan skrip ini menyekat tiga tempat yang kami nyatakan di atas, maka prestasi atau pengalaman pengguna halaman web ini akan menjadi sangat lemah.

Niat asal kedua-dua ciri penangguhan dan async juga adalah untuk menyelesaikan atau mengurangkan kesan penyekatan pada pengalaman halaman Mari kita menganalisis kedua-dua ciri ini terutamanya dari aspek berikut >

[1]Bilakah masa pelaksanaan skrip tertangguh atau tak segerak? Bagaimana pula dengan penyekatan halaman?

[2] Adakah kedua-dua skrip dalaman dan luaran mampu melambatkan atau pelaksanaan tak segerak?

[3] Sejauh manakah pelayar menyokong kedua-dua ciri ini? Adakah terdapat sebarang pepijat yang berkaitan?

[4] Adakah terdapat perkara lain yang perlu diberi perhatian apabila menggunakan skrip yang menggunakan kedua-dua ciri ini?

2 ciri tangguh

2.1 Mengenai masa pelaksanaan skrip penangguhan

Ciri tangguh ialah ciri lanjutan yang ditakrifkan dalam spesifikasi HTML4 Pada mulanya, ia hanya disokong oleh IE4 dan Firefox3.5 Kemudian, pelayar seperti Chrome turut menambah sokongan untuknya, menggunakan defer="defer". defer bermaksud kelewatan, yang bermaksud ia akan menangguhkan pelaksanaan skrip. Dalam keadaan biasa, skrip yang kami perkenalkan akan dimuat turun dan dilaksanakan dengan serta-merta Namun, dengan ciri tangguh, skrip tidak akan dilaksanakan serta-merta selepas dimuat turun, tetapi akan dilaksanakan selepas halaman dihuraikan. Mari kita lihat penjelasan standard HTML4 tentang penangguhan:

tunda: Apabila ditetapkan, atribut boolean ini memberikan petunjuk kepada ejen pengguna bahawa skrip tidak akan menjana sebarang kandungan dokumen (cth., tiada "document.write" dalam javascript) dan dengan itu, ejen pengguna boleh meneruskan penghuraian dan rendering.

Dalam erti kata lain, jika penangguhan ditetapkan, ia memberitahu ejen pengguna bahawa skrip ini tidak akan menghasilkan sebarang kandungan dokumen, supaya ejen pengguna boleh terus menghuraikan dan membuat persembahan. Mari kita lihat sekali lagi perihalan utama penangguhan dalam MDN:

tunda: Jika atribut async tidak ada tetapi atribut tangguh ada, maka skrip dilaksanakan apabila halaman telah selesai menghuraikan

Melalui takrifan dalam standard, kami boleh menjelaskan dengan jelas bahawa skrip tangguh tidak akan menyekat penghuraian halaman, tetapi akan menunggu sehingga penghuraian halaman selesai sebelum melaksanakannya, bagaimanapun, penangguhan yang memakan masa mungkin masih menyekat muat turun sumber luaran, kemudian Adakah ia akan menyekat acara DOMContentLoaded? Malah, skrip tangguh masih dilaksanakan sebelum acara DOMContentLoaded, jadi ia masih akan menyekat skrip dalam DOMContentLoaded. Kita boleh menggunakan angka berikut untuk membantu memahami masa pelaksanaan skrip tangguh:

Menurut definisi dalam standard, skrip dalaman tidak menyokong penangguhan, tetapi pelayar IE9 dan ke bawah menyediakan sokongan penangguhan untuk skrip dalaman.

2.2 menangguhkan sokongan penyemak imbas

Mari kita lihat sokongan penyemak imbas untuk ciri tangguh:

Terdapat pepijat dalam pelayar IE9 dan di bawah, yang akan diterangkan secara terperinci dalam DEMO nanti.

2.3 DEMO: Pengesahan fungsi ciri tangguh

Kami meniru kaedah yang digunakan oleh Olivier Rochard dalam "atribut penangguhan skrip" untuk mengesahkan fungsi atribut penangguhan:

Mula-mula kami menyediakan 6 skrip luaran:

1.js：

ujian = "Saya ketua skrip luaran n";

2.js

ujian = "Saya adalah skrip luaran badan";

3.js

ujian = "Saya adalah skrip luar bawah n";

tangguh1.js

ujian = "Saya mengetuai skrip kelewatan luaran n";

tunda2.js

ujian = "Saya skrip kelewatan luar badan n";

tunda3.js

ujian = "Saya adalah skrip kelewatan luaran bahagian bawah";

Kod dalam HTML ialah:

Dalam kod, untuk memudahkan pelaksanaan acara DOMContentLoaded, kami memperkenalkan jQuery (artikel kemudian akan memperkenalkan cara untuk melaksanakan sendiri DOMContentLoaded yang serasi Kemudian, kami memperkenalkan skrip kelewatan di kepala, di dalam badan dan di luar badan skrip dan skrip biasa, dan merekodkan status pelaksanaan setiap kod melalui rentetan global Mari kita lihat hasil pelaksanaan dalam setiap penyemak imbas:

IE7

IE9

IE10

CHROME

firefox

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>defer attribute test</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">var test = "";</script>
<script src="defer1.js" type="text/javascript" defer="defer"></script>
<script src="1.js" type="text/javascript"></script>
<script defer="defer">
test += "我是head延迟内部脚本\n";
</script>
<script>
test += "我是head内部脚本\n";
</script>
</head>
<body>
<button id="test">点击一下</button>
<script src="defer2.js" type="text/javascript" defer="defer"></script>
<script src="2.js" type="text/javascript"></script>
</body>
<script src="defer3.js" type="text/javascript" defer="defer"></script>
<script src="3.js" type="text/javascript"></script>
<script>
$(function(){
test += "我是DOMContentLoaded里面的脚本
";
})
window.onload = function(){
test += "我是window.onload里面的脚本
";
var button = document.getElementById("test");
button.onclick = function(){
alert(test);
}
}
</script>
</html>

Salin selepas log masuk

Saya adalah ketua skrip luaran Saya ialah skrip dalaman kepala

Saya ialah skrip luaran badan
Saya adalah skrip luaran bahagian bawah

Saya mengetuai skrip kelewatan luaran

Saya sedang menunda skrip dalaman

IE7	IE9	IE10	CHROME	firefox
我是head外部脚本我是head内部脚本我是body外部脚本我是底部外部脚本我是head外部延迟脚本我是head延迟内部脚本我是body外部延迟脚本我是底部外部延迟脚本我是DOMContentLoaded里面的脚本我是window.onload里面的脚本	我是head外部脚本我是head内部脚本我是body外部脚本我是底部外部脚本我是head外部延迟脚本我是head延迟内部脚本我是body外部延迟脚本我是底部外部延迟脚本我是DOMContentLoaded里面的脚本我是window.onload里面的脚本	我是head外部脚本我是head延迟内部脚本我是head内部脚本我是body外部脚本我是底部外部脚本我是head外部延迟脚本我是body外部延迟脚本我是底部外部延迟脚本我是DOMContentLoaded里面的脚本我是window.onload里面的脚本	我是head外部脚本我是head延迟内部脚本我是head内部脚本我是body外部脚本我是底部外部脚本我是head外部延迟脚本我是body外部延迟脚本我是底部外部延迟脚本我是DOMContentLoaded里面的脚本我是window.onload里面的脚本	<br />我是head外部脚本 <span style="color: rgb(255,0,0)">我是head延迟内部脚本</span> 我是head内部脚本我是body外部脚本我是底部外部脚本我是head外部延迟脚本我是body外部延迟脚本我是底部外部延迟脚本 <span style="color: rgb(255,0,0)">我是DOMContentLoaded里面的脚本我是window.onload里面的脚本</span> Salin selepas log masuk

Saya ialah skrip kelewatan luaran badan <🎜> Saya adalah skrip kelewatan luaran bahagian bawah <🎜> Saya ialah skrip dalam DOMContentLoaded<🎜> Saya ialah skrip dalam window.onload<🎜>

<🎜>Saya adalah ketua skrip luaran<🎜> Saya ialah skrip dalaman kepala<🎜> Saya ialah skrip luaran badan<🎜> Saya adalah skrip luaran bahagian bawah <🎜> Saya mengetuai skrip kelewatan luaran <🎜> Saya sedang menunda skrip dalaman<🎜> Saya ialah skrip kelewatan luaran badan <🎜> Saya adalah skrip kelewatan luaran bahagian bawah <🎜> Saya ialah skrip dalam DOMContentLoaded<🎜> Saya ialah skrip dalam window.onload<🎜>

<🎜>Saya adalah ketua skrip luaran<🎜> Skrip dalaman saya tertunda<🎜> Saya ialah skrip dalaman kepala<🎜> Saya ialah skrip luaran badan<🎜> Saya adalah skrip luaran bahagian bawah <🎜> Saya mengetuai skrip kelewatan luaran <🎜> Saya ialah skrip kelewatan luaran badan <🎜> Saya adalah skrip kelewatan luaran bahagian bawah <🎜> Saya ialah skrip dalam DOMContentLoaded<🎜> Saya ialah skrip dalam window.onload<🎜>

<🎜>

从输出的结果中我们可以确定，只有IE9及以下浏览器支持内部延迟脚本，并且defer后的脚本都会在DOMContentLoaded事件之前触发，因此也是会堵塞DOMContentLoaded事件的。

2.4 DEMO：IE<=9的defer特性bug

从2.3节中的demo可以看出，defer后的脚本还是能够保持执行顺序的，也就是按照添加的顺序依次执行。而在IE<=9中，这个问题存在一个bug：假如我们向文档中增加了多个defer的脚本，而且之前的脚本中有appendChild，innerHTML，insertBefore，replaceChild等修改了DOM的接口调用，那么后面的脚本可能会先于该脚本执行。可以参考github的issue：https://github.com/h5bp/lazyweb-requests/issues/42

我们通过DEMO验证一下，首先修改1.js的代码为(这段代码只为模拟，事实上这段代码存在极大的性能问题)：

document.body.innerHTML = "

我是后来加入的