В процессе разработки вы в той или иной степени будете сталкиваться с ситуациями, когда вам нужно будет работать с DOM, а операции с DOM будут потреблять некоторую производительность. Поэтому сегодня мы рассмотрим некоторые методы оптимизации производительности при работе с DOM:
1. Выберите метод с большей производительностью для получения элементов DOM.
Во-первых, давайте посмотрим, как использовать js для получения элементов dom:
- document.getElementById() / getElementsByClassName() / getElementByTagName()
- document.querySelector()/querySelectorAll()
Все вышеперечисленные методы могут помочь нам получить элементы DOM, но какой из них может сэкономить больше производительности: getElementXX или querySelectorXX? Мы вместе смотрим:
Во-первых, нам нужно знать разницу между коллекциями DOM, полученными этими двумя способами:
Давайте посмотрим на результаты, полученные в двух примерах ниже?
Если вы выполните его в браузере, вы обнаружите, что элемент DOM, полученный с помощью getElementsByClassName, в конечном итоге печатает длину 2, а элемент DOM, полученный с помощью querySelectorAll, наконец, печатает длину 1.
Это связано с тем, что getElementXX получает коллекцию HTML, которая представляет собой « предполагаемое состояние реального времени », а это означает, что при обновлении базового объекта документа он также будет соответствующим образом обновлен.
То, что получает querySelectorXX, — это коллекция NodeList. Он не возвращает структуру документа в реальном времени, а сохраняет структуру DOM только на момент текущего получения.
Из-за обновления getElementXX в реальном времени его производительность будет намного хуже, чем querySelector.Если вы не будете осторожны, это может легко привести к бесконечному циклу:
Поэтому используйте querySelectorXX, чтобы получить как можно больше элементов DOM. Если вам необходимо использовать getElementXX, сделайте неглубокую копию [...boxs], чтобы избежать его «предполагаемого состояния в реальном времени».
2. Уменьшите количество ненужных операций с DOM.
Мы все должны знать, что работа js и работа DOM в браузере независимы.Реализация js называется JScript и находится в файле jscript.dll;реализация DOM существует в другой библиотеке под названием mshtml.dll.
Поскольку эти двое полностью независимы, если им необходимо общаться, вы можете представить себе строительство «виадука» между ними, и каждый раз, когда они проходят, вам нужно взимать «пошлину». Разве это не звучит очень трудоемко? Поэтому нам следует постараться свести к минимуму проезд через этот «виадук».
Попробуйте кэшировать DOM:
Как показано на рисунке ниже: В первом методе мы пройдем через «виадук» дважды. Если мы хотим получить больше атрибутов, нам нужно пройти через «виадук» большее количество раз. Во втором типе мы кэшируем DOM, и сколько бы значений атрибутов не было получено, нам достаточно пройти «виадук» только один раз.
Максимально унифицируйте операции обновления DOM:
Как показано на рисунке ниже: Судя по времени выполнения следующих двух функций InnerHTMLLoop и InnerHTMLLoop2, гораздо эффективнее сначала кэшировать контент, который необходимо обновить, а затем сразу обновлять его на странице.
Есть и другой сценарий, например, мы хотим вставить в ul.container одновременно 1000 узлов <li/>. Согласно общепринятой идее, мы бы сделали это:
Если мы сделаем это, это будет похоже на добавление контейнера 1000 раз, что эквивалентно прохождению «виадука» 1000 раз. Как мы можем обновить 1000 операций за одну операцию?
На самом деле есть план:
Мы можем сгенерировать объект виртуального узла document.createDocumentFragement , чтобы сначала добавить 1000 обновлений к этому виртуальному узлу, а затем равномерно обновить их в контейнере.
Другой вариант:
Добавьте .contianer{display:none;} в подэлемент cotianer.appendClind и, наконец, отобразите его с помощью display:block. Элементы с отображением: нет не вызовут перестановку и перерисовку страницы, а также снизят производительность.
Мы можем выбрать метод использования в соответствии с нашими собственными сценариями использования. Просто не забудьте сократить частые операции с DOM .
3. Уменьшите количество перестановок и перерисовок страниц.
Выше мы упомянули обновление и добавление элементов DOM на страницу. Фактически, пока элементы на странице меняются, это приведет к перестановке или перерисовке страницы.
Конечно, браузер не глуп. Перестановка потребляет производительность. Он не будет перекомпоновывать и перерисовывать за вас, как только вам понадобится перерисовать. Он кэширует очередь для регулярной перекомпоновки и перерисовки, но у него есть некоторые атрибуты. Будет принудительно перерисовываться страница . и перерисовать :
- смещение сверху/влево/ширина/высота
- прокрутка вверху/влево/ширина/высота
- clientTop/Left/Width/Height
Поэтому нам следует постараться максимально сократить использование этого типа атрибута. Если мы хотим его использовать, нам следует кэшировать его и избегать частого его получения .
На этом сегодняшний контент закончен, надеюсь, он будет полезен всем.