Chrome をクラッシュさせる CSS コードの行

Chrome をクラッシュさせる CSS コードの行

一般的な CSS コードでは、UI レイアウトや互換性に関して軽微な問題が発生するだけです。しかし、ここでは Chrome ページを直接クラッシュさせる可能性のある興味深い CSS 行を共有したいと思います :)

再生

  1. ZhihuやNuggetsなど、もう少し複雑なページをChromeで開く
  2. 開発者ツールを開き、ページにスタイルを追加します <body>: style: "width:1px; height:1px; transform:scale(10000)"
  3. クラッシュする前にタスクマネージャーでChromeのメモリ使用量を確認する

実際、このマシンには 8GB のメモリしかありませんが、それは問題ではありません。 JS がクラッシュする 4GB の赤い線と比較すると、CSS はまだ強力です :)

このコード行の発見は、キャンバス サイズの調整を実装する際にエディター プロジェクトで発生した奇妙な現象に起因しています。ユーザーがキャンバス サイズを調整すると、新しいサイズと古いサイズの比率が特定の範囲を超えると、Chrome がフリーズします。

この問題は一般ユーザーの操作パスによって引き起こされる可能性は低いですが、それが引き起こす結果は実に深刻です。トラブルシューティングを行う際、まず JS のブロックや過剰な DOM の再描画などの可能性を検討しましたが、どちらも問題ではありませんでした。画期的な点の 1 つは、デバッガーのレンダリング ツールの FPS メーターの出力でした。


ここで GPU メモリがいっぱいです。このプロンプト メッセージがハードウェア アクセラレーションに関連していることは明らかですが、関連する経験がなければ、それが特定のコードとどのように関連しているかを判断することはできません。 Chrome のデザイン ドキュメントで Compositing の紹介を偶然見たとき、Blink が DOM ノードを LayoutObject のレンダリング ツリーにマッピングするという動作を発見しました。理論上は、このツリーの各ノードはレンダリング バックエンドのコンテキストを持つことができますが、リソースを節約するために、Chrome はレンダリング前にそれらをマージします。現時点では、CSS 配置 (絶対配置や変換など) を持つ要素は結合できないため、ビデオ メモリに追加のオーバーヘッドが発生します。

この情報に基づいて、当時のページをデバッグするためにレイアウト ツールを使用して、実際に特別な場所を見つけました。


画像内の最も大きな長方形のレイヤーは通常の DOM デバッグでは表示されないため、その過剰なサイズとそれに伴う RAM オーバーヘッドが原因であると推測されます。この情報に基づいて、ようやく適切な幅と高さを持つ DOM ノードを見つけましたが、変換のスケール値がロジック内で大幅に変更されている可能性があります。スケールの上限を制限すると、この問題を解決できます。スケール値と最終的な対応するピクセル数の間に O(N^2) 関係があることは簡単にわかります。1 ピクセルは 100 倍に拡大されるだけで、10,000 ピクセルになります。そのため、規模が非常に大きい場合には、メモリ/ビデオメモリを過剰に使用する可能性があります(もちろん、通常時はブラウザがタイリングなどを行うため、これは実情に即したものではなく、Safari/Firefoxでは現時点では問題はありません)。最後に、Chromeにバグを報告しました。#894115を参照してください。

要約する

ブラウザ カーネルに関する深い理解が不足しているため、上記のデバッグのアイデアは不正確である可能性があることに注意してください。簡単な要約:

  • ハードウェアアクセラレーションにはコストがかかるため、そのコストを知っておくことは重要です。
  • ブラウザのドキュメントには興味深いことが沢山隠されています
  • デバッグ ツールのあまり知られていない機能の中には、実は非常に強力なものもあります。頻繁に試してみるとよいでしょう。

上記は Chrome をクラッシュさせる CSS コード行です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  mysql8.0.20 のデータディレクトリを移行する方法

>>:  Docker プライマリ ネットワーク ポート マッピング構成

推薦する

MySQLのunion allとunionの違いを簡単に理解する

Union は、重複行を除外し、デフォルトのソートを実行する、データに対する結合操作です。Union...

時間範囲効果を実現するためのJavaScript

この記事では、時間範囲効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装

Mysql の追加、削除、変更、クエリステートメントのシンプルな実装追加されたレコード: テーブル名...

HTML ul および li タグを使用して画像を表示するサンプル コード

以下のコードをDreamweaverのコードエリアにコピーすると、プレビュー時に以下の画像が表示され...

MySQL ストアド プロシージャの原理と使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...

Dockerコンテナ間の通信と外部ネットワーク通信の操作

コンテナ間の通信1. コンテナのネットワーク共有このモードの Docker コンテナはネットワーク ...

Windows に MySQL をインストールする方法のグラフィック チュートリアル

概要: この記事では主に、Windows 環境に MySQL をインストールする方法について説明しま...

MySQL ダーティ ページ フラッシュとテーブル スペースの縮小の原理の分析

mysql ダーティページWAL メカニズムにより、InnoDB はステートメントを更新するときに、...

HTMLポップアップdivはモバイルの中央揃えを実現するのに非常に便利です

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

MySQLワームレプリケーションの基本知識

ワームは、その名前が示すように、自ら複製し、その数は倍増、つまり指数関数的に増加します。 MySQL...

DOCTYPE 文書型宣言 (Web ページ愛好家必読)

DOCTYPE 宣言 作成するすべてのページの先頭に、ドキュメント宣言が必要です。はい、そうでしょう...

HTML 基本要約推奨事項 (タイトル)

HTML: タイトル見出しは <h1> - <h6> などのタグによって定...

Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー

目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...

MySQL 学習チュートリアル クラスター化インデックス

クラスタリングは、実際には InnoDB データベース エンジンに関連しています。したがって、インデ...