江苏龙网

  1. 主页 > 生活百科 > >

前端页面优化，减少reflow的方法

小知识


前端页面优化，减少reflow的方法

文章插图
 
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.createDocumentFragmentlists.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的属性 。




    推荐阅读


    上一篇：怎样正确储存正山小种

    下一篇：茶文化论文:赏茶析道