Di mana menempatkan JavaScript dalam file HTML?

210

Katakanlah saya memiliki file JavaScript yang cukup besar, dikemas hingga sekitar 100kb atau lebih. Maksud saya, ini adalah file eksternal yang akan ditautkan melalui <script src="...">, bukan disisipkan ke dalam HTML itu sendiri.

Di mana tempat terbaik untuk meletakkan ini di HTML?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Apakah akan ada perbedaan fungsional antara masing-masing opsi?

javascript  html  optimization 
— nickf
sumber
— Ivar

Jawaban:

175

Yahoo! Tim Performa Luar Biasa merekomendasikan menempatkan skrip di bagian bawah halaman Anda karena cara browser mengunduh komponen.

Tentu saja komentar Levi "tepat sebelum Anda membutuhkannya dan tidak lebih cepat" adalah jawaban yang benar, yaitu "itu tergantung".

— Walter Rumsby
sumber
4
Misalnya, jika Anda akan melakukan banyak hal jQuery, Anda perlu perpustakaan dimuat sebelum Anda benar-benar mencoba memanfaatkannya.
— BryanH
58
Juga, alasan mengapa Yahoo EPT merekomendasikan menempatkan JS di bagian bawah adalah karena browser harus masuk ke mode single-threaded sementara JS dimuat dan kemudian dijalankan. Jika skrip ada di kepala atau di tengah-tengah konten, browser akan "jeda" saat berurusan dengan JS. Dengan menempatkan JS di bagian bawah, konten akan dimuat dan secara umum terlihat sehingga pengguna dapat mulai membacanya saat browser masih berurusan dengan JS.
— BryanH
1
Hai. Apakah kita meletakkan kode seperti ini $(function () {...})sebagai bagian bawah halaman juga, atau haruskah itu di dalam <head>?
— Thang Pham
7
Saya harap merujuk "bawah halaman Anda" di sini tidak di luar </body>?
— Mr_Green
1
Browser modern juga dapat membaca atribut "menunda". Anda dapat mengatur menunda = "menunda" pada tag skrip yang tidak ada di bagian bawah <body>, dan ketika browser melihat itu, pertama-tama akan selesai memuat sisa html dan kemudian kembali dan menafsirkan isi dari tag skrip. Ini berguna jika Anda menggunakan semacam kerangka kerja di mana Anda tidak memiliki kontrol penuh atas halaman. Dig ke artikel ini dan catatan bahwa itu adalah dokumen hidup sehingga beberapa info yang usang: stackoverflow.com/questions/5250412/...
— LinuxDisciple
75

Tempat terbaik untuk itu adalah tepat sebelum Anda membutuhkannya dan tidak lebih cepat.

Juga, tergantung pada lokasi fisik pengguna Anda, menggunakan layanan seperti layanan S3 Amazon dapat membantu pengguna mengunduhnya dari server yang secara fisik lebih dekat dengan mereka daripada server Anda.

Apakah skrip js Anda lib yang umum digunakan seperti jQuery atau prototipe? Jika demikian, ada sejumlah perusahaan, seperti Google dan Yahoo, yang memiliki alat untuk menyediakan file-file ini untuk Anda di jaringan terdistribusi.

— Levi Rosol
sumber
60

Sebagai patokan, tempat terbaik untuk meletakkan <script>tag adalah bagian bawah halaman, tepat sebelum </body>tag. Sesuatu seperti ini:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Mengapa?

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 banyak nama host, Anda bisa mendapatkan lebih dari dua unduhan agar terjadi secara paralel. Ketika skrip sedang mengunduh, peramban tidak akan memulai unduhan lain, bahkan pada nama host yang berbeda. Lebih...

CSS

Agak di luar topik, tapi ... Letakkan stylesheet di bagian atas.

Saat meneliti kinerja di Yahoo !, kami menemukan bahwa memindahkan stylesheet ke dokumen HEAD membuat halaman tampak memuat lebih cepat. Ini karena menempatkan stylesheet di HEAD memungkinkan halaman untuk di-render secara progresif. Lebih...

Bacaan lebih lanjut

Yahoo telah merilis panduan yang sangat keren yang berisi daftar praktik terbaik untuk mempercepat situs web. Pasti layak dibaca: https://developer.yahoo.com/performance/rules.html

