Оптимизация страницы внешнего интерфейса, способы уменьшения рефлоу

внешний интерфейс

reflowто есть перестановка или перекомпоновка

Запускается DOM или изменениями макета.

если вы изменитеdivposition или измените ширину, высоту, положение div или стиль класса макета.

использоватьdisplay:noneФункции, которые не отображаются

пройти черезПолный веб-запрос и процесс рендеринга, а также способы оптимизации веб-страниц, мы можем знать, что при отображении страницы она будет проигнорирована.display: noneЭлементы этого типа, которые не занимают макет.

Итак, мы можем поставить элемент первымdisplay:none, а затем обработайте этот элемент с помощью JS. Дождитесь завершения операции в собрании, затем поставьте ееdisplay:block, это сработает только 2 разаreflow.

Использовать innerHTML

Конечно, также можно использовать вышеуказанное обозначениеinnerHTMLмодифицировать.

const ul = document.getElementById('content')
const lists = ['a', 'b', 'c', 'd']
const childElementString = lists.map(list=>`<li>${list}</li>`).join('')
ul.innerHTML = ul.innerHTML + childElementString

Здесь есть только одна перепрошивка.

использоватьDocumentFragment

Приведенное выше письмо явно недостаточно хорошо для повторного использования. мы можем использоватьDocumentFragmentоптимизировать.DocumentFragmentsявляется узлом DOM, но не частью дерева DOM. он существует в内存, можно понимать как виртуальный DOM.

const parentNode = document.getElementById('content')
const lists = ['a', 'b', 'c', 'd']
const fragment = document.createDocumentFragment
lists.forEach(text=>{
	const li = document.createElement('li')
	li.textContent = text
	fragment.appendChild(li)
})
parentNode.appendChild(fragment)

Если вы не используете DocumentFragment, это вызовет 4 перекомпоновки, и по мере увеличения количества DOM, которые необходимо изменить, будет вызвано больше перекомпоновок, но через фрагменты достаточно только одной.

Оптимизация на уровне CSS

Как мы уже говорили выше, не только изменения дерева DOM вызовут перекомпоновку, но и изменения CSSOM. Здесь мы можем заменить свойства, вызывающие перекомпоновку, альтернативными свойствами CSS.

Статьи по Теме:

Полный веб-запрос и процесс рендеринга, а также способы оптимизации веб-страниц

Базовые знания о внешнем интерфейсе Что такое Node?

Оптимизация страницы внешнего интерфейса, способы уменьшения рефлоу

Категории