10 Schreib- und Verwendungsvorschläge, die sich auf die CSS-Rendering-Geschwindigkeit auswirken Seite 1/3_Erfahrungsaustausch

Ich schreibe in letzter Zeit selten CSS, und vielleicht werde ich auch in Zukunft weniger schreiben, daher möchte ich trotzdem einige meiner Erfahrungen mit Ihnen teilen und hoffe, Ihnen etwas helfen zu können!

In diesem Artikel geht es hauptsächlich um den CSS-Teil, der die Rendering-Geschwindigkeit von Webseiten in Client-Browsern verbessert. Er hat vorübergehend 10 Elemente zusammengefasst.

1. *{} #jb51 *{} Versuchen Sie es zu vermeiden

Da verschiedene Browser unterschiedliche Interpretationen von HTML-Tags haben, kann der endgültige Webseiteneffekt in verschiedenen Browsern unterschiedlich sein Um dieses Risiko auszuschließen, entfernen Designer normalerweise alle Standardattribute aller Tags am Anfang von CSS, um den Effekt einheitlicher Attributwerte für alle Tags zu erzielen. Es gibt also den Platzhalter *. * durchläuft alle Tags;

*{margin:0; padding:0}

Wenn es so geschrieben wird, sind die Ränder aller Tags auf der Seite ebenfalls 0;

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

Wenn es so geschrieben wird, sind die Ränder aller Tags unter der ID gleich 0; die Auffüllung ist ebenfalls 0; So zu schreiben ist:
a .Traversal wird viel Zeit in Anspruch nehmen. Wenn Ihr HTML-Code nicht standardisiert geschrieben ist oder ein bestimmtes Tag nicht unbedingt übereinstimmt, kann diese Zeit sogar noch länger dauern.
b. Viele Tags verfügen nicht über dieses Attribut oder es ist in sich einheitlich, daher wird es einige Zeit dauern, es wieder einzurichten.

Vorgeschlagene Lösungen:
Verwenden Sie keine unbekannten Tags werden häufig in verschiedenen Browsern verwendet. Die Auswirkungen der Interpretation sind daher so weit wie möglich. Verwenden Sie stattdessen nicht *; , li, p, h1 {margin:0; padding:0}

2. Einige Filter von IE werden in FIREFOX nicht unterstützt beim Schreiben einiger Effekte. CSS-HACK; und Filter sind eine sehr ressourcenarme Sache; 🎜>

Vorgeschlagene Lösungen:
a. Wenn Sie es nicht verwenden können, können Sie es nicht verwenden 🎜>b. Wenn Sie dies tun müssen, wird für den besten Effekt empfohlen, Bilder als Hintergrund zu verwenden (ich spreche nur von der Optimierung der Geschwindigkeit, aber es kann trotzdem in kleinen Teilen verwendet werden). Einige Leute sagen vielleicht, dass die Verwendung von Bildern eine weitere HTTP-Anfrage bedeutet.

Ein sehr gutes Beispiel ist, dass während des Erdbebens am 12. Mai dieses Jahres viele Websites nur grau wurden Ich habe eine Zeile CSS-Code verwendet:


Programmcode

<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>

Sie werden jedoch sehen, dass diese Webseiten sehr sind langsam, und Ihre CPU wird nach dem Öffnen anschwellen. Es ist keine Übertreibung zu sagen, dass es Sie nicht übertreibt, wenn Ihre Computerkonfiguration schlecht ist.

3. Verwenden Sie die absolute Positionierung seltener auf einer Seite

Absolute Positionierung (Position:absolut) wird sehr häufig im Webseitenlayout verwendet, insbesondere wenn einige schwebende Effekte erstellt werden Die Seite sieht besser aus. Wenn Sie jedoch zu viele
absolute Positionierungen auf einer Webseite verwenden, wird Ihre Webseite sehr langsam. In dieser Hinsicht ist die Leistung von FIREFOX noch schlechter als die von IE.

Zum Beispiel:

body{filter: gray;}

Programmcode

Vorgeschlagene Lösung:
a. Verwenden Sie es so wenig wie möglich, das ist weniger Es gibt keinen sehr guten Wert, um den Wert zu erklären. Er hängt auch vom Inhalt des absoluten Positionierungs-Tags ab. Ich kann hier nur sagen, dass das Schreiben von
zu Leistungsproblemen führt. Verwenden Sie es daher sparsam.
b. Wenn Sie mit einem Workaround den gleichen Effekt erzielen können, verwenden Sie einen Workaround.

4. Kacheln von Hintergrundbildern

Der Hintergrund einiger Webseiten oder der Hintergrund eines bestimmten Teils der Seite erfordert normalerweise das Kacheln von Bildern Das Problem ist, wenn es einmalig ist, ist es in Ordnung, aber wenn es mehrmals ist, ist es nutzlos.

Ein einfaches Beispiel:

Beispiel 1: Scrollen Sie auf Ihrer Seite und sehen Sie, wie die Geschwindigkeit ist?

<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>

Beispiel 2: Gleicher Effekt, versuchen Sie es noch einmal!




Hinweis: Je schlechter Ihr Computer ist, desto offensichtlicher wird es sein. Wenn Ihre Computerkonfiguration sehr gut ist, können Sie die 8000px ändern 9000000px und probieren Sie es aus. Wenn es immer noch nicht funktioniert, ändern Sie es
, um es größer zu machen, und schimpfen Sie nicht mit mir, wenn Sie sich Sorgen machen!

Empfohlene Vorgehensweisen:
Bilder mit wenigen Farben sollten in GIF-Bilder umgewandelt werden;
B. Kachelbilder sollten so groß wie möglich sein Das Bild sollte nicht viel größer sein; die beiden Beispiele oben beweisen es sehr gut, und das zweite Bild ist sehr unterschiedlich;

5. Lassen Sie so viele Attribute wie möglich vererben

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

Lassen Sie einige Attribute des untergeordneten Elements so weit wie möglich das übergeordnete Element erben, anstatt das übergeordnete Element zu überschreiben.

Ein einfaches Beispiel:

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

<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）！