前端頁面優化，減小 reflow 的方法

reflow也就是 重排或者回流

由DOM或者佈局的變更而觸發。

如你改變了一個div的位置，或者是改變了這個div的width, height, position 或者佈局類的樣式。

利用display:none不渲染的特色

經過一次完整的web請求和渲染過程以及如何優化網頁，咱們能夠知道頁面渲染的時候，會忽略掉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
複製代碼

這裏只進行了一次reflow。

使用DocumentFragment

上面的寫法顯然不夠好，沒法複用。咱們可使用DocumentFragment進行優化。 DocumentFragments是DOM節點，但不是DOM tree的一部分。它存在於內存中，能夠理解爲虛擬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次reflow，隨着須要修改的dom次數變多，還會形成更屢次的reflow，可是經過fragment，只須要一次就夠了。

CSS 層面的優化

咱們上面說了，不僅是DOM tree的改變會觸發reflow，CSSOM的改變一樣會觸發。 這裏咱們能夠用替代的CSS屬性替代會形成reflow的屬性。

相關文章：

一次完整的web請求和渲染過程以及如何優化網頁

前端基礎知識之什麼是節點Node？

前端頁面優化，減小reflow的方法