Оптимизация производительности внешнего интерфейса: детализируйте реорганизацию и перерисовку рендеринга в браузере.

внешний интерфейс JavaScript браузер CSS
Оптимизация производительности внешнего интерфейса: детализируйте реорганизацию и перерисовку рендеринга в браузере.

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

источник

Эта статья возникла в результате размышлений и разбора случайного вопроса и ответа из интервью. В ней основное внимание уделяется перспективе рендеринга в браузере, а также обсуждаются идеи и практические предложения по оптимизации производительности интерфейса. Конечно, рендеринг в браузере — сложный процесс. Расположите и перерисуйте два ключевых слова, чтобы начать текст.

Структура каталогов

Общая идея статьи такова:

  • Процесс URL от ввода до отображения страницы

  • Связь между DOM и JavaScript

  • Почему манипуляции с DOM «медленные»

  • Процесс парсинга HTML браузером

  • переставлять

  • перерисовать

  • Оптимизация

Процесс URL от ввода до отображения страницы

Прежде чем обсуждать синтаксический анализ HTML в браузере, необходимо понять процесс URL от ввода до окончательного рендеринга страницы. Это может помочь нам понять весь процесс и дать нам знать, что он находится во всем цикле запроса, прежде чем разбираться в деталях Разбор HTML На этом этапе это очень полезно для нас, чтобы построить идеальный граф знаний.

Во-первых, мы предполагаем, что запрос входного URL-адреса является простейшим Http-запросом, На примере GET-запроса его можно условно разделить на следующие шаги:

  1. Пользователь вводит URL-адрес посещения в адресной строке браузера. Браузер сначала проверит кеш браузера — системный кеш — кеш маршрутизатора в соответствии с этим URL-адресом.Если он есть в кеше, перейдите к шагу 6. ​​Если нет, выполните следующие действия.

  2. Браузер разрешает имя хоста на основе введенного URL-адреса.

  3. Браузер преобразует имя хоста в IP-адрес сервера. Браузер сначала просматривает локальный список кеша DNS, чтобы увидеть, существует ли IP-адрес в кеше.Если да, перейдите к шагу 4. Если IP-адрес не существует в кеше, он отправит запрос на DNS-сервер браузера по умолчанию. и кешировать текущий этот ip добавляется в список кеша DNS. Более подробные шаги см.Процесс поиска DNS для доменного имени.

  4. После получения IP-адреса браузер анализирует номер порта из URL-адреса.

  5. После получения IP-адреса и порта браузер установит TCP-соединение с целевым веб-сервером, что является легендарным трехсторонним рукопожатием. Портал:полная tcp-ссылка.

  6. Браузер отправляет сообщение HTTP-запроса на сервер.

  7. Сервер возвращает ответное сообщение HTTP в браузер.

  8. Закройте соединение. Браузер анализирует документ.

  9. Если в документе есть ресурсы, повторяйте действия 6, 7 и 8, пока не будут загружены все ресурсы.

Приведенные выше шаги кратко описывают общий процесс браузера от ввода URL-адреса до окончательного рендеринга страницы, но не очень конкретно, например, каков тип сообщения запроса браузера, какие сценарии ошибок могут возникнуть и как браузер анализирует ответное сообщение В тексте нет конкретного описания.

На самом деле будут некоторые отличия в деталях процесса доступа к серверу в разных сценариях, таких как методы HTTP-запроса, с прокси или без него, с балансировкой нагрузки или без нее и т. д., но это не влияет на наше понимание сути процесса. полная ссылка для доступа Заинтересованные студенты могут выйти в Интернет Узнайте больше об этом сами, поэтому я не буду вдаваться в подробности здесь.

Связь между DOM и JavaScript

Объектная модель документа (DOM) — это независимый от языка API для управления XML- и HTML-документами.В Интернете мы часто используем HTML для манипулирования, но на самом деле DOM также может манипулировать XML-документами.

