JavaScript devrait-il précéder CSS pour des performances de rendu de pages Web optimales ?

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 :

  
    <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>
  
  
    <p>
      Elapsed time is:
      <script type="text/javascript">
        document.write(new Date() - startTime);
      </script>
    </p>
  

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!