Di mana saya harus meletakkan tag <script> dalam markup HTML?

1488

Saat menyematkan JavaScript ke dokumen HTML, di mana tempat yang tepat untuk meletakkan <script>tag dan memasukkan JavaScript? Saya sepertinya ingat bahwa Anda tidak seharusnya menempatkan ini di <head>bagian, tetapi menempatkan di awal <body>bagian itu buruk juga, karena JavaScript harus diuraikan sebelum halaman ditampilkan sepenuhnya (atau sesuatu seperti itu). Hal ini tampaknya meninggalkan akhir dari <body>bagian sebagai tempat yang logis untuk <script>tag.

Jadi, di mana adalah tempat yang tepat untuk menempatkan <script>tag?

(Pertanyaan ini merujuk pada pertanyaan ini , di mana disarankan agar pemanggilan fungsi JavaScript harus dipindahkan dari <a>tag ke <script>tag. Saya secara khusus menggunakan jQuery, tetapi jawaban yang lebih umum juga sesuai.)

javascript jquery html mipadi
sumber
jika Anda juga hanya mencari solusi sederhana dan Anda menggunakan beberapa generator sisi server seperti Jekyll, saya sarankan untuk menyertakan skrip dengannya. jauh lebih sederhana!
cregox

Jawaban:

1864

Inilah yang terjadi ketika browser memuat situs web dengan <script>tag di atasnya:

  1. Ambil halaman HTML (mis. Index.html)
  2. Mulai parsing HTML
  3. Parser menemukan <script>tag yang mereferensikan file skrip eksternal.
  4. Browser meminta file skrip. Sementara itu, parser memblokir dan berhenti mem-parsing HTML lain di halaman Anda.
  5. Setelah beberapa saat skrip diunduh dan selanjutnya dieksekusi.
  6. Parser terus mem-parsing sisa dokumen HTML.

Langkah # 4 menyebabkan pengalaman pengguna yang buruk. Situs web Anda pada dasarnya berhenti memuat hingga Anda mengunduh semua skrip. Jika ada satu hal yang dibenci pengguna sedang menunggu sebuah situs web dimuat.

Mengapa ini bahkan terjadi?

Setiap skrip dapat menyisipkan HTML sendiri melalui document.write()atau manipulasi DOM lainnya. Ini menyiratkan bahwa parser harus menunggu sampai skrip telah diunduh & dieksekusi sebelum dapat dengan aman menguraikan sisa dokumen. Lagipula, skrip bisa memasukkan HTML-nya sendiri ke dalam dokumen.

Namun, sebagian besar pengembang JavaScript tidak lagi memanipulasi DOM saat dokumen dimuat. Sebagai gantinya, mereka menunggu hingga dokumen dimuat sebelum memodifikasinya. Sebagai contoh:

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>

Javascript:

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

Karena browser Anda tidak tahu my-script.js tidak akan mengubah dokumen sampai dokumen tersebut diunduh & dieksekusi, parser berhenti mengurai.

Rekomendasi kuno

Pendekatan lama untuk memecahkan masalah ini adalah dengan meletakkan <script>tag di bagian bawah Anda<body> , karena ini memastikan parser tidak diblokir sampai akhir.

Pendekatan ini memiliki masalah sendiri: browser tidak dapat mulai mengunduh skrip hingga seluruh dokumen diuraikan. Untuk situs web yang lebih besar dengan skrip & stylesheet besar, dapat mengunduh skrip sesegera mungkin sangat penting untuk kinerja. Jika situs web Anda tidak dimuat dalam 2 detik, orang akan pergi ke situs web lain.

Dalam solusi optimal, browser akan mulai mengunduh skrip Anda sesegera mungkin, sementara pada saat yang sama mem-parsing sisa dokumen Anda.

Pendekatan modern

Hari ini, browser mendukung asyncdandefer atribut pada skrip. Atribut ini memberi tahu browser bahwa aman untuk melanjutkan penguraian saat skrip sedang diunduh.

async

<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>

Skrip dengan atribut async dijalankan secara tidak sinkron. Ini berarti skrip dieksekusi segera setelah diunduh, tanpa memblokir browser sementara itu.
Ini menyiratkan bahwa skrip 2 dapat diunduh & dieksekusi sebelum skrip 1.

