Différence de performances externe CSS vs style en ligne?

Un de mes amis a dit que l’utilisation de

au lieu du fichier CSS compressé mis en tant que link href au niveau de la section head donne un gain de performance. Est-ce vrai?

L’augmentation de la performance mentionnée par votre ami est probablement trop sortingviale par rapport à l’augmentation de la performance (via d’autres facteurs) en utilisant un fichier CSS.

En utilisant l’atsortingbut style, le navigateur ne peint que la règle pour cet élément particulier, qui dans ce cas est l’élément

. Cela réduit le temps de recherche du moteur CSS pour trouver les éléments correspondant au sélecteur CSS (par exemple, a.hover ou #someContainer li ).

Cependant, mettre un style au niveau des éléments signifie que vous ne pouvez pas mettre les règles de style CSS en cache séparément. Habituellement, mettre des styles dans les fichiers CSS permettrait de réaliser la mise en cache, ce qui réduirait la charge du serveur à chaque chargement d’une page.

Le fait de mettre des règles de style au niveau des éléments vous fera également perdre la trace des éléments stylés. Cela pourrait également avoir l’effet inverse de la performance de la peinture d’un élément particulier où vous pouvez repeindre plusieurs éléments ensemble. L’utilisation de fichiers CSS sépare le code CSS du code HTML, ce qui vous permet de vous assurer que vos styles sont corrects et plus faciles à modifier ultérieurement.

Par conséquent, si vous regardez la comparaison, vous verrez que l’utilisation d’un fichier CSS présente beaucoup plus d’avantages que le style au niveau des éléments.

Sans oublier que lorsque vous avez un fichier de feuille de style CSS externe, votre navigateur peut mettre le fichier en cache, ce qui augmente l’efficacité de votre application!

Eh bien, il peut, mais la raison de la feuille de style liée ou externe est qu’il peut être mis en cache dans le navigateur en particulier lorsque vous utilisez le même div dans plusieurs pages pour le site. Cela signifie que le navigateur doit uniquement charger la feuille de style une fois au lieu de recharger le code chaque fois que le navigateur recharge la page. Cela rend également le code plus propre, ce qui facilite les modifications ou le débogage.

LA VÉRITÉ EST ‘OUI’

Il ya une énorme différence. Surtout lorsque vous automatisez l’interface utilisateur. Essayez le code suivant. J’utilise IE10 et notepad pour développer. J’apprends au fur et à mesure que je vais faire des tests, c’est un test de version raccourci. (il y a peut-être des erreurs car j’ai réduit le code pour montrer votre réponse)

Cliquez sur l’image que vous référencez et lisez les messages d’alerte. ASTUCE: Enregistrez ce fichier à nouveau sous forme de modification avant de le modifier (tester).

Meilleurs voeux, Don

       

Ce n’est pas une question facile à répondre, car les performances dans ce cas dépendent de nombreux facteurs (complexité des sélecteurs CSS, taille du document, etc.). Cependant, si nous prenons un cas isolé, nous pouvons voir que la classe CSS est en général plus rapide que le style inline:
Style en ligne vs classe CSS

La page se charge plus rapidement si vous utilisez des styles en ligne et des feuilles de style. Dans certains cas, il doit être plus rapide.

Lorsque vous utilisez une feuille de style avec href, une autre demande doit être envoyée au serveur, puis l’parsing du fichier après la réponse. Avec les styles en ligne, il n’y a rien de plus que l’parsing directe.

Si un client dispose d’Internet lent, cette demande unique peut être très lente, laissant le style de la page moins jusqu’à la livraison de la feuille de style. Encore une fois, s’il était en ligne, il n’y aurait aucun retard.

La seule raison pour laquelle nous utilisons des feuilles de style est d’être organisée. Il y a des moments où ils ne sont pas nécessaires, donc les styles en ligne ou les feuilles de style dans le document suffisent.

Utiliser des feuilles de style externes est certainement une meilleure option car cela vous aidera à vous souvenir du style que vous avez appliqué aux div (s). Cela réduit le temps de chargement de la page car plus le code HTML est petit, plus le chargement est rapide.

Mais dans certains cas, vous devrez peut-être modifier certaines propriétés d’un div particulier, alors que le style en ligne est la meilleure option. Et à vrai dire, un ou deux styles en ligne ne changeront rien au temps de chargement de la page.

Il existe une autre option de feuille de style interne, mais elle est utilisée uniquement lorsque vous avez un site Web d’une seule page, comme si vous créez un modèle. C’est parce que vous devez écrire du CSS dans chaque page HTML