Différence de performance entre CSS externe et style en ligne?
Un de mes amis a dit qu'en utilisant <div style=""></div> au lieu d'un fichier css compressé mis en link href dans la section de tête donne une certaine amélioration des performances. Est-ce vrai?
L'amélioration des performances que votre ami a mentionnée est probablement trop insignifiante par rapport à l'ampleur de l'augmentation des performances (via d'autres facteurs) à l'aide d'un fichier CSS.
En utilisant l'attribut style, le navigateur ne peint que la règle pour cet élément particulier, qui dans ce cas est le <div> élément. Cela réduit le temps de recherche du moteur CSS pour trouver les éléments qui correspondent au sélecteur CSS (par exemple a.hover ou #someContainer li).
Cependant, mettre le style au niveau de l'élément signifierait que vous ne pouvez pas mettre en cache les règles de style CSS séparément. Habituellement, le fait de mettre des styles dans des fichiers CSS permettrait d'effectuer la mise en cache, réduisant ainsi la charge du serveur à chaque fois que vous chargez une page.
Le fait de placer des règles de style au niveau des éléments vous fera également perdre de vue quels éléments sont stylisés de quelle manière. Cela pourrait également se retourner contre l'augmentation de performances de la peinture d'un élément particulier où vous pouvez repeindre plusieurs éléments ensemble. L'utilisation de fichiers CSS sépare le CSS du HTML et vous permet ainsi de vous assurer que vos styles sont corrects et qu'il est plus facile de les modifier ultérieurement.
Par conséquent, si vous regardez la comparaison, vous constaterez que l'utilisation d'un fichier CSS présente beaucoup plus d'avantages que le style au niveau de l'élément.
N'oubliez pas quand vous avez un fichier de feuille de style CSS externe, votre navigateur peut mettre en cache le fichier, ce qui augmente l'efficacité de votre application!
La page se chargera plus rapidement si vous utilisez des styles en ligne par rapport aux feuilles de style. Dans certains cas, doit plus rapidement.
Lorsque vous utilisez une feuille de style à l'aide de href, elle nécessite une autre demande au serveur, puis l'analyse du fichier après réponse. Avec les styles en ligne, rien de tout cela, juste une analyse directe.
Si un client a un Internet lent, cette seule demande peut être très lente, laissant la page sans style jusqu'à ce que la feuille de style soit livrée. 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é. 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.
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 en ligne:
Style en ligne vs classe CSS
C'est possible, mais la raison de la feuille de style liée ou externe est qu'elle peut être mise en cache dans le navigateur, en particulier lorsque vous utilisez la même div sur plusieurs pages pour le site. Cela signifie que le navigateur ne doit charger la feuille de style qu'une seule fois au lieu d'avoir à recharger le code à chaque fois que le navigateur recharge la page. Il rend également le code plus propre, ce qui facilite les modifications ou le débogage.
LA VÉRITÉ IS 'OUI'
Il ya une énorme différence. Surtout lorsque vous automatisez l'interface utilisateur. Essayez le code suivant. J'utilise IE10 et le bloc-notes pour développer. J'apprends au fur et à mesure et je fais des tests, c'est un test de version raccourci. (il y a peut-être des erreurs car j'ai réduit le code pour afficher votre réponse)
Cliquez sur l'image que vous référencez et lisez les messages d'alerte. CONSEIL: Enregistrez à nouveau ce fichier et enregistrez-le en tant qu'édition avant de l'éditer (test).
Meilleurs voeux, Don
<!DOCTYPE html>
<head>
<style>
div.grid
{
width:180px;
height:42px;
border:none;
}
img
{
width:50px;
height:50px;
margin:2px;
float:left;
border: 1px solid red;
}
</style>
<script>
function handleSelect(xId)
{
//
// TESTPOINT
alert("TESTPOINT\r>Grid: " + xId);
//
// GET BORDER COLOR
// NOTE: An empty or blank value when you can see a border means the tag itself does not
// have 'border properties' (style="border: 2px{width} solid{style} green{color}").
// although there can be a border detailed via css local or external or via code (script).
// If the 'border properties' are returned then they were setup at the tag as
// above or the 'border properties' were updated by script code not css code.
// If the 'border properties' are NOT returned then they were setup via css.
// Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
// HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
// Thus, setting the property values of a tag should be set at the tag control.
// (works) cBorder=document.getElementById(xId).style.borderWidth;
// (works) cBorder=document.getElementById(xId).style.borderStyle;
// (works) cBorder=document.getElementById(xId).style.borderColor;
// (works) cBorder=document.getElementById(xId).style.border;
//cBorder=document.getElementById(xId).style.border;
cBorder=document.getElementById(xId).style.margin;
alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
//
// SELECT IMAGE
document.getElementById(xId).style.margin="1px";
document.getElementById(xId).style.border="2px solid gold";
document.getElementById(xId).innerHTML=xId;
alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
//
// GET BORDER COLOR
//var cBorder=document.getElementById(xId).style.border-Color; //Error
//var cBorder=document.getElementById(xId).style.border-color; //Error
//var cBorder=document.getElementById(xId).style.borderColor; //Error
//var cBorder=document.getElementById(xId).style.bordercolor; //Undefined
cBorder=document.getElementById(xId).style.border; //Empty
alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
}
</script>
</head>
<body>
<div class="grid">
<img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
<img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
<img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
</div>
<div class="grid">
<img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
<img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
<img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
</div>
<div class="grid">
<img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
<img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
<img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
</div>
</body>
</html>