CSS_html/css_WEB-ITnose のレンダリング速度を向上させる方法

CSS はフロントエンド開発の最も単純な部分です。言うのは簡単ですが、それをうまく行うのは簡単ではないかもしれません。ページのレイアウトとスタイルを実装するだけならとても簡単ですが、コードの各行の実行効率を考慮すると、負荷がかかります。ブラウザ、そしてそれがユーザーエクスペリエンスに与える影響、おそらくそれは簡単なことではありません。

良い CSS を書く習慣と優れた CSS 仕様は、Web ページのレンダリング速度を向上させ、ページの読み込みを高速化し、ユーザー エクスペリエンスを向上させます。今日は、このシンプルだが効果的な、やや踏み込んだトピックを要約します。 CSS のレンダリング速度を向上させるため。

1. ワイルドカード セレクターを使用しないでください

ワイルドカード セレクターとは何ですか?平たく言えば、すべての要素、つまり * に一致するセレクターです。プログラマは、開発時に CSS をリセットするために *{margin:0; padding:0} を使用することがよくありますが、このメソッドは簡単に記述できますが、レンダリング時にブラウザ エンジンがすべてのタグを走査する必要があるため、使用しないことを強くお勧めします。こちらです！推奨される解決策: 例: body、div、p、ul、li、ol、ul{margin:0; padding:0} は、効率を向上させるために一緒に記述されます

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

絶対配置は、Web ページのレイアウト、特にナビゲーション バーなどのフローティング効果を作成する場合に非常に一般的に使用されます。ただし、ブラウザのレンダリング メカニズムにより、Web ページで絶対位置を多用しすぎると、Web ページが非常に遅くなります。推奨される解決策: 使用量をできるだけ少なくし、同じ効果が得られる場合は回避策を使用します。

3. できるだけ多くの属性を継承します

可能な限り、一部の属性は親要素を上書きするのではなく、親要素から継承させます。

4. CSS のレイヤーは 3 つまでにしてください。これはあまりお勧めできません。 : .main_wct{font -size:12px;}。

5. 空のクラスを置かないでください

HTML コードに空のクラスを入れたり、クラスを入れたりしないでください。意味がありません。

6. 合理的なレイアウト

合理的なレイアウトは、CSS の記述方法とレンダリングプロセスを変更することができます。レイアウトは、Web サイトの初期化時に読み込まれる要素の順序、ユーザーエクスペリエンスのレベルを決定します。 、など。

私は若いおじさんです

フロントエンド開発エンジニア、個人 WeChat 公開アカウント: xuebing_wxb