最近リフローに関する質問をよく読みましたが、以前はこの現象に気づきませんでした。結局のところ、私は過去に多くのパフォーマンスの詳細に注意を払わなかったので、最近になってゆっくりと勉強し始めました。リフローについては、簡単に言えばDOMのレンダリング(ドキュメントツリー内の各オブジェクトのサイズや配置などをCSSなどで計算する)ということで説明が一方的になるかもしれませんが、まずaを定義します。理解を容易にするためのシンプルなコンセプト。
まず、Mozilla で推奨されている CSS 属性の記述順序について説明しました。この記述順序は、プロジェクトの開発コード仕様の標準によるものだけでなく、合理的な記述順序の方がより準拠しているためです。ブラウザのレンダリング順序。
mozilla.org の基本スタイル
* ファンタサイによって管理されています
* (マークアップ ガイドで定義されているクラス -http://mozilla.org/contribute/writing/markup)
*/
/* 推奨される順序:
// プロパティを表示します
*画面
*リスト形式
* 位置
*フロート
*クリア
//自己属性
*幅
*身長
*マージン
*パディング
* 国境
* 背景
//テキスト属性
* 色
*フォント
* テキスト装飾
* テキスト整列
*垂直整列
*空白
*その他のテキスト
* 内容
この「Visual Reflow」は、ブラウザーのレンダリング プロセスを非常に鮮明に示しています。このことから、ブラウザーが読み込みプロセス中にすべての DOM を 1 つのステップで正しく配置するのではなく、レンダリング結果が頻繁に変更されることがわかります。一定の計算の後。これには、dom のパフォーマンスに対する js、css などの影響が含まれます。