Prestasi JavaScript dalam penyemak imbas boleh dianggap sebagai isu kebolehgunaan paling penting yang dihadapi oleh pembangun. Masalah ini ditambah lagi dengan sifat menyekat JavaScript, yang bermaksud perkara lain tidak boleh diproses oleh penyemak imbas semasa JavaScript sedang berjalan. Malah, kebanyakan penyemak imbas menggunakan satu proses untuk mengendalikan berbilang tugas seperti kemas kini UI dan JavaScript berjalan, dan hanya satu tugas boleh dilaksanakan pada masa yang sama.
Berapa lama JavaScript berjalan, kemudian berapa lama ia menunggu sebelum penyemak imbas melahu untuk membalas input pengguna.
Pada peringkat asas, ini bermakna kehadiran teg
Contoh biasa ialah fungsi document.write(), contohnya:
<html> <head> <title>Script Example</title> </head> <body> <p> <script type=”text/javascript”> document.write(“The date is ” + (new Date()).toDateString()); </script> </p> </body> </html>
Apabila penyemak imbas menemui teg Oleh itu, penyemak imbas berhenti, menjalankan kod JavaScript ini, dan kemudian meneruskan menghuraikan dan menterjemah halaman. Perkara yang sama berlaku apabila memuatkan JavaScript menggunakan atribut src. Penyemak imbas mesti memuat turun kod untuk fail luaran terlebih dahulu, yang mengambil sedikit masa, dan kemudian menghuraikan dan menjalankan kod ini. Semasa proses ini, penghuraian halaman dan interaksi pengguna disekat sepenuhnya. Dokumentasi HTML 4 menyatakan bahawa teg Walaupun kod ini kelihatan tidak berbahaya, ia mempunyai isu prestasi: tiga fail JavaScript dimuatkan dalam bahagian
<html>
<head>
<title>Script Example</title>
<– Example of inefficient script positioning –>
<script type=”text/javascript” src=”file1.js”></script>
<script type=”text/javascript” src=”file2.js”></script>
<script type=”text/javascript” src=”file3.js”></script>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Ingat bahawa penyemak imbas tidak akan memaparkan mana-mana bahagian halaman sehingga ia menemui teg
Meletakkan skrip di bahagian atas halaman dengan cara ini akan menyebabkan kelewatan yang ketara, yang biasanya menunjukkan dirinya sebagai: apabila halaman dibuka, ia mula-mula memaparkan halaman kosong dan pengguna tidak boleh membaca mahupun berinteraksi dengan halaman tersebutInternet Explorer 8, Firefox 3.5, Safari 4 dan Chrome 2 membenarkan muat turun selari fail JavaScript. Berita baik ini bermakna apabila teg
Oleh kerana skrip menyekat proses muat turun sumber halaman lain, pendekatan yang disyorkan ialah meletakkan semua
<html> <head> <title>Script Example</title> <link rel=”stylesheet” type=”text/css” href=”styles.css”> </head> <body> <p>Hello world!</p> <– Example of recommended script positioning –> <script type=”text/javascript” src=”file1.js”></script> <script type=”text/javascript” src=”file2.js”></script> <script type=”text/javascript” src=”file3.js”></script> </body> </html>
Kod ini menunjukkan lokasi teg
Di atas ialah pengenalan yang berkaitan dengan Memuatkan dan Pelaksanaan memuatkan dan menjalankan dalam kandungan pengoptimuman JavaScript. Saya harap ia akan membantu pembelajaran semua orang.