@Masaharu-Fujiposted at 2024-12-24

chromeパフォーマンスのcss分析にある「遅いパスの不一致の割合」とは何ですか

Q&A

CSS Chrome analytics DeveloperTool

解決したいこと

純粋な疑問なのですが、cssの用語について知りたいことがあります。

chromeのdeveloper toolのperformanceタブよりcssの分析ができます。
分析をするとcssセレクタごとの経過時間や一致数が表に出されます。

この時の、「遅いパスの不一致の割合」とは何でしょうか？

以下のリンクでは、このような説明があるのですが、
何を指しているのかわかりませんでした。

% of slow-path non-matches

The ratio of elements that didn't match with this CSS selector, to the elements that the browser engine attempted to match, and which required the browser engine to use less optimized code to match.

どなたか意訳、もしくはどのような計算結果のものなのか教えていただきたいです。

0 likes

1Answer

@juner posted at 2024-12-26

日本語版だと

ブラウザエンジンがマッチングを試みた要素のうち、マッチングに最適化されていないコードをブラウザエンジンが使用しなければならなかった要素のうち、この CSS セレクタに一致しなかった要素の割合。

こうありますが、それでもわからなかったということでしょうか……？

また、 Microsfot の同じ機能についての記事では次の様な説明となります。

この CSS セレクターと一致しなかった要素と、ブラウザーエンジンが一致しようとした要素との比率。ブラウザーエンジンでは、一致するように最適化されていないコードを使用する必要があります。

0Like

Comments

@Masaharu-Fuji
Questioner
自分も日本語訳されたサイトを読んだのですが、説明がよく分からなかったです。　

「マッチングに最適化されていないコードをブラウザエンジンが使用しなければならなかった要素のうち」

これを「なにかしら最適化をこけたけど、マッチング処理判定に使われた要素」という意味で受け取ったんですけど、自分で書いてても、結局どんな状態なんだという感じです。

このマッチング処理がどんな働きをしているのかイメージついていないかもしれないです。
@Masaharu-Fuji
Questioner
あと、この割合として出力される数値は、分析において、どのように扱われるものなのかと、疑問に感じました
@juner
CSS セレクタの最適化についてはここらへんが参考になりますでしょうか……？（複雑なセレクタを使用すると効率が悪いみたいなのはそうなので
@Masaharu-Fuji
Questioner
CSSの最適化については、上記のサイトでセレクタの違いで描画に差が出ることはわかったのですが、chromeパフォーマンスのcss分析にある「遅いパスの不一致の割合」が指している部分について、イメージを掴むことができなかったです...
@juner
CSS セレクタの探索はセレクタの右から順にみる為、右端から一致したものを左にフィルタリングする際に不一致が多いと遅いとかなんでしょうか……？

例えば td:nth-child(1) は全ての兄弟要素群から 1番目のを絞った上で td で更に絞るという挙動となるので（これ自体は最適化が走っている気はするので遅くはないが

Are you sure you want to delete the question?