wadackel
commented
6 years ago 回答
パフォーマンス劣化の原因
CSS のコストはレンダリングコストが高いです。
ただの矩形ならパスは単純ですが、角丸はより多くのパスが必要に。
また、box-shadow も同様です。
そしてこの2つを同時に使用することで、指数関数的にパスの複雑性が増してしまい、レンダリングコストに大きく影響を与えてしまいます。
アプローチ手法
結論としてはデザイナーとの相談で、着地点を探る、という泥臭さは必要。
ワークアラウンドとして、box-shadow と border-radius を適用する要素を分けるというのも一つの手です。組み合わせでより深刻なレンダリングコストを生み出しますが、それぞれ単体での使用なら少しコストを抑えることが出来るからです。
ただし、本来表現したい見栄えから少なからず乖離が起きるので、「これはヤバイ」となったらデザイナーと相談して決めていくことが必要だと思います。
アプローチ手法: 援護射撃
上述の適用要素を分ける、という手法に加えて box-shadow の表現を画像化することでレンダリングのコストを下げることができます。
検証方法
Chrome の Paint Profiler で計測可能です、超速本に記載があるので是非！
ちなみに...
角丸、シャドーが Cyberagent の社内ブームとして過ぎ去ったのか、最近は困ることが少なくなってきました...。
Web パフォーマンスについて何でも訊いて下さい
超速 AMA です。Web パフォーマンスについて何でも訊いてください。処理分野（ネットワーク、レンダリング、スクリプト）ごとの最適化、フェーズ（ページロード、ランタイム）毎のパフォーマンスの捉え方、超速本についてなど、可能な限りお答えします。
質問
Webパフォーマンスチューニング初学者です。 (Web超速本読みはじめです) 最近、
box-shadowとborder-radiusによるパフォーマンス劣化に遭遇しました。border-radiusを非適用にすることで驚くほどパフォーマンスが向上したのですが、デザインを保ちつつどうやって改善するか悩んでいます。 なぜborder-radiusのレンダリングコストが高いのかご存知であれば知りたいのと、(すでにWeb超速本にかかれているかもしれませんが) スタイリングを保ちながら改善するためのアプローチ手法についてご教授頂きたいです。 また、スタイリングを起こすときにデザイナーとこの事についてコミュニケーションは取っているのでしょうか？