JavaScript doit-il précéder CSS pour un rendu de page optimal ?
Nov 26, 2024 am 02:39 AMCSS 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Faire votre première transition Svelte personnalisée

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Téléchargement de fichiers avec Multer dans Node.js et Express

Meilleures animations et effets CSS sur Codecanyon 2025 (payé gratuitement)
