10 suggestions d'écriture et d'utilisation qui affectent la vitesse de rendu CSS Page 1/3_Experience Exchange

J'écris rarement du CSS récemment, et j'écrirai peut-être moins à l'avenir, donc je souhaite quand même partager certaines de mes expériences avec vous, dans l'espoir de vous aider !

Cet article traite principalement de la partie CSS qui améliore la vitesse de rendu des pages Web dans les navigateurs clients. Il a temporairement résumé 10 éléments.

1. *{} #jb51 *{} Essayez d'éviter

Étant donné que différents navigateurs ont des interprétations différentes des balises HTML, l'effet final de la page Web peut être différent selon les navigateurs Différemment, dans l'ordre Pour éliminer ce risque, les concepteurs suppriment généralement tous les attributs par défaut de toutes les balises au début du CSS afin d'obtenir l'effet de valeurs d'attribut uniformes pour toutes les balises. Il y a donc le caractère générique *. * traversera toutes les balises ;

*{margin:0; padding:0}

Si écrit comme ceci, les marges de toutes les balises de la page seront également de 0 ;

#jb51 *{margin:0; padding:0}

Si c'est écrit comme ça, les marges de toutes les balises sous l'ID égal à jb51 sont toutes à 0 ; le remplissage est également à 0

Le problème avec ; écrire comme ceci est :
a .Traversal prendra beaucoup de temps. Si votre code HTML n'est pas écrit de manière standardisée ou si une certaine balise ne correspond pas nécessairement, ce temps peut être encore plus long ; De nombreuses balises n'ont pas cet attribut ou cet attribut. Il est unifié en lui-même, il faudra donc du temps pour le reconfigurer

Solutions suggérées :
a. sont souvent utilisés dans différents navigateurs Les effets d'interprétation sont différents, vous devez donc utiliser autant que possible les balises couramment utilisées
b. N'utilisez pas *; , li, p, h1 {margin:0; padding:0}

2. N'utilisez pas certains filtres

Certains filtres d'IE ne sont pas pris en charge dans FIREFOX. lors de l'écriture de certains effets, CSS HACK ; et les filtres nécessitent beaucoup de ressources ; en particulier certains effets de contour, d'ombres et de transparence frontale

Par exemple, un effet d'ombre :

<style> 
body {margin:100px;} 
#login_b {width:200px;height:200px;background:#000;-moz-opacity:0.2; filter:alpha(opacity=20);
margin:-30px 0 0 600px; position:absolute;} 
#login_t { z-index:10;border:1px solid #006600;width:200px;height:200px;background:#FFF;
margin:-35px 0 0 595px; position:absolute;} 
#info{ background:#009900; height:155px;} 
</style> 

<div id="info"> 
<div id="login_t">test</div> 
<div id="login_b"></div> 
</div>

Solutions suggérées :

a. Si vous ne pouvez pas l'utiliser, ne l'utilisez pas. D'une part, il existe des problèmes de compatibilité ; 🎜>b. Dans ce cas, si vous devez faire cela, pour le meilleur effet, il est recommandé d'utiliser des images comme arrière-plan (je parle uniquement d'optimiser la vitesse. Dans les applications réelles, cela peut toujours être utilisé dans petites parties. Certaines personnes diront peut-être que l'utilisation d'images nécessite une
requête HTTP supplémentaire, haha...)

Un très bon exemple est que lors du tremblement de terre du 12 mai de cette année, de nombreux sites Web sont devenus gris du jour au lendemain. Ils n'ont utilisé qu'une seule ligne de code CSS :


Code du programme

body{filter: gray;}

Cependant, vous verrez que ces pages Web sont très lents et votre processeur augmentera après leur ouverture. Il n'est pas exagéré de dire que si la configuration de votre ordinateur est mauvaise, ce n'est pas une exagération de vous tuer.

3. Utilisez moins souvent le positionnement absolu sur une page

Le positionnement absolu (position:absolute) est très couramment utilisé dans la mise en page Web, notamment lors de la création de certains effets flottants, il rendra également le positionnement absolu moins fréquent. la page est plus belle. Elle a l'air très cool. Cependant, si vous utilisez trop de
positionnement absolu dans une page Web, votre page Web deviendra très lente. À cet égard, les performances de FIREFOX sont encore pires que celles d'IE.

