Cara Terbaik untuk menambah fail Javascript dalam HTML-tutorial js-php.cn

Cara Terbaik untuk menambah fail Javascript dalam HTML

Barbara Streisand

Lepaskan： 2024-10-09 20:33:28

asal

645 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!