Теперь мы знаем, что DOM — это независимый от языка API. Другими словами, DOM — это независимый от языка API. Другие языки также могут реализовывать определенные API для манипулирования DOM, но в браузерах он реализован на JavaScript. DOM теперь является важной частью кода JavaScript, потому что JavaScript часто манипулирует базовым документом.

Почему манипуляции с DOM медленные

Хотя DOM реализуется с помощью JavaScript, DOM и JavaScript реализуются отдельно в браузерах, например, в IE реализация JavaScript называется JScript, который помещается в файл jscript.dll, а DOM размещается в другом, в библиотеке. называется mshtml.dll. В Safari DOM и рендеринг реализуются с помощью WebCore в Webkit, а JavaScript реализуется отдельным движком JavaScriptCore.Также в Chrome для рендеринга используется WebCore, а движок JavaScript — их собственный движок V8.

Так как DOM и JavaScript реализуются отдельно и независимо, каждый раз, когда DOM манипулируют через js, необходимо сначала соединить js и DOM Мы можем понять это так: сравните DOM и JavaScript как два острова, между которыми он связан через платный мост.Каждый раз, когда вы посещаете DOM, вам нужно пройти по мосту и внести «плату за проезд». Чем больше посещений, тем выше плата за проезд. DOM также должен платить «операционные сборы». Поскольку операций много для браузера, чтобы получить доступ к DOM, «плата за проезд» и «плата за работу», естественно, увеличатся, поэтому работа DOM очень медленная.

Шаги для рендеринга HTML в браузере

Рендеринг HTML можно условно разделить на следующие этапы:

  1. HTML анализируется в дереве DOM с помощью синтаксического анализатора HTML, а css преобразуется в дерево CSSOM с помощью синтаксического анализатора CSS.

  2. После анализа дерева DOM и дерева CSSOM они соединяются вместе, чтобы сформировать дерево рендеринга.

  3. Вычисление информации об узле (перестановка), этот процесс называется Layout (Webkit) или Reflow (Mozilla). То есть геометрическая информация каждого узла вычисляется в соответствии с деревом рендеринга.

  4. Рендеринг (перекрашивание) этот процесс называется (Painting or Repaint). То есть вся страница отрисовывается по рассчитанной информации.

Вышеупомянутые 4 шага кратко описывают процесс рендеринга в браузере. Теоретически каждое изменение DOM или изменение геометрических свойств CSS вызовет процесс перекомпоновки/перерисовки браузера. Если изменить негеометрическое свойство CSS, это вызовет только перерисовку обработать. Таким образом, перестановка должна вызывать перерисовку, а перерисовка не обязательно вызывает перестановку.

Реаранжировка (Relayout/Reflow)

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

Так называемая перестановка фактически основана на информации о каждом объекте рендеринга в дереве рендеринга, вычисляет геометрическую информацию соответствующего объекта рендеринга (положение и размер объекта DOM) и помещает его в правильное положение в интерфейсе. .

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

Здесь операции, вызывающие перестановку, резюмируются следующим образом:

  1. Страница отображается впервые.

  2. Изменился размер окна браузера.

  3. Размер элемента или позиция изменились.

  4. Меняется содержимое элемента (количество текста или размер изображения и т.д.).

  5. Изменяется размер шрифта элемента.

  6. Добавьте или удалите видимые элементы DOM.

  7. Активируйте псевдоклассы CSS (например: :hover).

  8. установить атрибут стиля

  9. Запрашивайте определенные свойства или вызывайте определенные методы.

Общие причины перестройки свойств и методов
width height margin padding
display border position overflow
clientWidth clientHeight clientTop clientLeft
offsetWidth offsetHeight offsetTop offsetLeft
scrollWidth scrollHeight scrollTop scrollLeft
scrollIntoView() scrollTo() getComputedStyle()
getBoundingClientRect() scrollIntoViewIfNeeded()

