Принцип рендеринга в браузере (как уменьшить перекомпоновку и перерисовку при оптимизации производительности)

браузер

Продолжить предыдущую статьюВесь процесс после ввода URL в адресной строке браузера》

предисловие

Зачем понимать, как работает рендеринг в браузере? Каковы преимущества знания того, как работает рендеринг в браузере? Почему мы должны понимать принципы работы браузеров, когда занимаемся фронтенд-разработкой? Просто создайте веб-страницу напрямую, что нужно, просто возьмите шаттл и покончите с этим, разве не хорошо покончить с этим?

Но люди часто спрашивают, чтопереставлятьа такжеперерисовать?

переставлятьТакже известен какпереплавка(Reflow),перерисовать(Repaint), что повлияет на производительность браузера, создавая у пользователей впечатление, что доступ к веб-странице медленный, или веб-страница будет зависать и работать не плавно, что сократит количество посещений веб-страницы.

Таким образом, чтобы избежать, насколько это возможнопереставлятьа такжеперерисовать, вам нужно знать браузерПринцип рендеринга.

Рабочий процесс браузера

Как видно из рисунка выше, браузер разбирает три модуля:

  • HTML,SVG,XHTML, анализируется для созданияDOMДерево.
  • CSSРазбор генерацииCSSдерево правил.
  • JavaScriptработатьDOM APIа такжеCSSOM API, сгенерироватьDOM Treeа такжеCSSOM API.

После того, как синтаксический анализ завершится, браузер передаст проанализированныйDOM Treeа такжеCSSдерево правил для построенияRendering Tree.

  • Rendering TreeДерево рендеринга не эквивалентноDOMдерево, потому что некоторым нравитсяHeaderилиdisplay:noneНет необходимости помещать вещи в дерево рендеринга.

  • CSSизRule TreeВ основном, чтобы завершить матч и положитьCSS RuleДобавлятьRendering.

  • Treeна каждомElement. то естьDOMузел, то естьFrame. Затем рассчитать каждыйFrame(то есть каждыйElement) положение, которое также называютlayoutа такжеreflowОбработать.

  • Наконец, вызвав операционную системуNative GUIизAPIрисовать.

Браузерный рендеринг для разных ядер

Картинка вышеwebkitПроцесс рендеринга ядра аналогичен общему процессу рендеринга.HTMLизDOM Tree,а такжеCSSдерево правил, а затем объединить для созданияRender Tree, окончательный рендер.

ЭтоMozillaизGeckoдвижок рендеринга.
В целом процесс рендеринга аналогичен, за исключением того, что дерево рендеринга создается илиFrameКогда дело доходит до деревьев, эти два названия несовместимы.webkitназови этоLayout,GeckoназываетсяReflow.

порядок рендеринга

  • Когда браузер получает веб-страницу, он сначала анализирует ее.HTML, если вы столкнулись с внешней цепочкойcss, буду скачиватьcss, при разбореHTML.
  • когдаcssПосле завершения загрузки он продолжит синтаксический анализcss, сгенерироватьcss Rules tree, не повлияетHTMLанализ.
  • при встрече<script>этикетка, один раз параjavascript, скрипт будет скачан сразу, при этом парсинг документа будет заблокирован.После выполнения скрипта начнется парсинг документа.

  • когдаDOMДерево иCSSПосле построения дерева правил постройтеRendering Tree.
  • Вызов системы для отображения страницы.

Что вызовет перекомпоновку и перерисовку.

переставлятьЗначит, изменилась геометрия компонента, нужно перепроверить и рассчитатьRender Tree. даRender Treeчасть или все это изменилось. ЭтоReflow, илиLayout.

переставлятьиз-за перерасчетаRender Tree, и каждыйDOM TreeИмеетсяreflowметод, как только узел возникаетпереставлять, это может привести к тому, что дочерние элементы и родительские элементы или даже другие элементы на том же уровнеreflow, тратя много времени на повторную проверкуRender Tree.

следовательно,переставлятьстоит больше, чемперерисоватьнамного выше.

Следующие действия приведут кпереставлятьилиперерисовать.

  • удалить, добавить или изменитьDOMузел элемента.
  • переехатьDOMположение, когда анимация включена.
  • ИсправлятьCSSстиль, при изменении размера, положения элемента или будет использоватьdisplay:none, вызоветпереставлять;ИсправлятьCSSцвет илиvisibility:hiddenПодожди, это вызоветперерисовать.
  • При изменении шрифта по умолчанию веб-страницы.
  • При изменении размера окна (в мобильном терминале такой проблемы нет) или при его прокрутке.
  • Содержимое меняется (пользователь также пишет содержимое в поле ввода).
  • Активируйте псевдоклассы, такие как :hover.
  • рассчитатьoffsetWidthа такжеoffsetHeight.

Если текущая веб-страница содержит анимацию или веб-страница с фиксированными элементами, это также произойдет из-за прокрутки.переставлять, как только происходит прокрутка, текущий браузер испытывает большую нагрузку, что приводит к зависанию веб-страницы, пропаданию кадров и т. д.


var bstyle = document.body.style; // cache
 
bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; //  再一次的 reflow 和 repaint
 
bstyle.color = "blue"; // repaint
bstyle.backgroundColor = "#fad"; // repaint
 
bstyle.fontSize = "2em"; // reflow, repaint
 
// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode('dude!'));

Приведенная выше логика, почти каждый шаг вызоветпереставлятьилиперерисовать, если браузеры обрабатывают это так, возможно, современные браузеры не такие плавные, как те, которые мы используем.
Итак, в браузере есть механизм, которыйпереставлятьилиперерисоватьсначала накапливаются, а потом выполняются все сразупереставлятьа такжеперерисовать.

Конечно, не все случаи так обрабатываются браузерами, напримерresizeИли измените шрифт по умолчанию, для этих операций браузер сразупереставлять.

Итак, мы слушаемresizeсобытия, которые мы обычно делаемСтабилизатора такжедросселирование.

Как уменьшить перекомпоновку и перерисовку

  • попытайся избежатьstyleиспользовать для операций, требующихDOMузел элемента, переименованныйclassName,ИзменятьclassNameимя.
  • Если вы добавляете элементы илиcloneэлемент, вы можете сначала передать элемент черезdocumentFragmentПоместите его в память, и после завершения операции, затемappendChildприбытьDOMв элементе.
  • Не получайте один и тот же элемент часто.Получив элемент в первый раз, сохраните его в переменной, чтобы сократить время обхода.
  • использовать как можно меньшеdispaly:none,можно использоватьvisibility:hiddenзаменять,dispaly:noneвызоветпереставлять,visibility:hiddenвызоветперерисовать.
  • Не используйтеTableМакет, потому что небольшая операция может привести к тому, что вся таблицапереставлятьилиперерисовать.
  • использоватьresizeсобытие, сделатьСтабилизатора такжедросселированиеиметь дело с.
  • Используйте с анимированными элементамиabsolute / fixedАтрибуты.
  • При пакетном изменении элементов можно сначала удалить элементы из потока документов, а затем поместить их в поток документов после завершения изменения.

наконец

Справочная статья:

How browsers work.

Введение в принципы браузерного рендеринга.

Оптимизация производительности переднего плана при перестановке и перерисовке.

Категории