Menurut http://caniuse.com/#feat=script-async , 97,78% dari semua browser mendukung ini.

menunda

<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>

Skrip dengan atribut defer dijalankan secara berurutan (yaitu skrip pertama 1, lalu skrip 2). Ini juga tidak memblokir browser.

Tidak seperti skrip async, skrip penangguhan hanya dieksekusi setelah seluruh dokumen dimuat.

Menurut http://caniuse.com/#feat=script-defer , 97,79% dari semua browser mendukung ini. 98,06% mendukungnya setidaknya sebagian.

Catatan penting tentang kompatibilitas browser: dalam beberapa keadaan IE <= 9 dapat mengeksekusi skrip yang ditangguhkan rusak. Jika Anda perlu mendukung browser tersebut, baca ini dulu!

Kesimpulan

Canggih saat ini adalah menempatkan skrip ke dalam <head>tag dan menggunakan atribut asyncatau defer. Ini memungkinkan skrip Anda untuk diunduh secepatnya tanpa memblokir browser Anda.

Hal yang baik adalah bahwa situs web Anda masih harus memuat dengan benar pada 2% browser yang tidak mendukung atribut ini sementara mempercepat 98% lainnya.

Bart
sumber
63
Saya terkejut tidak ada yang mengutip penjelasan Google ... developers.google.com/speed/docs/insights/BlockingJS
Casey Falk
6
Saya tidak jelas tentang apa yang menyentuh DOM dan apa yang tidak. Bisakah Anda mengklarifikasi? Apakah aman melakukan async load pada sesuatu seperti jquery.js?
Doug
7
@ Doug Misalnya document.writeberoperasi pada dom. Pertanyaannya bukan apakah skrip memanipulasi dom, tetapi ketika itu terjadi. Selama semua manipulasi dom terjadi setelah domreadyperistiwa telah dipicu, Anda baik-baik saja. jQuery adalah perpustakaan, dan karena itu tidak - atau tidak seharusnya - memanipulasi dom dengan sendirinya.
Bart
24
Jawaban ini menyesatkan. Browser modern tidak berhenti mem-parsing ketika mereka mencapai tag skrip sinkron yang dapat mempengaruhi HTML, mereka hanya berhenti membuat / mengeksekusi, dan terus mem-parsing secara optimis untuk mulai mengunduh sumber daya lain yang mungkin akan diminta kemudian jika tidak ada HTML yang terpengaruh.
Fabio Beltramini
40
Mengapa atribut asyncdan defertidak digunakan di mana pun? Maksud saya, saya melihat banyak sumber HTML dari internet, dan saya tidak melihat asyncdan deferatribut di mana pun. ...?
john cj
239

Tepat sebelum tag penutup, seperti yang dinyatakan pada

http://developer.yahoo.com/performance/rules.html#js_bottom

Letakkan Script di Bawah

Masalah yang disebabkan oleh skrip adalah bahwa mereka memblokir unduhan paralel. Spesifikasi HTTP / 1.1 menyarankan agar peramban mengunduh tidak lebih dari dua komponen secara paralel per hostname. Jika Anda menayangkan gambar dari beberapa nama host, Anda bisa mendapatkan lebih dari dua unduhan agar terjadi secara paralel. Ketika skrip sedang mengunduh, peramban tidak akan memulai unduhan lainnya, bahkan pada nama host yang berbeda.