Перекомпоновка также называется оплавлением.На самом деле, буквальное значение оплавления также является оплавлением.Причина, по которой некоторые из них называются оплавлением, может заключаться в том, что оплавление легче понять и больше соответствует китайскому мышлению. Причина, по которой стандартный документ называется перекомпоновкой, заключается в том, что рендеринг браузера основан на модели «потокового макета». Поток на самом деле является тем, что мы часто называем потоком документа. Когда геометрические свойства DOM или CSS изменяются, поток документа изменяется. быть измененным связью колебаний, поток подобен воде в реке, а обратный поток подобен брошенному камню в реку, вызывающему рябь, а затем влияющему на окружающий поток воды, поэтому это называется обратным потоком, который кажется более стандартным и стандартизированным пониманием.Но не важно, как оно называется, важно то, что мы действительно понимаем процесс.

Перекраска

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

Общие свойства, вызывающие процесс рендеринга в браузере, включают:
color border-style visibility background
text-decoration background-image background-position background-repeat
outline-color outline outline-style border-radius
outline-width box-shadow background-size

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

Мы знаем, что работа с DOM является дорогостоящей операцией не только из-за доступа по ссылке между js и DOM, но и из-за ряда цепных реакций (перестановок), вызванных сожалением об использовании DOM, Поэтому с точки зрения оптимизации производительности , мы можем использовать следующий Start with:

  • Уменьшите манипуляции с DOM

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

    • Если вам нужно получить доступ к одному и тому же dom несколько раз в локальном методе, сначала временно сохраните его ссылку.

  • Используйте более совершенные API для замены API с высоким потреблением, а также преобразуйте и оптимизируйте коллекции с высоким потреблением.

    • Замените getElementByXX() на querySelectorAll().

    • Включите ускорение графического процессора для анимации и передайте расчеты рендеринга графическому процессору.

    • Используйте меньше коллекций HTML (подобных массивам) для обхода, потому что обход коллекции обходится дороже, чем истинный обход массива.

    • Используйте делегирование событий, чтобы уменьшить количество обработчиков событий.

  • уменьшить перегруппировку

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

    • Чтобы добиться анимации элемента, его атрибут position желательно установить в абсолютное или фиксированное значение, чтобы он не влиял на расположение других элементов.

    • Выбор скорости, с которой достигается анимация. Например, для реализации анимации перемещение в единицах по 1 пикселю является наиболее плавным, но перекомпоновка будет слишком частой и будет потреблять много ресурсов процессора, если двигаться в единицах по 3 пикселя, то будет гораздо лучше.

    • Не используйте макет таблицы, потому что, как только элемент в таблице инициирует перекомпоновку, все элементы таблицы вызовут перекомпоновку. Затем, когда вам нужно использовать таблицу, вы можете установить table-layout:auto или table-layout:fixed, чтобы таблица отображалась построчно.Этот подход также предназначен для ограничения влияния перекомпоновки.

  • css и обработка анимации

    • Используйте меньше выражений CSS

    • Уменьшите количество модификаций стилей элементов с помощью кода JavaScript и попробуйте использовать метод изменения имен классов для работы со стилями или анимацией;

    • Анимации следует использовать, насколько это возможно, для элементов с абсолютной или фиксированной позицией;

    • Скрыть экран или попытаться остановить анимацию при прокрутке страницы;

окончательное резюме

В этой статье в основном описывается этап синтаксического анализа и рендеринга HTML в браузере в процессе преобразования URL-адреса от ввода до окончательного рендеринга в интерфейс, чтобы обсудить идеи и причины оптимизации внешнего интерфейса. Основная идея основана на взаимосвязи между перестановкой и перерисовкой. Темы примерно такие:

  • Примерная ссылка URL-адреса от ввода до окончательного рендеринга.

  • Перестановка обязательно переставит, а перерисовка не обязательно тяжелый ряд.

  • Манипуляции Js с DOM — это процесс с высоким потреблением.

  • Список свойств и методов, вызывающих перекомпоновку/перерисовку

  • Идеи по оптимизации (уменьшить количество операций dom, заменить высокопроизводительные API, временно хранить ссылки, уменьшить количество перестановок, включить аппаратное ускорение и т. д.).

Наконец, по причинам личного характера, если в тексте есть какие-либо неполноты или упущения, я призываю всех читателей критиковать и исправлять меня, я буду всем вам благодарен!

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

Категории