css パフォーマンスチューニング_html/css_WEB-ITnose

CSS パフォーマンスの最適化:

1. スタイルタグ関連のチューニング
2. 特別な CSS スタイルの使用
3. CSS の省略形 (色、上、下、左の結合など)
4. CSS 宣言 (ページ上のクラスはグローバル スコープ内にあります)一意である必要があります。多くの場合、スタイルと要素を分離して配置するよりも、一意のクラス名を持つノードを見つける方が高速です。
5. CSS セレクター (ID セレクターが最も効率的で、他のサブ) -セレクターが最も効率的です)、マッチングが遅くなります) (子、一般的なセレクターを使用しないでください)
6. CSS スタイルの単語略語の最適化 (長すぎる名前を使用しない)
7. 句読点の最適化 (スペースの削除、改行の削除、最後のセレクターを削除します セミコロン ? )
8. CSS の再利用の最適化 (共有コードブロック)
9. CSS の継承メカニズムに注意してください

HTML ページの先頭にスタイルシートを置きます:

CSS 式を避ける:

CSS 式の場合

 Background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" )

ログイン後にコピー

式は IE でのみサポートされており、ほとんどの人が考えているよりも頻繁に実行されます。ページのレンダリングやサイズ変更時 (サイズ変更) だけでなく、ページのスクロール時 (スクロール)、さらにはマウスがページ上でスライドしたときも実行されます。式にカウンタを追加すると、式がかなり頻繁に実行されることがわかります。マウスのスクロールにより、簡単に式が 10,000 回以上実行される可能性があります。

フィルターの使用を避ける:

CSS 略語:

Color を省略する方法は、一般に 2 つの省略形の繰り返しに基づいています

 list-style-type: square;  list-style-position: inside;  List-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif)

Font-style: italic;  Font-variant: small-caps;  Font-weight: bold;  Font-size: 1em;  Line-height: 140%;  Font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief 

 #000000     ------>>     #000  #336699     ------>>     #369

1. CSS テキスト: font-size:12px; font-family:Arial 、 Helvetイカ, sans-serif; line-height:22px; font:12px/22px ボールド Arial、Helvetica、sans-serif と省略できます。 2. CSS 背景: 背景色: #F00; :url(image address);background-position:bottom;background-repeat:no-repeat; 背景 CSS プロパティは、background :#F00 url(image address) no-repeat leftbottom;www と省略できます。 divcss5.comの略称。

5. DW 正規表現のバッチ置換の使用例 http://oa.yubooa.com/html/4588.html

http://www.ibm.com/developerworks/web/1109_zhouxiang_optcss/
http://www.divcss5.com/rumen/r115.sh TML