Cammel
sumber
7
Setuju dengan konsep dan penjelasannya. Tetapi apa yang terjadi jika pengguna mulai bermain dengan halaman tersebut. Misalkan saya memiliki dropdown AJAX yang akan mulai memuat setelah halaman muncul kepada pengguna tetapi ketika sedang memuat, pengguna mengkliknya! Dan bagaimana jika pengguna 'benar-benar tidak sabar' mengirimkan formulir?
Hemant Tank
9
@ Komentar lama Herman tetapi Anda dapat melakukan trik menonaktifkan bidang secara default kemudian mengaktifkannya menggunakan JS ketika DOM terisi penuh. Itulah yang tampaknya dilakukan Facebook saat ini.
novato
2
Baru saja menguji ini dengan chrome, untuk memeriksa apakah ini masih sama. Ini. Anda dapat memeriksa perbedaan waktu buka halaman browser Anda di sini. stevesouders.com/cuzillion
cypher
46
Jika ini praktik terbaik, mengapa stack overflow menyertakan semua tag skrip mereka di <head>? :-P
Philip
10
Dalam beberapa kasus, terutama di situs berat ajax, memuat di kepala sebenarnya dapat menghasilkan waktu pemuatan yang lebih cepat. Lihat: encosia.com/dont-let-jquerys-document-ready-slow-you-down (perhatikan bahwa fungsi "live ()" sudah usang dalam jquery, tetapi artikel masih berlaku dengan "on ()" atau " mendelegasikan "fungsi). Memuat di <head> mungkin juga diperlukan untuk menjamin perilaku yang benar seperti yang ditunjukkan oleh @Hermant. Akhirnya, modernizr.com/docs merekomendasikan menempatkan skripnya di <head> untuk alasan yang dijelaskan di situsnya.
Nathan
77

Tag skrip non-pemblokiran dapat ditempatkan di mana saja:

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>
  • async skrip akan dieksekusi secara tidak sinkron segera setelah tersedia
  • defer skrip dijalankan ketika dokumen telah selesai diuraikan
  • async defer skrip kembali ke perilaku menunda jika async tidak didukung

Script tersebut akan dijalankan secara tidak sinkron / setelah dokumen siap, yang berarti Anda tidak dapat melakukan ini:

<script src="jquery.js" async></script>
<script>jQuery(something);</script>
<!--
  * might throw "jQuery is not defined" error
  * defer will not work either
-->

Atau ini:

<script src="document.write(something).js" async></script>
<!--
  * might issue "cannot write into document from an asynchronous script" warning
  * defer will not work either
-->

Atau ini:

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
<!--
  * might throw "jQuery is not defined" error (no guarantee which script runs first)
  * defer will work in sane browsers
-->

Atau ini:

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
<!--
  * might not locate #header (script could fire before parser looks at the next line)
  * defer will work in sane browsers
-->

Karena itu, skrip asinkron menawarkan keuntungan ini:

  • Unduh sumber daya secara paralel :
    Browser dapat mengunduh stylesheet, gambar, dan skrip lainnya secara paralel tanpa menunggu skrip diunduh dan dieksekusi.
  • Independensi urutan sumber :
    Anda dapat menempatkan skrip di dalam kepala atau badan tanpa khawatir tentang pemblokiran (berguna jika Anda menggunakan CMS). Perintah eksekusi masih penting.

Dimungkinkan untuk menghindari masalah urutan eksekusi dengan menggunakan skrip eksternal yang mendukung panggilan balik. Banyak API JavaScript pihak ketiga sekarang mendukung eksekusi non-pemblokiran. Berikut adalah contoh memuat Google Maps API secara tidak sinkron .

Salman A
sumber
2
Ini adalah jawaban yang benar untuk hari ini - menggunakan pendekatan ini berarti lebih mudah untuk menjaga agar widget Anda tetap lengkap, tidak perlu melakukan hal yang <head>termasuk logika.
Daniel Sokolowski
1
Saya bingung mengapa Anda tidak dapat menggunakan asyncatau deferketika termasuk jQuery seperti yang Anda tentukan di blok kedua Anda: <script src="jquery.js" async></script>. Apakah Anda bisa menjelaskan alasannya? Saya pikir saya perlu memasukkan tag async untuk kinerja — sesuai jawaban yang diterima — agar halaman saya dapat memuat bahkan ketika jQuery masih memuat]. Terima kasih!
elbowlobstercowstand
3
@ siku 99% kali <script src=jquery.js>diikuti oleh $(function(){ ... })blok di suatu tempat di halaman. Pemuatan asinkron tidak menjamin bahwa jQuery akan dimuat pada saat browser mencoba mem-parsing blok-blok itu maka itu akan menghasilkan $ tidak kesalahan yang didefinisikan (Anda mungkin tidak mendapatkan kesalahan jika jQuery diambil dari cache). Saya menjawab pertanyaan tentang memuat jQuery secara tidak sinkron dan menjaga $(function(){ ... }). Saya akan melihat apakah saya dapat menemukannya, atau Anda dapat melihat pertanyaan ini: stackoverflow.com/q/14811471/87015
Salman A
1
@SalmanA Terima kasih! Ya, saya termasuk dalam 99% itu. Saya pertama-tama perlu jquerylib untuk memuat, lalu.js skrip saya yang tersisa . Ketika saya mendeklarasikan asyncatau deferpada jquerytag skrip lib, .jsskrip saya tidak berfungsi. Saya pikir $(function(){ ... })dilindungi itu — kurasa tidak. Solusi saat ini: Saya tidak menambahkan deferatau asyncpada jqueryskrip lib, tetapi saya menambahkan skrip asynctindak lanjut saya .js. Catatan: alasan saya melakukan semua ini adalah untuk membuat Google Page Speed ​​senang. Sekali lagi terima kasih! Saran lain dipersilahkan. (Atau tautan ke jawaban Anda sebelumnya). :)
elbowlobstercowstand
@elbow Lihat stackoverflow.com/a/21013975/87015 , itu hanya akan memberi Anda ide tetapi bukan solusi lengkap. Anda bisa mencari "pustaka loader jquery async".
Salman A
38