Par exemple :

Code du programme




Solution suggérée :

a. Utilisez-le le moins possible, c'est moins. used Il n'y a pas de très bonne valeur pour expliquer quelle est la valeur ; cela dépend aussi du contenu de la balise de positionnement absolu ; ici, je peux seulement dire qu'écrire

<style>li{ position:absolute;}</style> 
<ul> 
<li style="left:10px; top:20px">001</li> 
<li style="left:30px; top:70px">001</li> 
<li style="left:40px; top:50px">001</li> 
…… 
</ul>

comme ceci entraînera des problèmes de performances, alors utilisez-le avec parcimonie.

b. Si vous pouvez obtenir le même effet avec une solution de contournement, utilisez une solution de contournement.

4. Mosaïque des images d'arrière-plan

L'arrière-plan de certaines pages Web ou l'arrière-plan d'une certaine partie de la page nécessite généralement une mosaïque d'images. Après la mosaïque, il y aura un certain nombre de mosaïques. le problème est que si c'est une seule fois, c'est bien, mais si c'est plusieurs fois, c'est inutile.

Un exemple simple :

Exemple 1 : Faites défiler votre page et voyez quelle est la vitesse ?


Exemple 2 : Même effet, réessayez !

<div style="height:8000px; background:url(http://img.jb51.net/images/i2008962026.gif)"></div>

Instructions : Testez les deux effets ci-dessus. Plus votre ordinateur est mauvais, plus cela sera évident. Si la configuration de votre ordinateur est très bonne, vous pouvez essayer de changer le 8000px. à 9000000px Essayez-le, si ça ne fonctionne toujours pas, changez-le

<div style="height:8000px; background:url(http://img.jb51.net/images/120089620424.gif)"></div>

pour qu'il soit plus grand, ne me grondez pas si vous êtes inquiet !

Pratiques suggérées :
a. Les images avec peu de couleurs doivent être transformées en images GIF
b. Les images en mosaïque doivent être aussi grandes que possible. l'image doit être plus grande. La taille réelle ne sera pas beaucoup plus grande ; les deux exemples ci-dessus le prouvent très bien. La première image est très
et la deuxième image est plus grande ;
5. Laissez autant d'attributs être hérités que possible

Autant que possible, laissez certains attributs de l'enfant hériter du parent au lieu d'écraser le parent

Un exemple simple :

<style> 
a:link,a:visited{color:#0000FF} 
a:hover,a:active{color:#FF0000} 
#jb51 a:link,#jb51 a:visited{ font-weight:bold} 
#jb51 a:hover,#jb51 a:active{ font-style: italic;} 
</style> 
<div><a href="#">test</a><div> 
<div id="jb51"><a href="#">jb51</a></div>

<style> 
a:link,a:visited{color:#0000FF} 
a:hover,a:active{color:#FF0000} 
#jb51 a:link,#jb51 a:visited{ font-weight:bold} 
#jb51 a:hover,#jb51 a:active{ font-style: italic;} 
</style> 
<div><a href="#">test</a><div> 
<div id="jb51"><a href="#">jb51</a></div>

实际上我是让jb51去继承我默认设置的属性，因为那些属性已经存在了。 

另外再说几个不是特别重要的地方，平时注意一点就行了，没有上边这几个影响那么大： 

6、CSS的路径别太深； 
例如： 

程序代码 

#jb51 #info #tool #sidebar h2{ font-size:12px;}

7、能简写的一些就简写； 
例如：

#jb51{pading-top:10px; padding-right:50px; padding-left:50px; padding-bottom:4px;}

改成：

#jb51{padding:10px 50px 4px 50px}

 
这个对渲染速度没有影响；只是少几个字符； 

8、别放空的的class或没有的class在HTML代码中； 

9、float 的应用 
这个东西我的感觉是如果使用不当，百分百有性能问题，而且还非常的大，但实在不知道怎么样能弄一个例子出来；这里只能建议大家如果不是很明白float是怎么工作的，还是少使用为妙。 

10、合理的布局 
为什么这么说呢，合理的布局，可以改变CSS的写法以及渲染过程。 

其实有些不能总结为CSS部分； 

 以上就是10条影响CSS渲染速度的写法与使用建议第1/3页_经验交流的内容，更多相关内容请关注PHP中文网（www.php.cn）！