CSSのレンダリング速度に影響を与える10の書き方と使い方の提案 Page 1/3_Experience Exchange

最近 css を書くことはめったにありませんし、今後も書くことは少なくなるかもしれません。そのため、少しでもお役に立てればと思い、私の経験の一部を皆さんと共有したいと思います。

この記事はクライアントブラウザでのwebページの表示速度を向上させるcss部分を中心に10項目に暫定的にまとめたものです。

1. *{} #jb51 *{} は避けてください

ブラウザごとに html タグの解釈が異なるため、最終的な web ページの効果はブラウザごとに異なります。このリスクを排除するために、デザイナーは通常、css の先頭にあるすべてのタグのすべてのデフォルト属性を削除して、すべてのタグの属性値を統一する効果を実現します。したがって、* ワイルドカードがあります。 * すべてのタグを走査します。

*{margin:0; padding:0}

このように記述すると、ページ上のすべてのタグのマージンは 0 になり、パディングも 0 になります。

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

このように書くと、jb51 に等しい id の下にあるすべてのタグのマージンはすべて 0 になり、パディングも 0 になります。
/>
この方法で記述する場合の問題 はい:
a. トラバースには多くの時間がかかります。html コードが標準化された方法で記述されていない場合、または特定のタグが必ずしも一致しない場合、今回はさらに長くなる可能性があります;
b. 多くの場合、タグにこの属性がないか、属性自体が統一されているため、再設定に時間がかかります。

推奨される解決策:
a. 馴染みのないタグは使用しないでください。これらのタグはブラウザによって解釈が異なることが多いため、一般的に使用されるタグをできるだけ使用する必要があります。
b. 代わりに *; を使用しないでください。 、process でよく使用するタグを使用します。例: body,li,p,h1{margin:0; padding:0}

2. 一部のフィルターは使用しないでください。
>
一部の ie フィルタは firefox ではサポートされていません。エフェクトを作成するときは、今でも css hack を使用することがよくあります。フィルタは非常にリソースを消費します。特にフェザリング、シャドウ、前面透明エフェクトなどです。
例: シャドウ効果:

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

提案される解決策:
a. を使用できない場合は、それは使用しないでください。一方で、互換性の問題があります。多くの効果は ie でのみ使用できます。
b. この場合、そのような効果が必要な場合は、使用することをお勧めします。背景としての画像; (ここでは速度の最適化についてのみ説明しますが、実際のアプリケーションでも小さな部分で使用できます。人によっては、画像を使用すると http リクエストが 1 つ増えると言うかもしれません(笑)。 ..)

非常に良い例として、今年 5 月 12 日の地震の際、多くの web サイトが一夜にして変更され、灰色になり、css コードは 1 行しか使用されていませんでした。


プログラムコード

body{filter: gray;}

しかし、これらの web ページは非常に遅く、開くと cpu の使用率が急上昇することがわかります。と言っても過言ではありません。コンピュータの設定が悪い場合は、命を落としても過言ではありません。

3. ページ上での絶対位置の使用を減らします

絶対位置 (position:absolute) は、web ページのレイアウトで、特にフローティング効果を作成する場合に非常に一般的に使用されます。ページをとてもクールに見せます。ただし、web ページ内で絶対位置指定を多用すると、web ページが非常に遅くなり、この点では firefox のパフォーマンスは ie よりもさらに悪くなります。

例:

プログラム コード

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

提案される解決策:
aできるだけ使用しないでください。この使用量を減らすことの価値を説明するのにあまり適切な値はありません。絶対位置タグの内容にも依存します。ここでは、次のように書くことしかできません。
パフォーマンス上の問題があるため、使用は慎重に行ってください。
b. 回避策を使用しても同じ効果が得られる場合は、回避策を使用します。

4. 背景画像の背景タイリング

一部の web ページの背景またはページの特定の部分の背景には、通常、画像のタイリングが必要です。タイリングの回数は、1回なら大丈夫ですが、複数回だとダメです。

簡単な例:

例 1: ページをスクロールして速度を確認してください。

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

例 2: 同じ効果なので、もう一度試してください。

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

注: 上記の 2 つの効果をテストしてください。コンピュータの状態が悪くなるほど、その影響がより顕著になります。コンピュータの構成が非常に良好な場合は、8000 ピクセルを変更できます。 9000000pxまでにしてみて、それでもダメなら大きいサイズに変更してみてください
心配なら叱らないでください！

推奨される方法:
a. 色の少ない画像は gif 画像にする必要があります。
b. タイル状の画像はできるだけ大きくする必要があります。gif 画像の場合は、色が少ない場合、画像が大きい場合、実際のサイズはそれほど大きくなりません。上記の 2 つの例は、最初の画像が非常に小さく、2 番目の画像が大きいことを示す良い証拠です。ただし、速度は大きく異なります。

5. できるだけ多くの属性を継承する

可能な限り、子が親を上書きするのではなく、親から一部の属性を継承するようにします。

簡単な例:

<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. 空のクラスやクラスを配置しないでください。 html コード;

9. float の適用
私の感覚では、これを不適切に使用すると、間違いなくパフォーマンス上の問題が発生し、サイズも非常に大きいのですが、実際にはそうではありません。ここで私が言えるのは、float の仕組みをよく理解していない場合は、float の使用を控えた方がよいということだけです。

10. 合理的なレイアウト
なぜそう言えるのかというと、合理的なレイアウトは css の書き方や描画処理を変える可能性があります。

実際には、css パーツとして要約できないものもあります。

上記は、css のレンダリング速度に影響を与える 10 個の書き方と使用方法の提案です。 page 1/ 3_ 体験交換コンテンツについては、php 中国語 web サイト (www.php.cn) に注目して、関連コンテンツをご覧ください。