— martynas
sumber
1
"Masalah yang disebabkan oleh skrip adalah bahwa mereka memblokir unduhan paralel." - Itu tidak lagi benar: w3.org/TR/html5/scripting-1.html#attr-script-async
— Quentin
4

Dengan 100k Javascript, Anda tidak boleh memasukkannya ke dalam file. Gunakan file Javascript skrip eksternal. Tidak ada kesempatan di neraka Anda hanya akan menggunakan jumlah kode ini hanya dalam satu halaman HTML. Kemungkinan Anda bertanya di mana Anda harus memuat file Javascript, untuk ini Anda sudah menerima jawaban yang memuaskan.

Tapi saya ingin menunjukkan bahwa umumnya, browser modern menerima file Javascript gzip ped! Cukup gzip x.jsfile ke x.js.gz, dan arahkan ke itu di srcatribut. Itu tidak bekerja pada sistem file lokal, Anda memerlukan server web agar bisa berfungsi. Tetapi penghematan dalam byte yang ditransfer bisa sangat besar.

Saya telah berhasil mengujinya di Firefox 3, MSIE 7, Opera 9, dan Google Chrome. Tampaknya tidak berfungsi seperti ini di Safari 3.

Untuk info lebih lanjut, lihat posting blog ini , dan lainnya halaman kuno lainnya yang berguna karena menunjukkan bahwa server web dapat mendeteksi apakah browser dapat menerima Javascript yang di-gzip, atau tidak. Jika sisi server Anda dapat secara dinamis memilih untuk mengirim gzip atau teks biasa, Anda dapat membuat halaman dapat digunakan di semua browser web.

