Di mana saya harus menempatkan <script> tags dalam HTML markup?

Ketika menanamkan JavaScript dalam dokumen HTML, dimana tempat yang tepat untuk menempatkan <script> kategori dan termasuk JavaScript? Saya ingat bahwa anda tidak seharusnya untuk menempatkan ini dalam <head> bagian, tetapi menempatkan pada awal <body> bagian yang buruk, terlalu, karena JavaScript harus diurai sebelum halaman tersebut diberikan benar-benar (atau sesuatu seperti itu). Hal ini tampaknya untuk meninggalkan end dari <body> bagian sebagai tempat yang logis untuk <script> kategori.

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

(Ini pertanyaan referensi pertanyaan, di mana ia menyarankan bahwa fungsi JavaScript panggilan harus dipindahkan dari <a> tag <script> kategori. I'm secara khusus menggunakan jQuery, tapi lebih umum jawaban juga sesuai.)

Community
Pertanyaan edit 23 Mei 2017 в 10:31
Pemrograman
javascript html jquery
12 Januari 2009 в 6:15
62 tayangan
Mengomentari pertanyaan (2)
Larutan

Berikut ini's apa yang terjadi ketika browser beban web dengan <script> tag di atasnya:

  1. Mengambil halaman HTML (mis. index.html)
  2. Mulai parsing HTML
  3. Parser bertemu <script> tag referensi eksternal file script.
  4. Browser meminta file script. Sementara itu, parser blok dan berhenti parsing HTML lainnya pada halaman anda.
  5. Setelah beberapa waktu script download dan kemudian dieksekusi.
  6. Parser terus penguraian sisa dari dokumen HTML.

Langkah #4 penyebab pengalaman pengguna yang buruk. Website anda pada dasarnya berhenti loading sampai anda've-download semua script. Jika ada's satu hal yang pengguna benci's menunggu untuk sebuah situs web untuk memuat.

Mengapa hal ini terjadi?

Script dapat memasukkan sendiri HTML melalui dokumen.write() atau manipulasi DOM. Ini berarti bahwa parser harus tunggu sampai script yang telah di-download & dieksekusi sebelum itu dapat mengurai sisa dari dokumen. Setelah semua, script bisa telah memasukkan sendiri HTML dalam dokumen.

Namun, sebagian besar pengembang JavaScript tidak lagi memanipulasi DOM sementara dokumen ini memuat. Sebaliknya, mereka menunggu sampai dokumen tersebut telah dimuat sebelum modifikasi. Misalnya:




        My Page
        <script type="text/javascript" src="my-script.js"></script>


        <div id="user-greeting">Welcome back, user</div>

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 isn't akan memodifikasi dokumen sampai telah di-download & dieksekusi, parser berhenti parsing.

Kuno rekomendasi

Tua pendekatan untuk memecahkan masalah ini adalah untuk menempatkan <script> kategori di bawah <body>, karena hal ini memastikan parser isn't diblokir sampai akhir.

Pendekatan ini memiliki masalah sendiri: browser tidak dapat mulai men-download script sampai seluruh dokumen diurai. Untuk situs yang lebih besar dengan besar script & stylesheet, mampu untuk men-download script sesegera mungkin sangat penting untuk kinerja. Jika situs web anda tidak't beban dalam waktu 2 detik, orang-orang akan pergi ke situs web lain.

Dalam solusi optimal, browser akan mulai men-download script anda sesegera mungkin, sementara pada saat yang sama penguraian sisa dari dokumen anda.

Pendekatan modern

Hari ini, browser mendukung async dan menunda atribut pada script. Atribut-atribut ini memberitahu browser itu's aman untuk melanjutkan parsing sedangkan script yang didownload.

async

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

Script async atribut dijalankan secara asinkron. Ini berarti script ini dieksekusi secepat itu's-download, tanpa menghalangi browser untuk sementara ini. Ini berarti bahwa hal itu's mungkin untuk script 2-download & dieksekusi sebelum script 1.

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

menunda

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

Script dengan menunda atribut yang dilaksanakan dalam rangka (yaitu pertama, script 1, script 2). Ini juga tidak memblokir browser.

Tidak seperti script async, menunda script hanya dijalankan setelah seluruh dokumen yang telah dimuat.

Menurut http://caniuse.com/#feat=script-defer, 94.59% dari semua browser mendukung hal ini. 94.92% dukungan itu setidaknya sebagian.

Catatan penting pada browser kompatibilitas: dalam beberapa keadaan YAITU <= 9 dapat melaksanakan tangguhan script out of order. Jika anda perlu untuk mendukung mereka browser, silahkan baca ini pertama!

Kesimpulan

Saat ini negara-of-the-art adalah untuk menempatkan script di <head> tag dan menggunakan async atau menunda atribut. Hal ini memungkinkan anda script untuk didownload secepatnya tanpa menghalangi browser anda.

Hal yang baik adalah bahwa website anda masih harus memuat dengan benar pada 6% dari browser yang tidak mendukung atribut ini sementara mempercepat lainnya 94%.

Masih IT
Jawaban edit 22 Juli 2018 в 7:29
Komentar (24)

Sebelum penutup tag body, sebagaimana tercantum pada

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

Masukan Script di Bawah

masalah Yang disebabkan oleh script ini adalah bahwa mereka blok paralel download. Spesifikasi HTTP/1.1 menunjukkan bahwa browser download tidak lebih dari dua komponen secara paralel per host. Jika anda melayani anda gambar-gambar dari beberapa hostname, anda bisa mendapatkan lebih dari dua popularitas terjadi secara paralel. Sedangkan script adalah men-download, namun, browser yang tidak't mulai lain popularitas, bahkan pada hostname berbeda.

Komentar (7)

Non-blocking tag script dapat ditempatkan hampir di mana saja:

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>
  • async script akan dieksekusi asynchronously segera tersedia
  • menunda script ini dieksekusi ketika dokumen telah selesai parsing
  • async menunda script jatuh kembali untuk menunda perilaku jika async tidak didukung

Skrip tersebut akan dieksekusi secara asinkron/setelah dokumen siap, yang berarti anda tidak dapat melakukan hal ini:

<script src="jquery.js" async></script>
<script>jQuery(something);</script>

Atau ini:

<script src="document.write(something).js" async></script>

Atau ini:

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>

Atau ini:

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>

Setelah mengatakan bahwa, asynchronous script menawarkan keuntungan ini:

  • Paralel download dari sumber daya: Browser dapat men-download stylesheet, gambar dan script lainnya secara paralel tanpa menunggu script untuk men-download dan mengeksekusi.
  • Sumber rangka kemandirian: Anda dapat menempatkan script di dalam kepala atau tubuh tanpa khawatir tentang pemblokiran (berguna jika anda menggunakan CMS). Eksekusi order masih penting meskipun.

Hal ini dimungkinkan untuk menghindari eksekusi order masalah dengan menggunakan skrip eksternal yang mendukung callback. Banyak pihak ketiga JavaScript Api sekarang mendukung non-blocking eksekusi. Berikut adalah contoh dari memuat Google Maps API asynchronously.

Komentar (5)

Saran standar, dipromosikan oleh Yahoo! Dengan Kinerja tim, adalah untuk menempatkan <script> kategori di akhir dokumen tubuh sehingga mereka don't memblokir render halaman.

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

Ada beberapa slide yang besar oleh Steve Souders (client-side kinerja ahli) tentang:

  • teknik yang Berbeda untuk beban eksternal JavaScript file secara paralel
  • efek mereka pada waktu loading dan rendering halaman
  • apa "dalam kemajuan" indikator yang menampilkan browser (misalnya 'loading' di status bar, pasir kursor mouse).
Rory O'Kane
Jawaban edit 12 Januari 2018 в 8:49
Komentar (0)

Jika anda menggunakan JQuery kemudian menempatkan javascript di mana pun anda menemukan yang terbaik dan gunakan $(document).siap() untuk memastikan bahwa hal-hal yang sarat dengan baik sebelum melaksanakan setiap fungsi.

Di samping catatan: saya suka semua naskah saya tag di <head> sebagai bagian yang tampaknya menjadi tempat yang bersih.

Komentar (5)
<script src="myjs.js"></script>

tag script harus gunakan selalu sebelum tubuh atau Bawah di HTML file.

kemudian anda dapat melihat konten dari halaman pertama sebelum pemuatan js file.

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

Kasun Siyambalapitiya
Jawaban edit 5 September 2016 в 1:35
Komentar (3)

XHTML Won't Memvalidasi jika script di mana pun selain di dalam elemen head. ternyata hal ini dapat di mana-mana.

Anda dapat menunda eksekusi dengan sesuatu seperti jQuery sehingga doesn't peduli di mana itu's ditempatkan (kecuali untuk kinerja kecil hit selama parsing).

Komentar (1)

Pendekatan modern pada tahun 2019 adalah menggunakan ES6 jenis modul script.

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

Secara default, modul dimuat secara asinkron dan defered. yaitu anda dapat menempatkan mereka di mana saja dan mereka akan memuat secara paralel dan mengeksekusi saat halaman selesai loading.

Perbedaan antara script dan modul-modul yang dijelaskan berikut ini:

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

Pelaksanaan modul dibandingkan dengan script ini dijelaskan di sini:

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

Dukungan yang ditunjukkan di sini:

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

cquezel
Jawaban edit 4 Februari 2019 в 1:19
Komentar (2)

Konvensional (dan diterima secara luas) jawabannya adalah "di bagian bawah", karena kemudian seluruh DOM akan telah dimuat sebelum apa pun bisa mulai mengeksekusi.

Ada pembelot, karena berbagai alasan, mulai dengan praktek yang tersedia untuk sengaja memulai eksekusi dengan halaman onload event.

Komentar (0)

Tergantung, jika anda sedang loading script yang's diperlukan untuk gaya anda halaman / menggunakan tindakan di halaman anda (seperti klik tombol) maka lebih baik anda letakkan di bagian atas. Jika gaya anda 100% CSS dan anda memiliki semua pilihan fallback untuk tombol tindakan maka anda bisa menempatkannya di bagian bawah.

Atau hal terbaik (jika itu's tidak perhatian) ini anda bisa membuat modal loading kotak, menempatkan javascript di bagian bawah halaman anda dan membuatnya menghilang bila baris terakhir naskah anda akan dimuat. Dengan cara ini anda dapat menghindari pengguna yang menggunakan tindakan di halaman anda sebelum script dimuat. Dan juga menghindari yang tidak tepat styling.

Komentar (0)

Termasuk script pada akhir ini terutama digunakan di mana isi/ gaya situs web yang akan ditampilkan terlebih dahulu.

termasuk script di kepala banyak script awal dan dapat digunakan sebelum loading seluruh situs web.

jika script yang dimasukkan pada akhirnya validasi akan terjadi hanya setelah loading dari seluruh gaya dan desain yang tidak dihargai untuk cepat website responsif.

Komentar (0)

  • Jika anda masih peduli banyak tentang dukungan dan kinerja di IE<10, it's terbaik untuk SELALU membuat tag script yang terakhir tag HTML anda tubuh. Dengan cara itu, anda're tertentu yang sisa DOM telah dimuat dan anda tidak't blok dan rendering.

  • Jika anda don't peduli terlalu banyak lagi tentang IE<10, anda mungkin ingin menempatkan script pada bagian head dan menggunakan menunda untuk memastikan mereka hanya berjalan setelah anda DOM telah dimuat (<script type="text/javascript" src="path/ke/script1.js" menunda></script>). Jika anda masih ingin kode anda untuk bekerja di IE<10, don't lupa untuk membungkus kode dalam jendela.onload bahkan, meskipun!

Komentar (1)

Tergantung pada script dan penggunaan terbaik (dalam hal beban halaman dan waktu rendering) mungkin untuk tidak menggunakan konvensional <script>-tag per se, tetapi untuk secara dinamis memicu loading script asinkron.

Ada beberapa teknik yang berbeda, tapi yang paling lurus adalah dengan menggunakan dokumen.createElement("script") ketika jendela.onload event dipicu. Kemudian naskah ini dimuat pertama ketika halaman itu sendiri telah diberikan, sehingga tidak berdampak saat pengguna harus menunggu untuk halaman untuk muncul.

Hal ini tentu mensyaratkan bahwa naskah itu sendiri tidak diperlukan untuk render halaman.

Untuk informasi lebih lanjut, lihat post Kopling script async oleh Steve Souders (pencipta YSlow tapi sekarang di Google).

Komentar (0)

The tempat terbaik untuk menempatkan <script> tag sebelum penutupan </body> tag, jadi men-download dan mengeksekusi itu doesn't memblokir browser untuk parse html dalam dokumen,

Juga loading file js eksternal itu's sendiri keuntungan seperti itu akan menjadi di-cache oleh browser dan mempercepat load halaman itu memisahkan kode HTML dan JavaScript dan membantu untuk mengelola basis kode yang lebih baik.

tapi browser modern juga mendukung beberapa cara yang optimal seperti async dan menunda untuk beban eksternal javascript file.

Async dan Menunda

Biasanya halaman HTML eksekusi dimulai baris demi baris. Ketika JavaScript eksternal <script> elemen ditemui, HTML parsing adalah berhenti sampai JavaScript adalah men-download dan siap untuk di eksekusi. Ini normal halaman eksekusi dapat diubah dengan menggunakan menunda dan async atribut.

Menunda

Ketika menunda atribut yang digunakan, JavaScript download paralel dengan HTML parsing tapi akan mengeksekusi hanya setelah penuh HTML parsing dilakukan.

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

Async

Ketika async atribut yang digunakan, JavaScript di-download segera setelah naskah ditemui dan setelah men-download, itu akan dieksekusi secara asinkron (paralel) bersama dengan HTML parsing.

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

Ketika menggunakan atribut yang

  • Jika naskah anda adalah independen dari script lain dan lebih modular, menggunakan async.
  • Jika anda sedang loading script1 dan script2 dengan async, keduanya akan berjalan paralel bersama dengan HTML parsing, segera setelah mereka di-download dan tersedia.
  • Jika naskah anda tergantung pada script lain kemudian menggunakan menunda untuk investasi:
  • Ketika script1 dan script2 yang dimuat dalam urutan itu dengan menunda, kemudian script1 dijamin untuk menjalankan pertama,
  • Kemudian script2 akan mengeksekusi setelah script1 sepenuhnya dijalankan.
  • Harus melakukan hal ini jika script2 tergantung pada script1.
  • Jika naskah anda adalah cukup kecil dan tergantung dengan script lain tipe async maka gunakan script tanpa atribut dan tempat itu di atas semua async script.

referensi:knowledgehills.com

Komentar (0)

Script blok DOM beban sampai's-load dan dieksekusi.

Jika anda menempatkan script pada akhir <body> semua DOM memiliki kesempatan untuk memuat dan render (halaman akan "display" lebih cepat). <script> akan memiliki akses ke semua elemen DOM.

Di sisi lain menempatkannya setelah <body> start atau di atas akan mengeksekusi script (mana ada's masih ada elemen DOM).

Anda termasuk jQuery yang berarti anda dapat menempatkannya di mana pun anda inginkan dan menggunakan .siap()

Komentar (0)

Saya pikir itu tergantung pada halaman web eksekusi. Jika halaman yang anda inginkan untuk menampilkan tidak dapat ditampilkan dengan baik tanpa loading JavaScript pertama maka anda harus menyertakan file JavaScript pertama. Tapi Jika anda dapat menampilkan/membuat halaman web tanpa awalnya men-download file JavaScript, maka anda harus menempatkan kode JavaScript di bagian bawah halaman. Karena itu akan meniru speedy load halaman, dan dari pengguna's point of view akan tampak seperti halaman yang memuat lebih cepat.

Komentar (0)

Anda dapat menempatkan sebagian besar dari <script> referensi di akhir <body>,
Tetapi Jika ada komponen aktif pada halaman anda yang menggunakan skrip eksternal,
kemudian mereka ketergantungan (js file) harus datang sebelum itu (idealnya dalam tag head).

Komentar (0)

Sebelum akhir dari tag body untuk mencegah dan UI yang menghalangi.

Komentar (0)

Di Bagian Akhir dari Dokumen HTML

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

Massimiliano Kraus
Jawaban edit 27 November 2017 в 2:49
Komentar (0)

tempat terbaik untuk menulis JavaScript kode di akhir dokumen setelah kode tag untuk memuat dokumen kemudian mengeksekusi kode js. dan jika anda menulis JQuery menulis kode 

$(document).ready(function(){

//your code here...

});
AmanKumar
Jawaban edit 22 November 2018 в 11:49
Komentar (1)