Un de mes amis a déclaré que l'utilisation <div style=""></div>
au lieu d'un fichier css compressé placé comme link href
dans la section principale donne une certaine amélioration des performances. Est-ce vrai?
Un de mes amis a déclaré que l'utilisation <div style=""></div>
au lieu d'un fichier css compressé placé comme link href
dans la section principale donne une certaine amélioration des performances. Est-ce vrai?
Réponses:
L'amélioration des performances mentionnée par votre ami est probablement trop insignifiante par rapport à l'augmentation des performances (via d'autres facteurs) à l'aide d'un fichier CSS.
En utilisant l'attribut style, le navigateur peint uniquement la règle pour cet élément particulier, qui dans ce cas est l' <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, 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.
Mettre des règles de style au niveau de l'élément vous fera également perdre de vue quels éléments sont stylés de quelle manière. Cela peut également se retourner contre l'amélioration des 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 verrez que l'utilisation d'un fichier CSS a beaucoup plus d'avantages que le style au niveau de l'élément.
Ne pas oublier lorsque 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, il faut plus rapide.
Lorsque vous utilisez une feuille de style utilisant href, cela nécessite une autre requête au serveur, puis l'analyse du fichier après réponse. Avec les styles en ligne, il n'y a rien de tout cela, juste une analyse directe.
Si un client a une connexion Internet lente, 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 la performance dans ce cas dépend de nombreux facteurs (complexité des sélecteurs CSS, taille du document, etc.). Cependant, si nous prenons un cas isolé, alors nous pouvons voir que la classe CSS est en général plus rapide que le style en ligne:
style Inline vs classe CSS
Eh bien, 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 le même div dans plusieurs pages pour le site. Cela signifie que le navigateur n'a qu'à charger la feuille de style une seule fois au lieu d'avoir à recharger le code à chaque fois que le navigateur recharge la page. Cela permet également un code plus propre 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 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. ASTUCE: enregistrez ce fichier et enregistrez-le à nouveau en tant que modification avant de le modifier (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>
Il n'y a pas de réponse fixe à mon avis.
Un inline CSS
se chargera plus rapidement si la taille du contenu CSS se télécharge plus rapidement que votre serveur ne répondrait à une external CSS file
demande (compte tenu du temps DNS, de la latence du serveur, etc.).
Pour les CSS de taille normale, je les intégrerais dans la page, pour quelque chose de plus de 15-20 Ko, je le mettrais probablement dans un fichier externe et je m'assurerais qu'il peut être mis en cache.
Je suis sûr qu'il y a beaucoup d'autres considérations qui me manquent maintenant, mais il n'y a pas de réponse fixe pour en ligne ou externe.
L'utilisation de feuilles de style externes est certainement une meilleure option car elle vous aidera à vous souvenir du style que vous avez appliqué sur les div (s). Cela réduit le temps de chargement de la page car plus le code HTML est petit, plus il se charge rapidement.
Mais dans certains cas, vous devrez peut-être modifier une propriété d'un div particulier, le style en ligne est la meilleure option. Et à vrai dire, un ou deux styles en ligne n'apporteront aucun changement au moment du chargement de la page.
Il existe une autre option de feuille de style interne, mais elle n'est utilisée que 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
Je préfère utiliser le CSS en ligne plutôt que le CSS externe où il y a plusieurs petits fichiers CSS pour chaque autre élément ou image. Inutile de télécharger plusieurs fichiers CSS avec seulement 5 à 10 lignes de code dans chacun. Si votre élément contient des propriétés telles que survol, actif, coché, etc., vous êtes alors censé utiliser un fichier CSS externe car cela évitera de compliquer votre processus de développement.