— Bart
sumber
8
Anda salah memahami pertanyaan OP. Dia bertanya di mana di HTML untuk menempatkan tag skrip. Dia sudah menggunakan file eksternal, bukan inlining skrip. Diakui, ini kurang jelas sebelum dia mengedit pertanyaan pada bulan April '09. Mungkin hapus jawaban ini?
— Mark Amery
@Leandro Saya rasa itu karena orang tidak selalu mengingat pertanyaan yang sebenarnya dalam pikiran namun masih menganggap jawaban seperti ini berguna. Meskipun demikian, jawaban ini bermanfaat tetapi tidak selalu relevan. Mungkin berfungsi lebih baik jika tooltip suara berisi kata-kata yang lebih eksplisit, misalnya 'Jawaban ini berguna dan relevan'.
— WynandB
1
Pada Javascript yang di-gzip: Anda dapat mengkonfigurasi server web Anda untuk mengompresnya juga ... (Atau gunakan sesuatu seperti modul / opsi nginx's gzip_static) (dan gunzip untuk klien lain) Itu setidaknya harus mengirim header jenis konten yang benar, dengan pengkodean ditandai sebagai gzip, kemungkinan menghasilkan dukungan browser yang lebih baik
— Gert van den Berg
4

Menempatkan javascript di atas akan tampak lebih rapi, tetapi secara fungsional, lebih baik mengikuti HTML. Dengan begitu, javascript Anda tidak akan berjalan dan mencoba untuk mereferensikan elemen HTML sebelum mereka dimuat. Masalah semacam ini seringkali hanya menjadi jelas ketika Anda memuat halaman melalui koneksi internet yang sebenarnya, terutama yang lambat.

Anda juga dapat mencoba memuat javascript secara dinamis dengan menambahkan elemen header dari kode javascript lain, meskipun itu hanya masuk akal jika Anda tidak menggunakan semua kode sepanjang waktu.

— Matthias Wandel
sumber
3

Dengan menggunakan cuzillion Anda dapat menguji pengaruh pada pemuatan halaman dari penempatan tag skrip yang berbeda menggunakan metode yang berbeda: inline, eksternal, "tag HTML", "document.write", "elemen JS DOM", "iframe", dan "XHR eval" . Lihat bantuan untuk penjelasan perbedaannya. Ini juga dapat menguji stylesheet, gambar, dan iframe.

— Sam Hasler
sumber
1

Jawabannya tergantung bagaimana Anda menggunakan objek javascript. Seperti yang sudah ditunjukkan memuat file javascript di footer daripada header tentu saja meningkatkan kinerja tetapi harus diperhatikan bahwa objek yang digunakan diinisialisasi lebih lambat daripada mereka dimuat di footer. Satu lagi cara adalah memuat file 'js' yang ditempatkan di folder yang akan tersedia untuk semua file.

— GustyWind
sumber
0

Seperti orang lain katakan, itu kemungkinan besar masuk dalam file eksternal. Saya lebih suka memasukkan file seperti itu di akhir <head />. Metode ini lebih ramah manusia daripada ramah mesin, tetapi dengan cara itu saya selalu tahu di mana JS berada. Tidak mudah dibaca untuk menyertakan file skrip di tempat lain (imho).

Jika Anda benar-benar perlu memeras setiap ms terakhir maka Anda mungkin harus melakukan apa yang dikatakan Yahoo.

— Mengamuk
sumber
0

Script harus dimasukkan di akhir tag body karena dengan cara ini HTML akan diuraikan oleh browser dan ditampilkan sebelum skrip dimuat.

— JosĂ© Salgado
sumber
0

Jawaban atas pertanyaan tergantung. Ada 2 skenario dalam situasi ini dan Anda harus membuat pilihan berdasarkan skenario yang sesuai.

Skenario 1 - Skrip kritis / Skrip wajib diperlukan

Jika skrip yang Anda gunakan penting untuk memuat situs web, disarankan untuk ditempatkan di bagian atas dokumen HTML Anda yaitu, <head> ,. Beberapa contoh termasuk - kode aplikasi, bootstrap, font, dll.

Skenario 2 - Skrip analitik / kurang penting

Ada juga skrip yang digunakan yang tidak memengaruhi tampilan situs web. Skrip seperti itu disarankan untuk dimuat setelah semua segmen penting dimuat. Dan jawabannya adalah bagian bawah dokumen, yaitu bagian bawah Anda <body>sebelum tag penutup. Beberapa contoh termasuk - Google analytics, hotjar, dll.

Bonus - async / tunda

Anda juga dapat memberi tahu peramban bahwa pemuatan skrip dapat dilakukan secara bersamaan dengan yang lain dan dapat dimuat berdasarkan pilihan peramban menggunakan argumen defer / async dalam kode skrip.

misalnya. <script async src="script.js"></script>

— Praveen Thirumurugan
sumber
-1

Tautan javascript Anda dapat berada di kepala atau di akhir tag tubuh, memang benar bahwa kinerja meningkat dengan menempatkan tautan di akhir tag tubuh Anda, tetapi kecuali jika kinerja adalah masalah, menempatkannya di kepala lebih baik. bagi orang untuk membaca dan Anda tahu di mana tautan berada dan dapat merujuknya dengan lebih mudah.

— Timothy Trousdale
sumber
-1

Saya akan mengatakan bahwa itu tergantung pada kenyataan apa yang Anda rencanakan untuk dicapai dengan kode Javascript:

  • jika Anda berencana untuk memasukkan skrip JS eksternal Anda, maka tempat terbaik adalah di bagian atas halaman
  • jika Anda berencana untuk menggunakan halaman pada ponsel cerdas, maka bagian bawah halaman, tepat sebelum tag.
  • tetapi, jika Anda berencana membuat kombinasi HTML dan JS (misalnya, tabel HTML yang dibuat dan diisi secara dinamis) maka Anda harus meletakkannya di tempat yang Anda perlukan di sana.
— Ludus H
sumber
Apa yang aku katakan pantas dikurangi !? Ya ampun.
— Ludus H
Apa hubungan eksternal dengan menempatkan naskah di kepala? Mengapa bagian bawah halaman merupakan tempat yang baik untuk meletakkan skrip khusus untuk ponsel pintar? Pernyataan Anda tentang menghasilkan HTML secara dinamis dari JS benar hanya jika Anda menggunakannya document.write, yang seharusnya tidak Anda lakukan.
— Quentin
Anda "menduga" apa yang saya pikirkan dan karena jawaban saya menjadi minus? Anda mungkin berpikir bahwa anggapan Anda lebih baik daripada penjelasan saya, bukan? Saya hanya berencana untuk membuat penjelasan singkat, jika seseorang tidak dapat mengerti maka dia akan meminta info lebih lanjut. Dalam komentar saya, saya menyarankan untuk meletakkan JS di akhir halaman untuk ponsel smarth dan tablet, tepat sebelum akhir tubuh karena memuat seluruh halaman lebih cepat karena browser tidak perlu beralih ke mode "single thread", konten halaman akan mulai muncul di layar ... tapi Anda mungkin tahu ini.
— Ludus H
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.