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 プライマリ ネットワーク ポート マッピング構成

推薦する

CSSリンクと@importの違いの詳細な説明

HTML に CSS を追加するにはどうすればいいですか? HTML で CSS を設定する方法は ...

MySQLにおけるMTRの概念

MTR は Mini-Transaction の略です。名前が示すように、これは「最小のトランザクシ...

Linux で Redis のリモート接続を実装する方法

LinuxにRedisをインストールしたら、Javaを使って接続します。Javaコードは次のとおりで...

CSS3 とテーブルタグを使用して円軌道アニメーションを実装するためのサンプルコード

html: 実際には、テーブルタグに従っていくつかの実線の円 div を正六角形に配置し、div コ...

フロントエンド Vue ユニットテストを始める

目次1. ユニットテストはなぜ必要なのでしょうか? 2. ユニットテストの書き方3. テストツール4...

nginx ベースのブラウザネゴシエーションキャッシュプロセスの詳細な説明

この記事は主に、nginx に基づいてブラウザネゴシエーションキャッシュを設定する詳細なプロセスを紹...

選択ドロップダウンメニューのテキストを左右にスクロールするように設定する

marquee タグを使用してフォントのスクロールを設定したいです。コードは次のように記述しましたが...

Vueのコンポーネントの詳細な説明

目次1. コンポーネントの登録2. コンポーネントの使用3. 父から息子へ4. 息子から父へ5. ス...

Javascript 構造化代入の詳細

目次1. 配列の分解2. オブジェクトの分解3. 不完全な解体4. 分割代入を使用して変数交換を実装...

Linux QT Kit が見つからない、バージョンが空の問題の解決策

現在このような問題が発生しています 私の状況は、QT が動かなくなってしまったため、仮想マシンを再起...

MIME エンコーディングの概要 (オンライン情報と実際の経験から統合)

1. MIME: 多目的インターネットメール拡張インペリアル カレッジ オブ コンピュータ オンラ...

Linux tac コマンドの実装例

1. コマンドの紹介tac (cat の逆順) コマンドは、ファイルの内容を行単位で逆順に出力します...

CSS3で作成した画像スクロール効果

成果を達成する実装コードhtml <base href="https://s3-us...

CentOS7.8 に mysql 8.0.20 をインストールするための詳細なチュートリアル

1. MySQLソフトウェアをインストールするMySQL 公式 Yum リポジトリ、MySQL バー...