Nasihat standar, dipromosikan oleh Yahoo! Tim Performance yang luar biasa, adalah untuk menempatkan <script>tag di bagian akhir dokumen sehingga mereka tidak memblokir rendering halaman.

Tetapi ada beberapa pendekatan baru yang menawarkan kinerja yang lebih baik, seperti dijelaskan dalam jawaban ini tentang waktu buka file JavaScript Google Analytics:

Ada beberapa slide hebat oleh Steve Souders (pakar kinerja sisi klien) tentang:

  • Berbagai teknik untuk memuat file JavaScript eksternal secara paralel
  • efeknya pada waktu pemuatan dan rendering halaman
  • indikator "apa yang sedang berlangsung" seperti apa yang ditampilkan oleh browser (mis. 'memuat' di bilah status, kursor mouse jam pasir).
orip
sumber
25

Jika Anda menggunakan JQuery maka letakkan javascript di mana pun Anda menemukan yang terbaik dan gunakan $(document).ready()untuk memastikan bahwa semuanya dimuat dengan benar sebelum menjalankan fungsi apa pun.

Di samping catatan: Saya suka semua tag skrip saya di <head>bagian karena itu tampaknya menjadi tempat terbersih.

Andrew Hare
sumber
14
di kepala ... eh? <header>?
Dan Lugg
7
Perhatikan bahwa menggunakan $(document).ready()tidak berarti Anda dapat menempatkan JavaScript di mana pun Anda suka - Anda masih harus meletakkannya setelah <script src=".../jquery.min.js">tempat Anda memasukkan jQuery, sehingga $ada.
Rory O'Kane
2
Tidak optimal untuk menempatkan tag skrip di bagian <head> - ini akan menunda tampilan bagian halaman yang terlihat sampai skrip dimuat.
CyberMonk
Tidak, @Dan, headerelemen adalah bagian dari konten dokumen HTML, dan harus muncul satu atau lebih kali dalam tag head bodyelemen . The untuk meta-data dan data non-konten untuk dokumen. Saat ini, dengan deferdan asyncmerupakan tempat yang ideal untuk tag skrip. headerelemen hanya boleh berisi informasi yang menjelaskan bagian dokumen yang mengikutinya.
ProfK
1
@ProfK, Dan merujuk pada pertanyaan asli yang belum diedit ketika dia memposting ini lebih dari 4 tahun yang lalu. Seperti yang Anda lihat, pertanyaannya diedit setahun kemudian.
kojow7
18

Pendekatan modern pada 2019 menggunakan skrip jenis modul ES6 .

<script type="module" src="..."></script>

Secara default, modul dimuat secara tidak sinkron dan tertunda. yaitu Anda dapat menempatkannya di mana saja dan mereka akan memuat secara paralel dan mengeksekusi ketika halaman selesai memuat.

Perbedaan antara skrip dan modul dijelaskan di sini:

https://stackoverflow.com/a/53821485/731548

Eksekusi modul dibandingkan dengan skrip dijelaskan di sini:

https://developers.google.com/web/fundamentals/primers/modules#defer

Dukungan ditunjukkan di sini:

https://caniuse.com/#feat=es6-module

cquezel
sumber
info bagus untuk ditambahkan ke basis pengetahuan
Sagar
1
Hanya catatan bahwa ini tidak akan berfungsi jika Anda hanya mencoba hal-hal di sistem file lokal Anda tanpa server. Paling tidak di Chrome Anda mendapatkan kesalahan lintas asal mencoba memuat js dari HTML meskipun keduanya memiliki asal yang sama, sistem file Anda.
hippietrail
11

XHTML Tidak Akan Memvalidasi jika skrip berada di mana saja selain dalam elemen kepala. Ternyata itu bisa dimana-mana.

Anda dapat menunda eksekusi dengan sesuatu seperti jQuery sehingga tidak masalah di mana ia ditempatkan (kecuali untuk kinerja kecil yang hit selama parsing).

Allain Lalonde
sumber
1
XHTML akan divalidasi dengan tag skrip di badan, baik ketat maupun transisi. Namun tag gaya mungkin hanya ada di kepala.
I.Devries
11 
<script src="myjs.js"></script>
</body>

tag skrip harus selalu digunakan sebelum tubuh tertutup atau terbawah dalam file HTML .

maka Anda dapat melihat konten halaman terlebih dahulu sebelum memuat file js .

periksa ini jika memerlukan: http://stevesouders.com/hpws/rule-js-bottom.php

AmanKumar
sumber
2
Ini sebenarnya menjawab pertanyaan. Saya bertanya-tanya hampir semua contoh yang diposting tidak pernah memberikan konteks visual yang tepat dari "akhir halaman"
Ken Ingram
1
Jawaban ini sangat menyesatkan dan kemungkinan besar salah. Artikel di Google dan MDN menunjukkan bahwa JS sinkron (yang merupakan kasus di sini) selalu memblokir konstruksi dan penguraian DOM yang akan mengakibatkan keterlambatan render pertama. Oleh karena itu, Anda tidak dapat melihat konten halaman sampai file JS diambil dan selesai dieksekusi di mana pun Anda menempatkan file JS Anda di dokumen HTML selama itu sinkron
Lingaraju EV
Itu juga referensi poin yang dibuat pada 2009 dan tidak lagi relevan.
toxaq
7

Jawaban konvensional (dan diterima secara luas) adalah "di bagian bawah", karena kemudian seluruh DOM akan dimuat sebelum apa pun dapat mulai dijalankan.

Ada perbedaan pendapat, karena berbagai alasan, mulai dengan praktik yang tersedia untuk memulai eksekusi dengan sengaja dengan acara onload halaman.

dkretz
sumber
6

Tempat terbaik untuk meletakkan <script>tag adalah sebelum menutup </body>tag , jadi pengunduhan dan pengeksekusiannya tidak memblokir browser untuk menguraikan html dalam dokumen,

Juga memuat file js secara eksternal memiliki kelebihannya sendiri seperti itu akan di- cache oleh browser dan dapat mempercepat waktu pemuatan halaman , ini memisahkan kode HTML dan JavaScript dan membantu mengelola basis kode dengan lebih baik .

tetapi browser modern juga mendukung beberapa cara optimal lainnya seperti asyncdan deferuntuk memuat javascriptfile eksternal .

Async dan Defer

Biasanya eksekusi halaman HTML dimulai baris demi baris. Ketika elemen JavaScript eksternal ditemukan, parsing HTML dihentikan sampai JavaScript diunduh dan siap untuk dieksekusi. Eksekusi halaman normal ini dapat diubah menggunakan deferdan asyncatribut.

Defer

Ketika atribut defer digunakan, JavaScript diunduh parallelly dengan parsing HTML tetapi akan dieksekusi hanya setelah parsing HTML lengkap dilakukan.

<script src="/local-js-path/myScript.js" defer></script>

Async

Ketika atribut async digunakan, JavaScript diunduh segera setelah skrip ditemukan dan setelah unduhan, itu akan dieksekusi secara tidak sinkron (paralel) bersama dengan penguraian HTML.

<script src="/local-js-path/myScript.js" async></script>

