Bagaimana tepatnya <script defer = "defer"> bekerja?

Saya memiliki beberapa <script>elemen, dan kode di dalamnya tergantung pada kode di <script>elemen lain . Saya melihat deferatribut dapat berguna di sini karena memungkinkan blok kode ditunda dalam eksekusi.

Untuk mengujinya saya menjalankan ini di Chrome: http://jsfiddle.net/xXZMN/ .

<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>

Namun, itu peringatan 2 - 1 - 3. Kenapa tidak disiagakan 1 - 2 - 3?

DIPERBARUI: 2/19/2016

Anggap jawaban ini sudah usang. Lihat jawaban lain pada posting ini untuk informasi yang relevan dengan versi browser yang lebih baru.

Pada dasarnya, tunda memberitahu browser untuk menunggu "sampai siap" sebelum menjalankan javascript di blok skrip itu. Biasanya ini setelah DOM selesai memuat dan mendokumentasikan.readyState == 4

Atribut defer khusus untuk penjelajah internet. Di Internet Explorer 8, pada Windows 7 hasil yang saya lihat di halaman pengujian JS Fiddle Anda adalah, 1 - 2 - 3.

Hasil dapat bervariasi dari browser ke browser.

http://msdn.microsoft.com/en-us/library/ms533719(v=vs.85).aspx

Bertentangan dengan kepercayaan populer, IE mengikuti standar lebih sering daripada yang dibiarkan orang, pada kenyataannya atribut "penangguhan" didefinisikan dalam spesifikasi DOM Level 1 http://www.w3.org/TR/REC-DOM-Level-1/level -one-html.html

Definisi penangguhan W3C: http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer :

"Ketika disetel, atribut boolean ini memberikan petunjuk kepada agen pengguna bahwa skrip tidak akan menghasilkan konten dokumen apa pun (misalnya, tidak ada" document.write "dalam javascript) dan dengan demikian, agen pengguna dapat melanjutkan penguraian dan rendering."

Beberapa cuplikan dari spesifikasi HTML5: http://w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async

Atribut defer dan async tidak boleh ditentukan jika atribut src tidak ada.

Ada tiga mode yang mungkin dapat dipilih menggunakan atribut-atribut ini [async and defer]. Jika atribut async hadir, maka skrip akan dijalankan secara tidak sinkron, segera setelah tersedia. Jika atribut async tidak ada tetapi atribut penangguhan hadir, maka skrip dieksekusi ketika halaman telah selesai diuraikan. Jika tidak ada atribut yang hadir, maka skrip diambil dan dieksekusi segera, sebelum agen pengguna terus mengurai halaman.

Rincian pemrosesan yang tepat untuk atribut ini, untuk sebagian besar alasan historis, agak tidak sepele, melibatkan sejumlah aspek HTML. Persyaratan implementasi oleh karena itu tersebar di seluruh spesifikasi. Algoritme di bawah ini (pada bagian ini) menjelaskan inti dari pemrosesan ini, tetapi algoritma ini merujuk dan dirujuk oleh aturan parsing untuk tag awal dan akhir skrip dalam HTML, dalam konten asing, dan dalam XML, aturan untuk dokumen tersebut. Menulis () metode, penanganan skrip, dll.

Jika elemen memiliki atribut src, dan elemen memiliki atribut penangguhan, dan elemen tersebut telah ditandai sebagai "parser-insert", dan elemen tersebut tidak memiliki atribut async:

Elemen harus ditambahkan ke akhir daftar skrip yang akan mengeksekusi ketika dokumen telah selesai parsing yang terkait dengan dokumen parser yang membuat elemen.

Jawaban sebenarnya adalah: Karena Anda tidak dapat mempercayai penundaan.

Dalam konsep, tunda dan async berbeda sebagai berikut:

async memungkinkan skrip untuk diunduh di latar belakang tanpa memblokir. Kemudian, saat selesai mengunduh, rendering diblokir dan skrip itu dijalankan. Render dilanjutkan ketika skrip telah dieksekusi.

menunda melakukan hal yang sama, kecuali klaim untuk menjamin bahwa skrip mengeksekusi dalam urutan yang ditentukan pada halaman, dan bahwa mereka akan dieksekusi setelah dokumen selesai parsing. Jadi, beberapa skrip mungkin selesai diunduh kemudian duduk dan tunggu skrip yang diunduh nanti tetapi muncul di depan mereka.

Sayangnya, karena apa yang sebenarnya merupakan pertarungan kucing standar, definisi defer bervariasi dari satu spesifikasi ke yang lainnya, dan bahkan dalam spesifikasi terbaru tidak menawarkan jaminan yang berguna. Seperti yang diperlihatkan jawaban di sini dan masalah ini , browser menerapkan penundaan dengan berbeda:

• Dalam situasi tertentu beberapa browser memiliki bug yang menyebabkan deferskrip kehabisan urutan.
• Beberapa browser menunda DOMContentLoadedacara sampai setelah deferskrip dimuat, dan beberapa tidak.
• Beberapa browser taat deferpada <script>elemen dengan kode inline dan tanpa srcatribut, dan beberapa mengabaikannya.

Untungnya spec setidaknya menentukan bahwa async menimpa penundaan. Jadi, Anda dapat memperlakukan semua skrip sebagai async dan mendapatkan dukungan browser yang luas seperti:

<script defer async src="..."></script>

98% browser yang digunakan di seluruh dunia dan 99% di AS akan menghindari pemblokiran dengan pendekatan ini.

(Jika Anda perlu menunggu sampai dokumen selesai diuraikan, dengarkan acara DOMContentLoadedacara atau gunakan .ready()fungsi jQuery yang praktis . Anda tetap ingin melakukan ini agar dapat kembali dengan anggun di peramban yang tidak menerapkan defersama sekali.)

deferhanya dapat digunakan dalam <script>tag untuk penyertaan skrip eksternal . Oleh karena itu disarankan untuk digunakan dalam -tag <script>di <head>-seksi.

Karena atribut penangguhan hanya berfungsi dengan tag skrip dengan src. Menemukan cara untuk meniru penangguhan untuk skrip inline. Gunakan acara DOMContentLoaded.

<script defer src="external-script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    // Your inline scripts which uses methods from external-scripts.
});
</script>

Ini karena, peristiwa DOMContentLoaded diaktifkan setelah skrip yang ditangguhkan ditangguhkan sepenuhnya dimuat.

Atribut defer hanya untuk skrip eksternal (hanya boleh digunakan jika atribut src ada).

Harus juga dicatat bahwa mungkin ada masalah di IE <= 9 saat menggunakan script deferdalam situasi tertentu. Lebih lanjut tentang ini: https://github.com/h5bp/lazyweb-requests/issues/42

Lihat artikel yang luar biasa ini Menyelam dalam-dalam ke perairan keruh pemuatan skrip oleh pengembang Google Jake Archibald yang ditulis pada 2013.

Mengutip bagian yang relevan dari artikel itu:

Menunda

<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>

Spec mengatakan : Unduh bersama, jalankan secara berurutan tepat sebelum DOMContentLoaded. Abaikan "tunda" pada skrip tanpa "src".

IE <10 mengatakan : Saya mungkin menjalankan 2.js di tengah-tengah eksekusi 1.js. Bukankah itu menyenangkan ??

Browser berwarna merah mengatakan : Saya tidak tahu apa ini "penundaan", saya akan memuat skrip seolah-olah tidak ada.

Browser lain mengatakan : Oke, tapi saya mungkin tidak mengabaikan "menunda" pada skrip tanpa "src".

_{(Saya akan menambahkan bahwa versi awal pemicu Firefox DOMContentLoaded sebelum deferskrip selesai berjalan, menurut komentar ini .)}

Peramban modern tampaknya mendukung asyncdengan benar, tetapi Anda harus OK dengan skrip yang tidak berjalan dengan baik dan mungkin sebelum DOMContentLoaded.

Atribut Boolean ini diatur untuk menunjukkan ke browser bahwa skrip dimaksudkan untuk dieksekusi setelah dokumen diuraikan. Karena fitur ini belum diterapkan oleh semua browser utama lainnya, penulis tidak boleh berasumsi bahwa eksekusi skrip akan benar-benar ditangguhkan. Jangan pernah panggil document.write () dari skrip penundaan (karena Tokek 1.9.2, ini akan menerbangkan dokumen). Atribut defer tidak boleh digunakan pada skrip yang tidak memiliki atribut src. Sejak Gecko 1.9.2, atribut defer diabaikan pada skrip yang tidak memiliki atribut src. Namun, di Gecko 1.9.1 bahkan skrip inline ditangguhkan jika atribut defer diatur.

menunda bekerja dengan chrome, firefox, yaitu> 7 dan Safari

ref: https://developer.mozilla.org/en-US/docs/HTML/Element/script

Atribut defer adalah atribut boolean.

Saat ada, itu menentukan bahwa skrip dieksekusi ketika halaman telah selesai parsing.

Catatan: Atribut defer hanya untuk skrip eksternal (hanya boleh digunakan jika atribut src ada).

Catatan: Ada beberapa cara skrip eksternal dapat dijalankan:

Jika async ada: Skrip dieksekusi secara tidak serempak dengan sisa halaman (skrip akan dieksekusi saat halaman melanjutkan parsing) Jika async tidak ada dan tunda hadir: Skrip dijalankan ketika halaman telah selesai parsing Jika async atau defer tidak ada: Skrip diambil dan dieksekusi segera, sebelum browser melanjutkan penguraian halaman