一般的な CSS コードでは、UI レイアウトや互換性に関して軽微な問題が発生するだけです。しかし、ここでは Chrome ページを直接クラッシュさせる可能性のある興味深い CSS 行を共有したいと思います :) 再生
実際、このマシンには 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 プライマリ ネットワーク ポート マッピング構成
Union は、重複行を除外し、デフォルトのソートを実行する、データに対する結合操作です。Union...
この記事では、時間範囲効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...
Mysql の追加、削除、変更、クエリステートメントのシンプルな実装追加されたレコード: テーブル名...
以下のコードをDreamweaverのコードエリアにコピーすると、プレビュー時に以下の画像が表示され...
この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...
コンテナ間の通信1. コンテナのネットワーク共有このモードの Docker コンテナはネットワーク ...
概要: この記事では主に、Windows 環境に MySQL をインストールする方法について説明しま...
mysql ダーティページWAL メカニズムにより、InnoDB はステートメントを更新するときに、...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
ワームは、その名前が示すように、自ら複製し、その数は倍増、つまり指数関数的に増加します。 MySQL...
DOCTYPE 宣言 作成するすべてのページの先頭に、ドキュメント宣言が必要です。はい、そうでしょう...
<br />原文: http://blog.rexsong.com/?p=1166ウェブ...
HTML: タイトル見出しは <h1> - <h6> などのタグによって定...
目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...
クラスタリングは、実際には InnoDB データベース エンジンに関連しています。したがって、インデ...