Rumah >hujung hadapan web >tutorial js >Cara Terbaik untuk menambah fail Javascript dalam HTML

Cara Terbaik untuk menambah fail Javascript dalam HTML

Barbara Streisandasal: 2024-10-09 20:33:28745semak imbas

Best Way to add Javascript file in HTML

Dalam HTML, terdapat beberapa cara untuk memasukkan fail JavaScript. Saya akan menerangkan empat kaedah berbeza, kelemahannya, dan akhirnya, menyerlahkan pendekatan terbaik.

1. dalam

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js"></script>
</head>
<body>

</body>
</html>

Dalam pendekatan ini semasa menghuraikan fail javascript kod dimuatkan dahulu sebelum html dalam badan dan Jika JavaScript cuba memanipulasi elemen dalam badan yang belum dihuraikan lagi, ia boleh membawa kepada ralat, kerana kandungan HTML belum sepenuhnya dimuatkan.

Tingkah laku menyekat ini menangguhkan penghuraian dan pemaparan halaman yang lain, menjejaskan prestasi dan pengalaman pengguna.

2. dalam (pada akhir)

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
    <script src="custom.js"></script>
</body>
</html>

Dalam pendekatan ini, HTML dihuraikan sepenuhnya sebelum JavaScript dimuatkan dan dilaksanakan, menghalang ralat yang berkaitan dengan unsur DOM yang hilang. Pendekatan ini semuanya bagus tetapi memandangkan penghuraian HTML dan pemuatan JavaScript berlaku secara berurutan, ia boleh mengambil tempoh yang lebih lama secara keseluruhan, kerana kedua-dua proses berlaku pada masa yang berbeza

3. dalam

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js" async></script>
</head>
<body>
</body>
</html>

Dalam pendekatan ini, kami menjadikan JavaScript tidak segerak, jadi ia tidak menyekat HTML daripada dimuatkan. Penghuraian HTML dan pemuatan JavaScript berlaku secara selari. Walau bagaimanapun, jika JavaScript dilaksanakan sebelum HTML dihuraikan sepenuhnya dan js cuba memanipulasi elemen html yang belum dimuatkan lagi, ia boleh menyebabkan ralat.
Nota: — pendekatan ini boleh menjimatkan masa tetapi dengan memuatkan html ,js serentak tetapi lebih terdedah kepada ralat

4. dalam

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js" defer></script>
</head>
<body>

</body>
</html>

Pendekatan ini serupa dengan yang ketiga, di mana penghuraian HTML dan pemuatan JavaScript berlaku secara selari. Walau bagaimanapun, walaupun JavaScript dimuatkan dahulu, penyemak imbas menunggu sehingga HTML dihuraikan sepenuhnya sebelum melaksanakan skrip

Ringkasan: Pendekatan Terbaik

Cara terbaik biasanya menggunakan:

Mengapa:

Ia tidak menyekat penghuraian HTML (muat turun tanpa menyekat).
Ia memastikan skrip berjalan selepas DOM dihuraikan sepenuhnya, menjadikannya lebih selamat untuk memanipulasi elemen DOM.
Ia mengekalkan susunan pelaksanaan skrip jika anda mempunyai berbilang skrip tertunda.

Dalam kes di mana skrip bebas daripada kandungan DOM (seperti skrip penjejakan atau iklan), anda boleh menggunakan async untuk prestasi yang lebih baik.

Atas ialah kandungan terperinci Cara Terbaik untuk menambah fail Javascript dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html if for while include Error finally JS dom this

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Konsep Reaksi Lanjutan | Bertindak balas 4Artikel seterusnya：Konsep Reaksi Lanjutan | Bertindak balas 4

Artikel berkaitan

Lihat lagi