CSS を使用してページのパフォーマンスを向上させるには?

創造し続け、成長を加速！「ナゲッツデイリー新プラン・10月アップデートチャレンジ」参加4日目、イベント詳細はこちら

こんにちは、CoderBin です。

I.はじめに

すべての Web ページは切り離すことはできませんが、一部の詳細や最適化など、主にページレイアウトを完成させるために使用されcssていると考えている人が多いcssため、それについて考える必要はありません。

ページのレンダリングとコンテンツ表示の重要な部分として、cssWeb サイト全体のユーザーの最初のエクスペリエンスに影響を与えます。

したがって、製品開発プロセス全体で、cssパフォーマンスの最適化もプロセス全体で実行する必要があります。

2. 実施方法

実装には多くの方法がありますが、主なものは次のとおりです。

スクロールせずに見える位置にある重要な CSS のインライン化
CSS を非同期的に読み込む
リソース圧縮
セレクターを賢く使う
高価な物件の使用を減らす
@import を使用しないでください

2.1 フォールド上のインラインキー CSS

ページを開くとき、ページのメインコンテンツが画面に表示される時間はユーザーエクスペリエンスに影響し、cssキーコードをインライン化することで、ブラウザはダウンロードhtml直後に。css構造の解析中に外部参照コードhtmlが検出された場合、外部cssファイルがダウンロードcssされてレンダリングされます。そのため、CSSインラインで使用するとレンダリング時間が早くなります

注: ただしcss、コードの残りの部分は外部から参照されますが、大きなコードはインライン化には適していません (最初の輻輳ウィンドウ、キャッシュなし)。

2.2 CSS の非同期ロード

CSSファイルのリクエスト、ダウンロード、および解析が完了するまでレンダリングはブロックされCSS、ブラウザは処理されたコンテンツをレンダリングしません。インラインコードが前面にロードされたcss後、外部参照の後にブラウザーのレンダリングをブロックする必要はありません。現時点では、主に次のように、非同期ロード方式を採用できます。

javascript を使用して head タグの末尾に link タグを挿入します。

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
复制代码

设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS
```
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
复制代码
```
通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet
```
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
复制代码
```

2.3 资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

2.4 合理使用选择器

css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下：

先找到h3标签元素
然后去除祖先不是.content的元素
最后去除祖先不是#markdown的元素

如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高

所以我们在编写选择器的时候，可以遵循以下规则：

不要嵌套使用过多复杂选择器，最好不要三层以上
使用id选择器就没必要再进行嵌套
通配符和属性选择器效率最低，避免使用

2.5 减少使用昂贵的属性

在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

2.6 不要使用@import

css样式文件有两种引入方式，一种是link元素，另一种是@import

@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时

而且多个@import可能会导致下载顺序紊乱

比如一个css文件index.css包含了以下内容：@import url("reset.css")

那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件reset.css

2.7 その他

リフロー操作を減らし、不要な再描画を減らします
継承可能なプロパティを把握し、書き換えを避ける
cssSprite は、すべてのアイコン画像を合成し、必要なアイコン画像を幅と高さと背景位置の背景画像で表示し、http リクエストを減らします
小さいアイコンイメージを base64 エンコーディングに変換する
CSS3 アニメーションまたはトランジションは、transform と opacity を使用してアニメーションを実現しようとします。left プロパティと top プロパティは使用しないでください。

3. まとめ

css性能の出し方は、セレクターの入れ子、属性の特徴、リダクションの3つの側面から考え、コードのロード順にhttpも注意するcss

すべての文: 賢い人は、必ずしも本質的に頭が良いわけではありませんが、生涯にわたる努力によってさらに頭が良くなります。さて、勉強をしている私たちの多くは、自分は生まれつき不十分で、よく学べないと考えているため、悲観的で落胆し、学ぼうとはしません。実際、これは必要ではありません。一生懸命働く限り、希望は目の前にあります。

これでこの共有は終わりです. この章の内容が役に立ったら, いいね+ お気に入り. 記事に誤りがありましたらご指摘ください、ご不明な点がございましたらコメント欄にメッセージを残していただければ幸いです。みんなで何かを得られるといいなと思いますので、一緒に話し合って進めていきましょう！