Kapan harus menggunakan atribut mana

  • Jika skrip Anda independen dari skrip lain dan bersifat modular, gunakan async.
  • Jika Anda memuat skrip1 dan skrip2 async, keduanya akan berjalan
    sejajar dengan penguraian HTML, segera setelah mereka diunduh
    dan tersedia.
  • Jika skrip Anda bergantung pada skrip lain, gunakan defer untuk keduanya:
  • Ketika script1 dan script2 dimuat dalam urutan itu dengan defer , maka script1 dijamin untuk dieksekusi terlebih dahulu,
  • Kemudian script2 akan dieksekusi setelah script1 sepenuhnya dieksekusi.
  • Harus melakukan ini jika script2 tergantung pada script1.
  • Jika skrip Anda cukup kecil dan tergantung pada skrip jenis lain, asyncgunakan skrip Anda tanpa atribut dan letakkan di atas semua asyncskrip.

referensi: knowledgehills.com

Haritsinh Gohil
sumber
3

Tergantung, jika Anda memuat skrip yang diperlukan untuk menata halaman Anda / menggunakan tindakan di halaman Anda (seperti klik tombol) maka Anda lebih baik meletakkannya di atas. Jika gaya Anda adalah 100% CSS dan Anda memiliki semua opsi mundur untuk tindakan tombol maka Anda dapat meletakkannya di bagian bawah.

Atau hal terbaik (jika itu bukan masalah) adalah Anda dapat membuat kotak pemuatan modal, letakkan javascript di bagian bawah halaman Anda dan lenyapkan saat baris terakhir skrip Anda dimuat. Dengan cara ini Anda dapat menghindari pengguna menggunakan tindakan di halaman Anda sebelum skrip dimuat. Dan juga menghindari penataan yang tidak tepat.

ahmedmzl
sumber
3

Termasuk skrip di bagian akhir terutama digunakan di mana konten / gaya situs web akan ditampilkan terlebih dahulu.

termasuk skrip di kepala memuat skrip lebih awal dan dapat digunakan sebelum memuat seluruh situs web.

jika skrip dimasukkan akhirnya validasi akan terjadi hanya setelah pemuatan seluruh gaya dan desain yang tidak dihargai untuk situs web yang cepat tanggap.

Sanjeev S
sumber
2

Bergantung pada skrip dan penggunaannya, yang terbaik (dalam hal memuat halaman dan waktu rendering) mungkin adalah dengan tidak menggunakan tag <script> konvensional-per se, tetapi untuk secara dinamis memicu pemuatan skrip secara asinkron.

Ada beberapa teknik yang berbeda, tetapi yang paling mudah adalah menggunakan document.createElement ("script") ketika event window.onload dipicu. Kemudian skrip dimuat pertama ketika halaman itu sendiri telah dirender, sehingga tidak memengaruhi waktu pengguna harus menunggu halaman muncul.

Ini secara alami mensyaratkan bahwa skrip itu sendiri tidak diperlukan untuk rendering halaman.

Untuk informasi lebih lanjut, lihat posting skrip skrip async oleh Steve Souders (pembuat YSlow tetapi sekarang di Google).

stpe
sumber
2

  • Jika Anda masih sangat peduli tentang dukungan dan kinerja di IE <10, yang terbaik adalah SELALU membuat skrip Anda sebagai tag terakhir dari tubuh HTML Anda. Dengan begitu, Anda yakin bahwa sisa DOM telah dimuat dan Anda tidak akan memblokir dan merender.

  • Jika Anda tidak terlalu peduli lagi dengan IE <10, Anda mungkin ingin meletakkan skrip Anda di kepala dokumen Anda dan menggunakannya deferuntuk memastikan skrip tersebut hanya berjalan setelah DOM Anda dimuat ( <script type="text/javascript" src="path/to/script1.js" defer></script>). Jika Anda masih ingin kode Anda bekerja di IE <10, jangan lupa untuk membungkus kode Anda dalam window.onloadgenap!


sumber
Dalam jawaban yang diterima, ini disebut sebagai "rekomendasi kuno". Jika Anda masih bersungguh-sungguh, Anda mungkin harus membuat referensi untuk mendukungnya.
dakab
1

