В последнее время я читал много вопросов о перекомпоновке, но раньше не замечал этого явления. В последнее время я начал потихоньку его изучать. Ведь раньше я не обращал внимания на многие детали производительности. Что касается перекомпоновки, то следует просто сказать, что это рендеринг DOM (вычисление размера, макета и т. д. каждого объекта в дереве документа с помощью CSS или других факторов. Объяснение может быть односторонним, но сначала определимся). простая концепция для облегчения понимания.
Во-первых, я увидел рекомендуемый в Mozilla порядок написания атрибутов CSS. Этот порядок написания обусловлен не только стандартами спецификации кода разработки проекта, но и тем, что разумный порядок написания больше соответствует стандарту. порядок рендеринга браузера.
Базовые стили mozilla.org
* поддерживается fantasai
* (классы определены в Руководстве по разметке — http://mozilla.org/contribute/writing/markup)
*/
/* Предлагаемый порядок:
//отображаем свойства
*отображать
*стиль списка
*позиция
* плавать
*прозрачный
//Собственные атрибуты
*ширина
*высота
* допуск
*дополнение
* граница
* фон
//Текстовые атрибуты
* цвет
*шрифт
* текст-оформление
* выравнивание текста
*вертикальное выравнивание
*пробелы
* другой текст
* содержание
Эта «Визуальная перекомпоновка» действительно наглядно показывает процесс рендеринга в браузере. Из нее видно, что браузер не размещает весь DOM правильно за один этап в процессе загрузки, но после постоянных вычислений результаты рендеринга часто оказываются неудовлетворительными. изменено, включая влияние js, css и т. д. на производительность dom.