前端页面优化,减少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的属性。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/82004.html