AI 助理
备案控制台
开发者社区 汪子熙 文章 正文

动态修改dom node的两种方法性能比较

2021-11-30 94
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 动态修改dom node的两种方法性能比较

Created by Jerry Wang, last modified on Sep 25, 2014

测试代码:image.png方法1在每一次循环里都会修改一次dom node，而方法2只有在循环结束后才进行唯一的一次dom node修改。

在动态插入子node p的个数很小的情况下，两种方法性能相差无几。

插入100个节点:

image.png

当个数增加到1000个时:

image.png

个数10000个时:

image.png

文章标签：
JavaScript
关键词：
dom node
dom node.js
node.js性能
node.js方法
dom方法
开发工程师
目录
相关文章
游客44yag4ft7nckq
|
3天前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
22 12
游客44yag4ft7nckq
|
1天前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
17 7
游客44yag4ft7nckq
|
5天前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
14 1
游客44yag4ft7nckq
|
11天前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
21 6
游客44yag4ft7nckq
|
9天前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
14 3
游客44yag4ft7nckq
|
13天前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
24 6
游客44yag4ft7nckq
|
7天前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
19 0
技术君
|
JavaScript
动态修改dom node的两种方法性能比较
动态修改dom node的两种方法性能比较
技术君
110 0
动态修改dom node的两种方法性能比较
杀死一只知更鸟debug
|
9天前
|
JavaScript
NodeJs的安装
文章介绍了Node.js的安装步骤和如何创建第一个Node.js应用。包括从官网下载安装包、安装过程、验证安装是否成功，以及使用Node.js监听端口构建简单服务器的示例代码。
杀死一只知更鸟debug
16 1
NodeJs的安装
杀死一只知更鸟debug
|
7天前
|
存储 JavaScript 前端开发
Node 版本控制工具 NVM 的安装和使用（Windows）
本文介绍了NVM（Node Version Manager）的Windows版本——NVM for Windows的安装和使用方法，包括如何安装Node.js的特定版本、列出已安装版本、切换使用不同版本的Node.js，以及其他常用命令，以实现在Windows系统上对Node.js版本的便捷管理。
杀死一只知更鸟debug
13 0
Node 版本控制工具 NVM 的安装和使用（Windows）