Saya memiliki beberapa <script>
elemen, dan kode di dalamnya tergantung pada kode di <script>
elemen lain . Saya melihat defer
atribut 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
?
javascript
html
deferred-execution
pimvdb
sumber
sumber
defer
hanya valid ketika menentukansrc
. Ini mungkin menjadi alasan mengapa contoh Anda tidak berfungsi seperti yang diharapkan di sebagian besar browser.Jawaban:
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."
sumber
Beberapa cuplikan dari spesifikasi HTML5: http://w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async
sumber
defer
buruk . Jika Anda menggunakandefer
, Anda tidak bisa mengandalkan file skrip yang sedang dieksekusi secara berurutan di beberapa browser.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:
defer
skrip kehabisan urutan.DOMContentLoaded
acara sampai setelahdefer
skrip dimuat, dan beberapa tidak.defer
pada<script>
elemen dengan kode inline dan tanpasrc
atribut, 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:
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
DOMContentLoaded
acara atau gunakan.ready()
fungsi jQuery yang praktis . Anda tetap ingin melakukan ini agar dapat kembali dengan anggun di peramban yang tidak menerapkandefer
sama sekali.)sumber
defer
atribut tersebut sejak versi 15 , yang dirilis pada 2 Juni 2013 .defer
hanya dapat digunakan dalam<script>
tag untuk penyertaan skrip eksternal . Oleh karena itu disarankan untuk digunakan dalam -tag<script>
di<head>
-seksi.sumber
Karena atribut penangguhan hanya berfungsi dengan tag skrip dengan src. Menemukan cara untuk meniru penangguhan untuk skrip inline. Gunakan acara DOMContentLoaded.
Ini karena, peristiwa DOMContentLoaded diaktifkan setelah skrip yang ditangguhkan ditangguhkan sepenuhnya dimuat.
sumber
Atribut defer hanya untuk skrip eksternal (hanya boleh digunakan jika atribut src ada).
sumber
Harus juga dicatat bahwa mungkin ada masalah di IE <= 9 saat menggunakan
script defer
dalam situasi tertentu. Lebih lanjut tentang ini: https://github.com/h5bp/lazyweb-requests/issues/42sumber
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:
(Saya akan menambahkan bahwa versi awal pemicu Firefox DOMContentLoaded sebelum
defer
skrip selesai berjalan, menurut komentar ini .)Peramban modern tampaknya mendukung
async
dengan benar, tetapi Anda harus OK dengan skrip yang tidak berjalan dengan baik dan mungkin sebelum DOMContentLoaded.sumber
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
sumber
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
sumber