レイアウトJankとの戦い

Webページのレンダリングの完了は、そのレイアウトが修正されたことを意味するものではありません。メディアリソース（画像など）のロードにより、そのサイズによりレイアウトが変更される場合があり、ストリーミングレイアウトでは、通常、画像サイズはレンダリング後にのみ決定されます。これは、フォントの読み込みと再配置レイアウトによって引き起こされる可能性があります。また、XHRリクエストはページにより多くのコンテンツをもたらすことができます。私たちはレイアウトジッターを防止しようとしてきました - それが私がレイアウトJanksと呼んでいるものです。それは迷惑で、誰もそれが好きではありません。最良のケースでは、読書時にポジションを失うことになります。最悪の場合、クリックしたくないものをクリックすることができます。

新しいレイアウトの不安定性APIを理解し、友人と話し合いようとしている間、エリック・ポーティスは非常に洞察に満ちたポイントを与えました。基本的に、レイアウトジッターは問題であり、多くの方法でそれを解決することに取り組んでいます。

• コンテンツ/作成レベルから問題を解決します。HTML属性として、およびCSS属性としてのaspect-ratioとしてintrinsicsize構成します。どちらもこの問題を解決するように設計されていますが、ブラウザのサポートはまだ良好ではなく、代わりにDIYアスペクト比ボックスが必要です。また、UAスタイルシートを変更してaspect-ratio有効性を拡大するという考えにも同じことが言えます。
• ブラウザの動作レベルから問題を解決します。スクロールアンカーは、この問題を解決するように設計されています。デフォルトで有効になっているようになりました。必要な場合は、CSSを介して（ overflow-anchorを介して）制御できます。
• 問題と原因の測定：レイアウトの不安定性APIはこれのために設計されており、ツールを監視するために使用できます。

以上がレイアウトJankとの戦いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。