Baru-baru ini, saya telah memikirkan tentang kesan kedudukan css dan js dalam halaman pada pemuatan dan prestasi halaman. Saya juga telah menulis beberapa demo dan menemui beberapa soalan, seperti meletakkan beberapa js yang memakan masa di bahagian bawah. badan untuk menghalang pemuatan halaman. Tetapi demo yang saya taip nampaknya tidak selaras dengan apa yang diperkatakan oleh semua orang. Kod khusus adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>我是第1行</p>
<p>我是第2行</p>
<p>我是第3行</p>
<p>我是第4行</p>
<p>我是第5行</p>
<p>我是第6行</p>
<script>
console.time("t1");
var str =0;
for(var i = 0;i<500000000;i ++){
str +=i;
}
console.timeEnd("t1");
alert(str);
</script>
</body>
</html>Adalah alasan bahawa 6 elemen P harus dibentangkan dahulu, dan kemudian tunggu beberapa saat sebelum berjaga-jaga (str Tetapi hasilnya tidak seperti ini. Berikut ialah cara kod ini berjalan dalam beberapa pelayar: chrome Bar pemuatan berpusing dan berpusing, kemudian amaran, klik OK dan kemudian halaman dibentangkan
2.iaitu dan Firefox menunggu bar pemuatan berputar dan berpusing, dan kemudian halaman dan amaran muncul hampir pada masa yang sama (ia; sepatutnya membuat halaman terlebih dahulu dan kemudian berjaga-jaga, kerana apabila amaran adalah elemen telah muncul
1. Tambahkan kaedah onload pada badan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onload = "fn()">
<p>我是第1行</p>
<p>我是第2行</p>
<p>我是第3行</p>
<p>我是第4行</p>
<p>我是第5行</p>
<p>我是第6行</p>
<script>
function fn(){
console.time("t1");
var str =0;
for(var i = 0;i<5000000000;i ++){
str +=i;
}
console.timeEnd("t1");
alert(str);
}
</script>
</body>
</html>2. Gunakan kaedah window.onload:
<script>
function fn(){
console.time("t1");
var str =0;
for(var i = 0;i<500000000;i ++){
str +=i;
}
console.timeEnd("t1");
alert(str);
}
window.onload = fn;
</script>3 Tulis skrip sebagai pautan luaran, dan hasil ujian masih sama (saya mencubanya di rumah semalam, dan nampaknya elemen halaman dipaparkan dahulu dan kemudian js dimuatkan, tetapi tidak ada cara untuk mengesahkannya sekarang. Saya tidak tahu sama ada ia adalah masalah versi penyemak imbas ); dalam Firefox saya pun tak faham
Ini kali pertama saya bertanyakan soalan, saya harap anda semua boleh ambil mudah 0.0~ Terima kasih terlebih dahulu
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Apa yang anda katakan di atas masuk akal. Ia sepatutnya kerana gelung for menggunakan sumber CPU, menyebabkan skrin pertama dimuatkan dengan perlahan.
Malah teg skrip di bahagian bawah badan akan memperlahankan skrin pertama, kerana penyemak imbas akan meminta fail js yang sepadan pada awal-awal lagi, dan ini mengambil bilangan pautan TCP, lebar jalur dan juga masa yang diperlukan yang terhad untuk menjalankan CPU yang diperlukan.
Teg skrip diletakkan di bahagian bawah badan untuk menghalang teg skrip daripada menyekat muat turun fail sumber halaman lain dan mempercepatkan pemuatan sumber berkaitan halaman.
Tetapi pemaparan keseluruhan halaman masih akan ditamatkan oleh teg skrip, jadi dalam contoh anda halaman akan kekal kosong sehingga operasi skrip selesai dan halaman tidak akan dipaparkan sehingga ia dipaparkan.
Dalam contoh yang anda berikan, jika anda mahu halaman dipaparkan dahulu dan kemudian pengiraan skrip dilakukan, anda boleh menggunakan setTimeout untuk melaksanakan skrip secara tidak segerak, seperti:
Saya rasa ini kerana ia mengambil terlalu banyak sumber CPU, dan pemaparan halaman juga memerlukan sumber CPU
Jika operasi yang memakan masa ini digantikan dengan IO, saya rasa ia akan mengikut jangkaan
PS: Rasa, cuba bila kosong