JavaScript doit-il précéder CSS pour des performances Web optimales ?

Les CSS doivent-ils toujours précéder JavaScript ?

Dans le domaine du développement Web, le placement des ressources CSS et JavaScript dans le document HTML fait l'objet d'un débat permanent. Traditionnellement, il a été recommandé d'inclure CSS avant JavaScript car le fil de rendu nécessite toutes les informations de style nécessaires avant de continuer. Cependant, les progrès récents de la technologie des navigateurs ont remis en question cette notion.

Test des hypothèses

Un test détaillé a été effectué pour valider l'hypothèse selon laquelle CSS doit précéder JavaScript pour des performances optimales. . Le test impliquait :

• Page avec CSS inclus avant JavaScript (CSS First)
• Page avec JavaScript inclus avant CSS (JavaScript First)

Les deux pages inclus le chargement retardé des ressources JavaScript et CSS pour simuler des conditions réalistes. Le test a été répété plusieurs fois dans différents navigateurs.

Résultats sur les navigateurs de bureau

• CSS d'abord : Les retards dans CSS étaient négligeables impact sur le temps de chargement de la page.
• JavaScript First : Lorsque CSS était retardé, la page se chargeait beaucoup plus rapidement, ce qui indique des performances améliorées.

Conclusions pour Navigateurs de bureau

Contrairement à la recommandation traditionnelle, placer des feuilles de style externes après des scripts externes peut offrir de meilleures performances. En effet, les navigateurs modernes implémentent une analyse spéculative, dans laquelle les ressources sont téléchargées en parallèle, quel que soit l'ordre dans lequel elles apparaissent dans le code HTML.

Navigateurs mobiles

Le test a été également effectué sur un appareil Android :

• JavaScript First : Le chargement du CSS a été observé comme étant retardé jusqu'à ce que l'exécution de JavaScript soit terminée, ce qui suggère que la prise en charge de l'analyse spéculative peut être limitée sur certains appareils mobiles. navigateurs.

Prise en charge des navigateurs

L'analyse spéculative est prise en charge par la majorité des navigateurs modernes, notamment Chrome, Internet Explorer 8 , Firefox 3.5 et Safari 4 . Cela signifie que pour la plupart des utilisateurs d'ordinateurs de bureau, placer JavaScript avant CSS offre un avantage en termes de performances.

Prenez en compte les contraintes mobiles

Sur les appareils mobiles, l'impact sur les performances du placement de JavaScript avant CSS peut varier en fonction des capacités du navigateur et de l'appareil. Les développeurs devraient envisager d'optimiser pour les utilisateurs mobiles en chargeant d'abord CSS, car l'analyse spéculative peut ne pas être entièrement prise en charge.

Notes supplémentaires

• Le placement des scripts dans le est supposé, par opposition à la fin du .
• Le les résultats s'appliquent aux feuilles de style et aux scripts externes. Les CSS et JavaScript en ligne peuvent suivre des considérations de performances différentes.
• D'autres facteurs, tels que le chargement asynchrone, les appels de service externes et la mise en cache du navigateur, peuvent avoir un impact sur les performances globales de la page.

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!