Pertanyaan Di mana saya harus meletakkan tag

Ketika menanamkan JavaScript dalam dokumen HTML, di mana tempat yang tepat untuk meletakkannya <script> tag dan termasuk JavaScript? Saya ingat bahwa Anda tidak seharusnya menempatkan ini di <head> bagian, tetapi menempatkan pada awal <body> Bagian juga buruk, karena JavaScript harus diuraikan sebelum halaman dirender sepenuhnya (atau sesuatu seperti itu). Ini sepertinya meninggalkan akhir dari <body> bagian sebagai tempat yang logis untuk <script> tag.

Jadi dimana aku s tempat yang tepat untuk meletakkan <script> tag?

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


1154
2018-01-12 18:15


asal


Jawaban:


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

  1. Ambil halaman HTML (misalnya index.html)
  2. Mulai parsing HTML
  3. Parser menemui a <script> tag mereferensikan file skrip eksternal.
  4. Browser meminta file skrip. Sementara itu, parser memblokir dan berhenti menguraikan HTML lain di halaman Anda.
  5. Setelah beberapa waktu skrip diunduh dan kemudian dieksekusi.
  6. Parser terus menguraikan sisa dokumen HTML.

Langkah # 4 menyebabkan pengalaman pengguna yang buruk. Situs web Anda pada dasarnya berhenti memuat sampai Anda mengunduh semua skrip. Jika ada satu hal yang membuat pengguna benci itu menunggu situs web dimuat.

Mengapa ini terjadi?

Setiap skrip dapat memasukkan HTML-nya sendiri melalui document.write() atau manipulasi DOM lainnya. Ini berarti bahwa parser harus menunggu hingga skrip telah diunduh & dijalankan sebelum dapat mengurai sisa dokumen dengan aman. Lagipula, naskahnya bisa telah memasukkan HTML-nya sendiri di dokumen.

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

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script type="text/javascript" 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 peramban Anda tidak mengetahui skrip saya.js tidak akan memodifikasi dokumen sampai dokumen itu diunduh & dijalankan, parser berhenti mengurai.

Rekomendasi kuno

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

Pendekatan ini memiliki masalahnya sendiri: browser tidak dapat mulai mengunduh skrip sampai seluruh dokumen diurai. 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 membuka situs web lain.

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

Pendekatan modern

Hari ini, browser mendukung async dan defer atribut pada skrip. Atribut ini memberi tahu browser itu aman untuk melanjutkan penguraian sementara skrip sedang diunduh.

async

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

Skrip dengan atribut async dieksekusi secara asinkron. Ini berarti skrip dijalankan segera setelah diunduh, tanpa memblokir browser untuk sementara.
Ini menyiratkan bahwa dimungkinkan untuk skrip 2 diunduh & dijalankan sebelum skrip 1.

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

menunda

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

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

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

Menurut http://caniuse.com/#feat=script-defer, 94,59% dari semua browser mendukung ini. 94,92% 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, silakan baca ini pertama!

Kesimpulan

Keadaan mutakhir saat ini adalah meletakkan skrip di <head> tag dan gunakan async atau defer atribut. Ini memungkinkan skrip Anda diunduh secepatnya tanpa memblokir peramban Anda.

Hal yang baik adalah situs web Anda masih harus memuat dengan benar pada 6% dari browser yang tidak mendukung atribut ini sementara mempercepat 94% lainnya.


1464
2018-06-05 21:20



Tepat sebelum tag penutup tubuh, seperti yang dinyatakan

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

Letakkan Naskah di Bawah

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


218
2018-01-12 18:18



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 dijalankan secara asynchronous segera setelah tersedia
  • defer skrip dijalankan ketika dokumen telah selesai diurai
  • async defer skrip kembali ke perilaku penundaan jika async tidak didukung

Skrip semacam itu akan dijalankan secara asinkron / setelah dokumen siap, yang artinya 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 asynchronous menawarkan keuntungan ini:

  • Pengunduhan sumber daya secara paralel:
    Peramban dapat mengunduh stylesheet, gambar, dan skrip lain secara paralel tanpa menunggu skrip untuk diunduh dan dijalankan.
  • Independensi urutan sumber:
    Anda dapat menempatkan skrip di dalam kepala atau badan tanpa perlu khawatir memblokir (berguna jika Anda menggunakan CMS). Urutan eksekusi masih penting.

Mungkin untuk menghindari masalah urutan eksekusi dengan menggunakan skrip eksternal yang mendukung callback. Banyak API JavaScript pihak ketiga sekarang mendukung eksekusi non-blocking. Berikut ini contohnya memuat Google Maps API secara asinkron.


56
2018-02-06 11:19



Saran standar, dipromosikan oleh Yahoo! Tim Kinerja yang luar biasa, adalah untuk menempatkan <script> tag di ujung badan dokumen sehingga mereka tidak memblokir render halaman.

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

ada beberapa slide besar oleh Steve Souders (ahli kinerja sisi-klien) tentang:

  • Teknik yang berbeda untuk memuat file JavaScript eksternal secara paralel
  • efeknya pada waktu loading dan rendering halaman
  • indikator "dalam progres" apa yang ditampilkan browser (mis. 'memuat' di bilah status, kursor mouse jam pasir).

36
2018-01-12 23:37



Jika Anda menggunakan JQuery, 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 seperti yang tampaknya menjadi tempat terbersih.


19
2018-01-12 18:18



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

Anda dapat menunda eksekusi dengan sesuatu seperti jQuery sehingga tidak masalah di mana itu ditempatkan (kecuali untuk kinerja kecil yang terkena selama penguraian).


8
2018-01-12 18:22



<script src="myjs.js"></script>
</body>

tag skrip harus selalu digunakan sebelumnya tubuh dekat atau Bawah dalam HTML mengajukan.

maka Anda dapat melihat isi halaman terlebih dahulu sebelum memuat js mengajukan.

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


8
2017-07-16 11:16



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

Ada pihak yang tidak setuju, karena berbagai alasan, dimulai dengan praktik yang tersedia untuk secara sengaja memulai eksekusi dengan kejadian halaman onload.


5
2018-01-12 18:18



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

Ada beberapa teknik yang berbeda, tetapi yang paling lurus ke depan adalah menggunakan document.createElement ("skrip") ketika peristiwa window.onload terpicu. Kemudian script dimuat pertama ketika halaman itu sendiri telah diberikan, sehingga tidak mempengaruhi waktu pengguna harus menunggu halaman untuk muncul.

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

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


0
2018-01-12 21:06



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

Atau hal terbaik (jika itu bukan masalah) adalah Anda dapat membuat kotak pemuatan modal, menempatkan javascript Anda di bagian bawah halaman Anda dan membuatnya menghilang ketika baris terakhir dari skrip Anda dimuat. Dengan cara ini Anda dapat menghindari pengguna menggunakan tindakan di halaman Anda sebelum skrip dimuat. Dan juga hindari styling yang tidak pantas.


0
2017-11-18 04:41