Maison >interface Web >tutoriel CSS >JavaScript devrait-il précéder CSS pour des performances de rendu de pages Web optimales ?
JavaScript devrait-il précéder CSS pour des performances de rendu de pages Web optimales ?
- Mary-Kate Olsenoriginal
- 2024-11-29 16:14:10715parcourir
CSS doit-il toujours précéder JavaScript ?
Il est souvent conseillé d'inclure CSS avant JavaScript dans le
d'une page Web. Ceci est étayé par le raisonnement selon lequel le fil de rendu disposera de toutes les informations de style dont il a besoin pour restituer la page et que le moteur JavaScript devra analyser tout le JavaScript inclus avant de continuer, ce qui entraînera un retard dans le rendu de la page.Cependant, les tests pratiques montrent un résultat différent. L'interpréteur JavaScript semble attendre que tous les CSS soient téléchargés avant de démarrer, ce qui signifie que l'inclusion préalable de JavaScript peut conduire à une utilisation plus efficace du temps du fil JavaScript.
Pour approfondir cela, examinons des exemples spécifiques. Considérez la structure de page suivante :
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type='text/javascript'>
var startTime = new Date();
</script>
<link href="http://10.0.0.50:8081/test.css?delay=500" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://10.0.0.50:8081/test2.js?delay=400&jsdelay=1000"></script>
</head>
<body>
<p>
Elapsed time is:
<script type='text/javascript'>
document.write(new Date() - startTime);
</script>
</p>
</body>
</html>
Lorsque le CSS est inclus en premier, le rendu de la page prend 1,5 seconde. Lorsque le JavaScript est inclus en premier, le rendu de la page prend 1,4 seconde. Cette expérience démontre que donner la priorité à JavaScript peut conduire à un rendu plus rapide des pages.
Conclusion
Sur la base de tests pratiques, la recommandation de placer les inclusions CSS avant les inclusions JavaScript n'est peut-être pas optimale pour les performances dans les navigateurs modernes. L’inclusion de JavaScript semble d’abord améliorer l’efficacité en accordant plus de temps au thread JavaScript pour fonctionner. Il est important de noter que ceci est spécifique au contexte des inclusions JavaScript et CSS essentielles dans le fichier
du document.Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!