Récemment, j'ai réfléchi à l'impact de la position des CSS et des JS dans la page sur le chargement et les performances de la page. J'ai également écrit plusieurs démos et trouvé quelques questions, comme placer des js chronophages en bas de la page. body pour éviter de bloquer le chargement de la page. Mais la démo que j’ai tapée ne semble pas correspondre à ce que tout le monde dit. Le code spécifique est le suivant :
<!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>Il va de soi que 6 éléments P doivent être présentés en premier, puis attendre quelques secondes avant l'alerte (str). Mais le résultat n'est pas comme ça. Voici comment ce code s'exécute dans plusieurs navigateurs :
1. chrome La barre de chargement tourne et tourne, puis alerte, cliquez sur OK puis la page est présentée
2.ie et Firefox attendent que la barre de chargement tourne et tourne, puis la page et l'alerte apparaissent presque en même temps (elle devrait être de restituer d'abord la page, puis d'alerter, car lorsque l'alerte, l'élément est apparu
Voici ce que j'ai essayé :
1. Ajoutez la méthode onload au corps :
<!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>Aucun changement dans le résultat ;
2. Utilisez la méthode 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>Le résultat est le même, il n'y a pas de changement ;
3. Écrivez le script sous forme de lien externe, et le résultat du test est toujours le même (je l'ai essayé chez moi hier soir, et il semble que les éléments de la page soient rendus en premier, puis le js est chargé, mais il n'y a aucun moyen pour le vérifier maintenant. Je ne sais pas si c'est un problème de version du navigateur.
Pièce jointe : Pourquoi ai-je l'impression que la vitesse de calcul des différents navigateurs est différente ? 500 millions de boucles prennent 10 secondes dans Google, mais seulement 6 secondes ? dans Firefox, je ne comprends pas non plus
C'est la première fois que je pose une question, j'espère que vous pourrez la prendre à la légère 0.0~ Merci d'avance
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ce que vous avez dit ci-dessus est logique. Cela devrait être dû au fait que la boucle for consomme des ressources CPU, ce qui ralentit le chargement du premier écran.
Même la balise de script en bas du corps ralentira le premier écran, car le navigateur demandera son fichier js correspondant au tout début, ce qui occupe le nombre limité de liens TCP, la bande passante et même le temps nécessaire pour l'exécuter. CPU requis.
La balise de script est placée au bas du corps pour empêcher la balise de script de bloquer le téléchargement d'autres fichiers de ressources de page et accélérer le chargement des ressources liées à la page.
Mais le rendu de la page entière sera toujours terminé par la balise script, donc dans votre exemple, la page restera vide jusqu'à ce que l'opération du script soit terminée et la page ne sera pas affichée tant qu'elle n'est pas rendue.
Dans l'exemple que vous avez donné, si vous souhaitez que la page soit affichée en premier puis que le calcul du script soit effectué, vous pouvez utiliser setTimeout pour exécuter le script de manière asynchrone, par exemple :
Je suppose que c'est parce que cela consomme trop de ressources CPU et que le rendu des pages nécessite également des ressources CPU
Si cette opération chronophage est remplacée par IO, je pense que ce sera conforme aux attentes
PS : Devinez, essayez à vide