CSSページのレンダリング効率を高める11点の注意事項

1、16進数の色の値は桁数と小文字に対して  16進数の色の値を書く時、小文字で書いたり、3桁に省略したりすることがありますが、この書き方については確かなデータが見つかりません。ブラウザのレンダリング効率に影響がありますか？しかし、16進数の色の値はデフォルトでは大文字と6桁の表記です。未知の状況において冒険を望まずレンダリングの効率を低下させた。  * 賛成しない - カラー:(菗f 3 a)  * 推奨 - カラー：AA  2、displayとvisibilityの違い  彼らはオブジェクトを設定したり検索したりします。display隠しオブジェクトは物理空間を保持しません。visibilityは隠しオブジェクトのために占有された物理空間を保持します。ブラウザが占有されている物理空間をレンダリングすると、リソースが消耗されます。  * 賛成しない - visibility：hidden  * 推奨 - display:none;  3、border：noneborderと:0の違い  displayとvisibilityの関係は似ていて、それぞれ残して空間を保留しません。もっと多いのはborder:0です。枠を隠すことはできますが、border-border-styleの使用権を保持します。  * 賛成しない - border:0  * 推奨 - border：none  4、小さい背景画像を使ったことがあるべきではない。  一枚の幅の高い1 pxの背景画像は、ファイルの体積が非常に小さいですが、幅の高い500 pxをレンダリングするプレートは2,500回並べて並べる必要があります。背景画像のレンダリング効率を向上させることは、画像サイズと体積と関係があり、最大の画像ファイルの体積は約70 KBを維持する。  * 賛成しない - 横長8 px以下の横長の背景画像  * 推奨 - 適当な体積とサイズを測定する背景写真  5、IEフィルタを慎む  IEのフィルタは、消耗資源の比較に加えて、互換性の問題もある。中には、PNGを透明にするフィルターがあり、GIFやJPGが透過しないようにする方法で、このフィルタを使用しないようにします。GIFの透明性はIE 6にのみ適用することを推奨します。IE 7以上でPNGの透明性がサポートされています。  * いいえ、IEフィルタの乱用は資源の消耗以外にも互換性の問題があります。  * 他の方法を選んだ方がいいです。フィルターの使用は避けられます。  6、*{ magin:0 padding:0;ブラウザスタイルの違いを避ける  *番号のワイルドカードはすべてのラベルを初期化して、ブラウザのレンダリングは一定の資源を消耗します。一部のタブは、異なるブラウザではほとんど違いがありません。または、いくつかのもう推奨されていないタブがあります。それらはワイルドカードではなく、もう一度初期化する必要があります。このようにすれば、資源を節約できます。  * 賛成しません。*号のワイルドカードを使います。  * 賛成しません span ブトン b テーブルなどのラベルをワイルドカードに組み入れることで、内外の塗りつぶしスタイルをコントロールします。  * ワイルドカードを選択的に使用して、内外の塗りつぶしスタイルを制御することを提案します。  7、追加のラベルを付けないで、クラスやidを説明します。  オプションがある場合は、IDをキーとして選択します。余分な署名を追加しないでください。IDは唯一なので、存在しない理由のためにマッチングの効率を下げないでください。  * 賛成しない - ブットン { }  * 賛成しない - .menu-left #newMenuIcon { }  * 推奨 - #back Buton { }  * 推奨 - #newMenuIcon { }  8、できるだけ特殊な種類を選んでセレクタを保存します。  システムの効率を低下させる最大の理由は、ラベルの種類に多すぎる選択符を使ったからです。追加 クラス 元素まで、私達は分類を行って更に細分します。 クラス このようにラベル一つのために時間を無駄にして多すぎる選択符に合わせる必要はありません。  * 賛成しない - treeitem[mail folder=true] > treerow > treecel { }  * 推奨 - .treecel-mail folder { }  9、子孫選択を避ける  子孫選択子はCSSの中で最も資源が消費される選択子である。彼は本当に資源を消耗します。特に選択器がラベル類や通用類を使う時です。多くの場合、私達が本当に欲しいのは子選択符です。明確な説明がない限り、 UI。 CSS の中では、子孫選択符の使用は禁止されています。  * 賛成しない - treehead treerow treecel { }  * いいですが、やはりだめです。 - treehead > treerow > treecel { }  10、ラベル類にはサブ選択子を含まないでください。  ラベル類にサブ選択子を使用しないでください。さもないと、毎回の元素の出現に応じて、予想外にマッチ時間が増加します。特にセレクタが大半一致するような場合）  * 賛成しない - treehead > treerow > treecel { }  * 推奨 - .treecel-header { }  11、すべてのサブ選択子の使用に留意する。  注意して子選択符を使います。彼を使わない方法を考え出せば、使わないでください。特に RDF 木やメニューは頻繁にサブ選択符を使います。このように。  * 賛成しない - treeitem[IsImap Server="true" > treerow > .tree-folderone-incon { }  覚えてください RDF の属性はテンプレートにコピーできます。この点を利用して、属性に基づいて変えたいものをコピーできます。 XUL 元素上の RDF を選択します。  * 推奨 - .tree-folderone-incon[IsImap Server="true" { }