前端性能优化------DOM操作的一些性能优化方法

最新推荐文章于 2024-08-05 09:52:51 发布

原创最新推荐文章于 2024-08-05 09:52:51 发布 · 589 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端性能优化 #DOM操作优化

个人前端学习笔记专栏收录该内容

4 篇文章

订阅专栏

博客介绍了DOM操作的性能优化方法。包括优化节点修改，用cloneNode在外部更新节点后替换原节点，减少重绘和回流；优化节点创建，使用DocumentFragment对象，因其添加节点不造成回流；还可优化css样式转换，直接设置className代替逐条改样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM操作的一些性能优化方法

优化节点修改（使用cloneNode在外部更新节点后再替换replace原节点）

            var node=document.getElementsByClassName("d1")[0];
            var clone=node.cloneNode();
            var newDiv=document.createElement("div");
            clone.appendChild(newDiv);
            node.parentNode.replaceChild(clone,node);

看着是更麻烦了，一般动态创建html元素都是创建好了直接appendChild()上去，但是如果要添加大量的元素还用这个方法的话就会导致大量的重绘以及回流，所以尽量减少重绘和回流就是对性能的优化。
重绘和回流忘了的话就点吧

优化节点创建（使用DocumentFragment对象）
就是在网上看到一个问题才让我想要写这篇学习笔记
问题：一次性插入 1000 个 div，如何优化插入的性能。

            var parent=document.getElementsByClassName("d1")[0];
            var frag=document.createDocumentFragment();
            for (var i = 0; i < 1000; i++) {
                var tempNode=document.createElement("div");
                tempNode.innerHTML=i+1;
                frag.appendChild(tempNode);
            }
            parent.appendChild(frag);

重点就是Documentfrogment节点不属于文档树，因此在该节点上添加节点不会造成回流，因此性能就上来了。

优化css样式转换，采用直接设置className代替逐条更改元素样式。
参考：前端性能优化