JavaScript doit-il précéder CSS pour un rendu de page optimal ?-tutoriel CSS-php.cn

Table des matières

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

Maison

interface Web

tutoriel CSS

JavaScript doit-il précéder CSS pour un rendu de page optimal ?

Nov 26, 2024 am 02:39 AM

Does JavaScript Need to Precede CSS for Optimal Page Rendering?

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

Question :
Les recommandations en ligne conseillent fréquemment de placer CSS avant JavaScript, ce qui suggère que le fil de rendu nécessite toutes les informations de style nécessaires avant d’afficher la page. Cette recommandation est-elle toujours valable ?

Réponse :

Pour enquêter sur cette affirmation, divers tests ont été effectués à l'aide d'un script Ruby qui permettait des retards arbitraires dans la récupération JavaScript et CSS. Les résultats ont révélé que les performances des navigateurs de bureau modernes s'améliorent réellement lorsque les inclusions JavaScript sont placées en premier :

CSS d'abord : Le rendu de la page prend 1,5 seconde.
JavaScript First : Le rendu de la page prend 1,4 seconde.

Résultats similaires ont été observés dans Chrome, Firefox et Internet Explorer. Cependant, Opera n'a montré aucune différence dans le temps de rendu.

Explication :
Les navigateurs modernes implémentent une analyse spéculative, où ils commencent à récupérer et à exécuter des scripts avant de rencontrer un message <link> étiqueter. Pour cette raison, le navigateur attend que JavaScript se charge et s'exécute avant de télécharger CSS, annulant ainsi tout avantage d'inclure CSS en premier.

Conclusions :
Sur la base des résultats des tests, il est optimal pour inclure des feuilles de style externes après les scripts externes dans le fichier <head> balise, en particulier pour les navigateurs de bureau avec plus de 85 % de part de marché. Cet ordre garantit le téléchargement parallèle et améliore les performances pour la majorité des utilisateurs.

Exceptions :
Notez que les conclusions ci-dessus s'appliquent aux navigateurs de bureau et peuvent ne pas s'appliquer aux navigateurs mobiles, car certains ne prennent actuellement pas en charge l'analyse spéculative. Par conséquent, il reste prudent de tester et de considérer l’impact des performances sur votre public spécifique.

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