前端页面优化，减小 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的方法