Microsoftは、3Dビューツールに[合成レイヤー]タブを追加します

マイクロソフトは、その中に注入された新機能でWeb開発者を驚かせます 3D表示ツール、これは開発ツール（開発ツール）の一部です。 火曜日に発表された[CompositeLayers]タブと呼ばれる機能は、不要なスクロールバー、z-indexスタッキングの問題、DOMの複雑さなど、通常のWeb開発の問題に対処するために使用される3DViewツールの他のツールに加わります。

合成レイヤー機能は、Webページを適切な数のレイヤーに分割することを目的としています。 マイクロソフトエッジ シニアプロダクトマネージャー パトリック・ブロセット コンポーネントがアニメーション化されているか、他のコンポーネントとは独立して変更されている場合に便利だと言います。 Microsoft Edge DevToolsには、以前は同じ機能を提供する別のレイヤーツールがあったことを思い出してください。 しかし、同社はそのためのパネルを削除することを決定し、その結果、3Dビューツールと統合されました。

Brossetは、新機能の登場を発表したブログ投稿で、ブラウザーレンダリングエンジンのアクティビティを高レベルで説明することにより、レイヤーの重要性と、レイヤーがWeb上で基本的にどのように発生するかについても詳しく説明しています。 彼によると、ブラウザエンジンは一連の手順に従って、HTMLとCSSから画面上のピクセルに進みます。 これらの手順には、HTMLコードの解析とDOMツリーの作成、CSSコードの解析とスタイルとレイアウト情報の取得、新しいツリー構造の作成、およびページの画面へのペイントが含まれます。

「この最後のステップで、エンジンはページを一度にペイントするか、複数のレイヤーに分割して個別にペイントし、それらから最終的な画像を作成するかを決定する場合があります」とBrosset氏は述べています。 「エンジンが別のレイヤーを作成することを決定する特定のCSSプロパティとHTML要素があります。 たとえば、3D変換プロパティまたはwill-changeプロパティを使用すると、エンジンはレイヤーを作成します。 このように、これらのレイヤーのコンテンツが変更された場合、エンジンはビューポート全体ではなく、これらの個々のレイヤーを再ペイントするだけで済みます。」

[合成レイヤー]タブをクリックすると、作成されたレイヤーがユーザーに表示され、左側のサイドバーにユーザーのリストが表示されます。 このツールは3Dシーンの内容も強調表示し、レイヤーをクリックすると、サイズなどの貴重な情報がユーザーに提供されます。

「Web開発者として、アニメーション化しようとしているページの一部が実際に独自のレイヤーにあるかどうかを知ることは非常に役立ちます」と彼は付け加えます。 「そうであれば、アニメーションの再生中に、ページの残りの部分も再描画する必要がないことを確認できます。 ただし、各レイヤーにメモリが必要なため、誤って多くのレイヤーを作成していないことを確認することも同様に重要です。」