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

Table des matières

CSS doit-il toujours précéder JavaScript ?

Conclusion

Maison

interface Web

tutoriel CSS

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

Mary-Kate Olsen

Nov 29, 2024 pm 04:14 PM

Should JavaScript Precede CSS for Optimal Web Page Rendering Performance?

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>

Copier après la connexion

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn