will-change は、要素にどのような変更が行われるかをブラウザに伝え、ブラウザが事前に最適化の準備を行い、ページのレンダリング パフォーマンスを向上できるようにします。 属性値: 1. auto: 標準のブラウザ最適化を実装します。 2. scroll-position: 開発者が近い将来にスクロール バーの位置を変更したり、アニメーション化したりすることを望んでいることを示します。 3. コンテンツ: 開発者が近い将来に要素のコンテンツを変更したり、アニメーション化したりしたいことを示します。 4. <custom-ident>: 開発者が、変換や不透明度など、指定された属性名を変更したり、近い将来にアニメーション化したりすることを望んでいることを示します。 使用方法: 1. will-change をあまり多くの要素に適用しないでください。過度に使用すると、ページの応答が遅くなったり、大量のリソースが消費されたりする可能性があります。 2. 通常、要素が元の状態に復元されると、ブラウザは以前に行われた最適化作業を破棄します。ただし、ターゲット要素が頻繁に変更される可能性があることを示す will-change プロパティをスタイル シート内で直接明示的に宣言すると、ブラウザーは最適化作業を以前よりも長く保存できるようになります。したがって、使用後はすぐに空にするのがベストプラクティスです。 3. ページにパフォーマンス上の問題がない場合は、速度を少しでも上げるために will-change 属性を追加しないでください。 will-change は、既存のパフォーマンスの問題を修正するための最後の手段としての最適化として設計されており、パフォーマンスの問題を防ぐために使用すべきではありません。 互換性: 要約する 以上が、エディターが紹介した CSS パフォーマンス最適化による変更の使用方法の詳細な紹介です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。 |
>>: Vue でインデックスをキー属性値として使用することが推奨されないのはなぜですか?
CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使...
Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...
目次1. 事前準備1.1 Node.jsをインストールする1.2 webpackをインストールする1...
テーブルを削除することはあまり一般的ではありませんが、特に外部キーの関連付けがあるテーブルの場合は、...
出典: www.bamagazine.comウェブページのバナー、ニュースの見出しの周りのスペース、...
require メソッドの読み込みルールキャッシュからの読み込みを優先するコアモジュールパス形式のモ...
先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...
多くのウェブサイトのソースコードを確認すると、多くのコメントが見つかります。特に、ソース文書にコメン...
1. Tomcatをインストールする1. Docker HubでTomcatイメージを見つける d...
まず解決策を見てみましょう #------------mysql の root ユーザーに権限を付与...
序文CSS がフロントエンド開発の基本的なスキルであるならば、「セレクター」は基礎中の基礎です。これ...
まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...
目次インデックスとは何ですか?左端のプレフィックス一致の原則key_lenの計算方法インデックスの最...
データベースデータをエクスポートします:まずcmdを開いてMySQLのbinフォルダに入ります1. ...
この記事の例では、参考までに時間セレクターを実装するためのjQueryの具体的なコードを共有していま...