2

CSS でルールをグループ化すると、解析とレンダリングのパフォーマンスにどのような影響があるのか​​ 疑問に思っていました。

アプローチ 1:

.class1 {
  margin: 10px;
  padding: 20px;
  color: #ccc;
}
.class2 {
  margin: 10px;
  padding: 30px;
  color: #ddd;
}
.class3 {
  margin: 20px;
  padding: 30px;
  color: #eee;
}
.class4 {
  margin: 20px;
  padding: 20px;
  color: #fff;
}

対アプローチ2：

.class1,
.class2 {
  margin: 10px;
}
.class3,
.class4 {
  margin: 20px;
}
.class1,
.class4 {
  padding: 20px;
}
.class2,
.class3 {
  padding: 30px;
}
.class1 {
  color: #ccc;
}
.class2 {
  color: #ddd;
}
.class3 {
  color: #eee;
}
.class4 {
  color: #fff;
}

もちろん、同じルールのグループ化を持つ大きな css ファイルについて話しているため、同じセレクターが多数のチャンクに断片化されることがあります。

css の解析とレンダリングに大きな影響を与え、このアプローチを放棄してより大きなファイルを優先しますが、すべてのルールを 1 つのセレクターにまとめてクリーンにしますか?

セレクターのマッチングはコストがかかる場合があります。実際のケースでは、これらの各セレクターは 1 つのクラスではなく、2 ～ 3 個のネストされたクラスです。そのため、すべてのルールを適用するには、要素ごとにブラウザーがセレクターを 3 回一致させる必要があります。最初にマージン、次にパディング、次に色を適用します。2 番目のアプローチは非常にコストがかかるようです。

4

3 に答える 3

2

2 つのオプションを持つ 2 つの codepen を用意しました。

アプローチ 1 (クラスごとに 1 つのセレクター) - https://codepen.io/kali187/pen/EvpVdb - (出力のみ: https://codepen.io/kali187/live/EvpVdb )

@for $n from 1 through 2000 {
  .div-#{$n} {
      float: left;
      background: rgb( $n, $n, $n );
      height: 10px + 1px * $n / 2;
      width: 20px + 1px * $n / 5;
      margin: 0 1px 1px 0;
      border: 1px solid #f00;
  }
}

アプローチ 2 (1 つのクラスに複数のセレクター) - https://codepen.io/kali187/pen/dzjGPa - (出力のみ: https://codepen.io/kali187/live/dzjGPa )

$max: 1000;

@for $i from 1 through $max {
  %bg-#{$i} {
    background: rgb( $i, $i, $i );
  }
  %width-#{$i} {
    width: 20px + 1px * ceil($i / 5);
  }
  %height-#{$i} {
    height: 20px + 1px * ceil($i / 3);
  }
}

@for $n from 1 through (2*$max) {
  .div-#{$n} {
      float: left;
      @extend %bg-#{ceil($n/2)};
      @extend %width-#{ceil($n/3)};
      @extend %height-#{ceil($n/4)};
      margin: 0 1px 1px 0;
      border: 1px solid #f00;
  }
}

最初のアプローチのレンダリング結果: ここに画像の説明を入力 スタイルと html の解析 ~ 25ms

2 番目のアプローチのレンダリング結果: ここに画像の説明を入力 スタイルと html の解析 ~ 75ms (その 3 倍)

試してみたい人はぜひどうぞ

于 2017-08-24T10:52:21.357 に答える