【JavaScript】文档碎片提升DOM渲染性能

一时失言乱红尘 2022-10-07 12:52 130阅读 0赞

# 前言 #

提到前端性能优化，相信你已经听说过一个结论：`尽量少地操作 DOM`，包括 Vue 在官方文档中也提到该问题。

因为 DOM 的重新渲染会重新生成页面上的 DOM 节点树，并导致触发布局重排、样式重绘等高性能消耗的操作，从而大幅度降低页面渲染性能（详细过程可以了解另外一篇文章：https://blog.csdn.net/weixin\_42678675/article/details/117113450）

今天将采用文档碎片的方法，在必须使用 DOM 操作的情况下，可以尽量少地操作 DOM。

# 示例 #

## 1）不使用文档碎片的写法 ##

正常写法中，每循环一次，就会触发一次 DOM 操作，当循环次数多了之后，性能将大幅下降

const list = document.getElementById('list')
    				
    for(let i = 0;i<10;i++){ 
    	const item = document.createElement('li')
    	item.innerHTML = `列表${ i}`
    	list.appendChild(item)
    }

## 2）使用文档碎片的写法 ##

`注意` 每循环一次，将 DOM 节点新增到文档碎片中时，此时页面上仍未渲染；需要将文档碎片进行 appendChild 操作，才能将文档碎片中的 DOM 渲染出来

const list = document.getElementById('list')
    // 创建文档碎片对象 
    const fragment = document.createDocumentFragment()
    				
    for(let i = 0;i<10;i++){ 
    	const item = document.createElement('li')
    	item.innerHTML = `列表${ i}`
        // 将新建的DOM节点加入到文档碎片对象，此时页面上还未渲染出 li
    	fragment.appendChild(item)
    }
    // 将文档碎片中的所有DOM一次性渲染出来 
    list.appendChild(fragment)

## 3）简单理解 ##

正常操作DOM的情况，就像每当外卖员接到一单，就会去送一单，中途不再接新的订单，直到一单送完再送另外一单；

而使用文档碎片，相当于外卖员会同时收下几个时间和地点都相近的订单，一次性进行派送，大大加快了派送效率。