CSS Working Groupは先頃、新たなWeb標準としてCSS Containment Module Level 1を公開した。このCSSモジュールでは、サブツリーがいくつかの形式でページの他部分から独立している要素を示すために使用する、containプロパティについて述べている。この独立性は、ページのレンダリング時に、ユーザエージェントがより強力な最適化を施すために使用すると同時に、ページの編集者にとっては、一見問題なさそうな変更が原因で、ページが誤って遅いコードパスに陥ることを防ぐ手段になる。
CSS Containment標準のおもな目標は、ページのレンダリングプロセスにおいて、パーツ内にあるドキュメントサブツリーの一部をスキップすることにより、Webページのレンダリングパフォーマンスを改善することだ。Smashing Manazine編集長のRachel Andrew氏は、この新たなWeb標準を記事に取り上げて説明している。
ボックスのコンテンツが変更されると、ブラウザは、すべての要素について変更の可能性を考慮しなければなりません。これはよく発生することなので、一般的にブラウザはこれを非常にうまく扱ってくれます。とは言っても、開発者であるあなたには、各コンポーネントが独立していて、ひとつの変更が他には影響を与えないことが分かっているのですから、そのことをCSSでブラウザに教えてやった方がよいでしょう。ConatinmentとCSS
containプロパティでは、それができるのです。
このモジュール仕様ではcontainプロパティを指定して、サブツリーをページの他の部分から事前に分離することが可能である。containプロパティにはstrict、content、size、layout、paintのいずれかを選択して、要素とそのコンテンツがドキュメントツリーの他部分からそれぞれの形式で独立していることを指定する。
containプロパティの値がlayoutであれば、要素の内部レイアウトが外部の影響を受けないことと、要素のコンテンツが上位(ancestors)の影響を受けないことを示している。paintは、その下位(descendants)要素が領域外には表示されないことと、他のものがこの要素にオーバーフローすることのない(その場合には不可視になる)ことを示す。sizeは、要素の大きさ(dimension)が要素のコンテンツとは独立していることを示す。これはつまり、要素のボックスサイズを、子要素とは無関係に計算することが可能であるということだ。contentはcontain: layout paintの、strictはlayout paint sizeの、それぞれ省略形である。
containプロパティを使うことによって、ブラウザは、ページ全体ではなく、DOMの限定された領域を対象にレイアウト、スタイル、サイズ、あるいはそれらの組み合わせを再計算できるようになるため、特に大きなページにおいては、再フローや再描画のパフォーマンスを大幅に改善することができる。そのパフォーマンス向上の大きさのため、Bloombergは、CSS ContainmentをChromiumに実装するIgaliaの開発作業をサポートしている。Manuel Rego Casasnovas氏はCSSconf EU 2019での講演の中で、テキストコンテンツが定常的に変化する10,000以上のセルを持つUIを例として、レンダリング速度が4倍になることを示してみせた。Rego氏はBloombergが支援する理由を、次のように説明している。
Bloombergには複雑なUIがいくつかあるので、その一部にはCSS containmentを使うメリットがあります。
Paul Lewis氏は、パフォーマンスを気に掛ける開発者を対象に、DOMプロパティの変更によって影響されるレンダリングプロセスがどこであるかを説明している。そのサイトcsstriggersにはさらに、レイアウトを起動するプロパティ集が、使用するブラウザ別にまとめられている。
CSS containmentは、Safari以外の最近のブラウザで実装されている。
"標準" - Google ニュース
June 12, 2020 at 10:00AM
https://ift.tt/37lHjPw
CSS ContainmentがWeb標準に - InfoQ Japan
"標準" - Google ニュース
https://ift.tt/31uAk3S
Shoes Man Tutorial
Pos News Update
Meme Update
Korean Entertainment News
Japan News Update
No comments:
Post a Comment