Script memblokir DOM memuat hingga dimuat dan dieksekusi.

Jika Anda menempatkan skrip di akhir <body>semua DOM memiliki peluang untuk memuat dan merender (halaman akan "menampilkan" lebih cepat).<script>akan memiliki akses ke semua elemen DOM tersebut.

Di sisi lain menempatkannya setelah <body>mulai atau di atas akan mengeksekusi skrip (di mana masih ada elemen DOM).

Anda termasuk jQuery yang berarti Anda dapat menempatkannya di mana pun Anda inginkan dan gunakan .ready ()

Szymon Toda
sumber
1

Saya pikir itu tergantung pada eksekusi halaman web. Jika halaman yang ingin Anda tampilkan tidak dapat ditampilkan dengan benar tanpa memuat JavaScript terlebih dahulu maka Anda harus memasukkan file JavaScript terlebih dahulu. Tetapi Jika Anda dapat menampilkan / merender halaman web tanpa terlebih dahulu mengunduh file JavaScript, maka Anda harus meletakkan kode JavaScript di bagian bawah halaman. Karena itu akan meniru pemuatan halaman yang cepat, dan dari sudut pandang pengguna sepertinya halaman itu memuat lebih cepat.

Amit Mhaske
sumber
1

Anda dapat menempatkan sebagian besar <script>referensi di akhir <body>,
Tapi Jika ada komponen aktif pada halaman Anda yang menggunakan skrip eksternal,
maka ketergantungannya (file js) harus didahulukan sebelum itu (idealnya di head tag).

Tech AG
sumber
1

Sebelum akhir tag tubuh untuk mencegah dan UI memblokir.

Anoop Gupta
sumber
-1

Di Akhir Dokumen HTML

Sehingga tidak akan mempengaruhi pemuatan dokumen HTML di browser pada saat eksekusi.

Mr_Blue
sumber
-1

Tempat terbaik untuk menulis JavaScriptkode Anda adalah di akhir dokumen setelah atau tepat sebelum </body>tag untuk memuat dokumen terlebih dahulu dan kemudian jalankan kode js.

<script> ... your code here ... </script>
</body>

Dan jika Anda menulis di JQuerybawah ini bisa di kepala dokumen dan itu akan dijalankan setelah dokumen dimuat:

<script>
$(document).ready(function(){
   //your code here...
});
</script>
nada diaa
sumber
itu melemparSyntaxError
Raz
Jawaban Anda tidak salah tetapi sangat perlu diperbarui.
Paul Carlton
-2

Lebih masuk akal bagi saya untuk memasukkan skrip setelah HTML. Karena sebagian besar waktu saya memerlukan Dom untuk memuat sebelum saya menjalankan skrip saya. Saya bisa meletakkannya di kepala tag tapi saya tidak suka semua overhead pendengar pemuatan Dokumen. Saya ingin kode saya pendek dan manis dan mudah dibaca.

Saya pernah mendengar versi lama safari aneh ketika menambahkan skrip Anda di luar tag kepala tapi saya katakan siapa yang peduli. Saya tidak tahu siapa pun yang menggunakan omong kosong tua itu, kan?

Pertanyaan yang bagus.

zachdyer
sumber
-6

Anda dapat menempatkan di mana Anda ingin skrip dan satu tidak lebih baik dari praktik lainnya.

situasinya adalah sebagai berikut:

Halaman memuat secara linear, "top-down", jadi jika Anda meletakkan skrip di kepala memastikan bahwa mulai memuat sebelum semuanya, sekarang, jika Anda memasukkannya ke dalam tubuh yang dicampur dengan kode dapat menyebabkan halaman dimuat dengan cara yang tidak sedap dipandang.

mengidentifikasi praktik yang baik tidak tergantung di mana.

untuk mendukung Anda, saya akan menyebutkan yang berikut:

Anda dapat menempatkan:

dan halaman akan dimuat secara linear

Halaman dimuat secara tidak sinkron dengan konten lain

konten halaman akan dimuat sebelum dan setelah selesai memuat skrip dimuat

praktik yang baik di sini adalah, kapan akan menerapkan masing-masing?

Saya harap saya telah membantu, apa pun hanya menjawab saya masalah ini.

Juan Miguel
sumber