[JavaScript] 第1412天 使用documentFragment和直接操作DOM有区别?

87 阅读1分钟

DocumentFragment是一个轻量级的文档对象,可以用来存储一组节点,而不需要将这些节点插入到文档中。DocumentFragment在创建时不会将它本身插入到文档树中,而是可以将其作为一个容器,一次性插入多个子节点到文档中,这可以减少浏览器的回流和重绘。

与之相比,直接操作DOM的方式是在文档树中直接创建和插入节点。每次对DOM进行操作都会引起浏览器的回流和重绘,因此在频繁更新DOM时会影响网页性能。直接操作DOM的方式更适用于只需要插入一两个节点或者需要动态地插入节点的情况。

使用DocumentFragment可以将多个节点插入到文档中,而只引起一次浏览器的回流和重绘。这对于需要插入大量节点或需要频繁更新节点的情况下可以提高网页的性能。因此,当需要一次性插入多个节点时,可以使用DocumentFragment来代替直接操作DOM。

扩展:

# [软技能] 第1409天 有哪些操作会导致回流?

# [软技能] 第1410天 有哪些操作会导致重绘?

# [软技能] 第1411天 如何更好的避免重绘和回流?

更多题目:

github.com/haizlin/fe-…