0

私は最近、Chrome が次の CSS ルールをすべての SVG 要素に適用することに気付きました (それらがどのように埋め込まれているか [オブジェクト、埋め込み、iframe、またはインライン] に関係なく):

* {
  -webkit-transform-origin-x: 0px;
  -webkit-transform-origin-y: 0px;
  -webkit-transform-origin-z: initial;
}

CSS セレクター プロファイラーを実行すると、* セレクターが圧倒的に最大のパフォーマンス ヒットになります。これにより、ページ内のいくつかの非常に複雑な SVG でスクロールなどが遅く感じられるようです。

私の質問は、どうすればこれを回避できますか? このルールを削除する方法はありますか(オーバーライドしないでください。この場合、セレクターのパフォーマンスが低下するためです)。

おそらく、これは Chrome チームの見落としだったのかもしれませんし、私には理解できない理由でそこにあるのかもしれません (なぜそこにあるのか、そして私がそれを削除したいのが間違っているのかを説明できる人へのボーナス ポイント)。

おそらく、プロファイラーを間違って読んでいるのかもしれません。これがスクリーンショットです (無関係なセレクターは削除されています)。

* Chrome CSS プロファイラーのセレクター

ここで多くの質問をしていることは承知していますが、「ソース」列にデータが入力されていない理由 (まだ実装されていないということ以外) はありますか?

4

2 に答える 2

2

Sourceプロファイルにリストされている特定のルールのソース ファイルがないため、この列には値が入力されていません。これは、Chrome コードに「ハードコード」されたユーザー エージェント スタイルシートにある規則によるもので、実際のリソースには対応していません。

次に、絶対時間 (プロファイル ビューの下のステータス バーにあるボタン) に切り替えて、%実際にかかる時間をミリ秒単位で確認します。HTML5 仕様を 1 つのページとして表示していない限り、驚くことでしょう。

私の知る限り、-webkit-transform-originこの方法を使用して、ページ全体にハードウェア アクセラレーションによる合成を適用します。

于 2012-12-05T19:38:48.717 に答える
0

少なくともXHTML（「通常の」HTMLでは不明）では、名前空間を使用することによってのみルールをHTMLに制限できます。

@namespace html 'http://www.w3.org/1999/xhtml'
html|* {
  -webkit-transform-origin-x: 0px;
  -webkit-transform-origin-y: 0px;
  -webkit-transform-origin-z: initial;
}

（ Tinkerbinの別の例と比較してください）。

「通常の」HTMLの場合not()、SVG名前空間でセレクターを使用すると機能するはずです。

@namespace svg 'http://www.w3.org/2000/svg';
*:not(svg|*) {
  -webkit-transform-origin-x: 0px;
  -webkit-transform-origin-y: 0px;
  -webkit-transform-origin-z: initial;
}

ただし、これによってパフォーマンスが向上するかどうかはわかりません。

于 2012-12-05T19:51:18.757 に答える