いう新しい仕様によって、ブラウザが行うスタイル、レイアウト、描画の範囲を制限できるようになります。仕様では次の構文と値が定義されています。支持を表明しています)。サイトを開発するとき、スタイル、レイアウト、描画をどう抑えるかがパフォーマンス上の課題になります。アプリにおいて自己完結した「ビュー」を作るのが難しいのです。一部の変更が他の箇所にも影響すること、どの箇所がスコープ内(もしくはスコープ外)だとブラウザに伝える方法がないことが原因です。Contact</section>ひとつのビューに新しい要素を追加すると、スタイル、レイアウト、そして描画が発生します。全体がスコープとなってしまい、スタイル、レイアウト、描画の計算はすべての要素を考慮にいれなければいけません。要素が変更されていなくてもです。大きくなればなるほど計算処理が増えるので、ユーザーの入力に迅速に答えられなくなる可能性が高まります。いいニュースもあります。ブラウザが賢くなり、スタイル、レイアウト、描画のスコープを自動的に制限するので、私たちが何もしなくても速くなるようにはなってきています。いいニュースがあります。プロパティが導入されたのです。いう新しいプロパティに以下の値を指定し使用します。layoutpaintsizestyle各値はそれぞれ、ブラウザがするべきレンダリングの行いを制限します。それぞれの値についてみてみましょう。訳:この値は要素に対し、レイアウトの封じ込めを有効にします。これにより、要素がレイアウト上不透明(opaque)であることが保証されます。要素外のものが封じ込められた要素に影響することはありませんし、逆もまた同様です。ともに、最も恩恵を受けるものでしょう。大きさに比例して大きくなります。内のすべての要素に対しチェックが働く可能性があります。封じ込めを有効にすると、考慮すべき要素の数がドキュメント全体から片手で数えるくらいに減るでしょう。これにより、ブラウザが無駄な仕事をする必要がなくなり、パフォーマンスが大きく向上する可能性があります。訳:この値は要素に対し、描画の封じ込めを有効にします。これにより、子孫要素が指定された要素の領域外に表示されないことが保証されます。指定された要素が画面外、もしくは非表示となる場合、子孫要素も表示されません。描画にスコープを設けることは、レイアウトに続きとても有益な封じ込めでしょう。描画の封じ込めは、適用された要素を切り取るようなものです。これにより、たとえば描画の封じ込めを指定したブロックレベル要素がある場合、それは独立したレイアウト環境として扱われます。訳:この値は要素に対し、大きさの封じ込めを有効にします。これにより、指定された要素が子孫要素の内容を調べずにレイアウトされることが保証されます。要素の子が親要素の大きさに影響しないことを意味し、計算もしくは指定された大きさが使用されます。サイズの封じ込めは大きさの決定に子要素を考慮しないことを二重に保証するものです。これ自身だけではパフォーマンスにあまり寄与しません。訳:この値は要素に対し、スタイルの封じ込めを有効にします。これにより、要素や子孫以外にも影響するプロパティにおいて、その影響が当該要素外に漏れ出さないことを保証します。ツリーの上方にどう影響するのかを予想するのは大変でしょう。子のカウンタを変更すると、ドキュメント中にある同じ名前を持つカウンタの値に影響するのです。指定すると、包含要素を超えてスタイルの変更が伝わることはありません。よってもたらされます)。ここでの封じ込めは該当するツリーの一部に対しスタイルの変更を制限するものであり、スタイルの宣言を制限するものではありません。ように組み合わせても使えます。するとその挙動のみを適用します。プロパティにはほかにもう2つ値があります。表示されるかもしれないことに注意してください。スコープにとても寄与します。大きさを指定する必要もありません。検討したほうがよいでしょう。試してみてください封じ込めは、ページ上のどの箇所を孤立させたいかをブラウザに示すとてもよい仕組みです。