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

测试代码:

<html>
<script src="C:\Users\i042416\Desktop\jquery_1.7.1.js">
</script>
<script>function insert1(number) {var parent = $("#way1");for( var i = 0 ; i < number; i++) {parent.append("<p>hh</p>");}}function insert2(number) {var parent = $("#way2");var content = "<div>way2";while(number--) {content += "<p>hh</p>";}content += "</div>";parent.html(content);}$(document).ready(function() {console.time("way1");insert1(1);console.timeEnd("way1");console.time("way2");insert2(1);console.timeEnd("way2");});
</script>
<body><div id = "way1">way1</div><div id = "way2">way2</div>
</body>
</html>

方法1在每一次循环里都会修改一次dom node，而方法2只有在循环结束后才进行唯一的一次dom node修改。
在动态插入子node p的个数很小的情况下，两种方法性能相差无几。
插入100个节点:

当个数增加到1000个时:

个数10000个时:

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

动态修改dom node的两种方法性能比较相关推荐

Linux修改主机名的两种方法
Linux修改主机名的两种方法文章目录先展示一下效果一.通过hostname命令直接更改主机名(不是永久) 1.显示当前的主机名 2.更改主机名二.通过修改配置文件(永久改) 1.hostna ...
java校验码的设计_Java动态验证码单线设计的两种方法
1.java的动态验证码我这里将介绍两种方法: 一:根据java本身提供的一种验证码的写法,这种呢只限于大家了解就可以了,因为java自带的模式编写的在实际开发中是没有意义的,所以只供学习一下就可以了 ...
组件Refs(操作DOM的2⃣️两种方法)
组件Refs(操作DOM的2⃣️两种方法) 第一种方式 var mySubmitButton = document.getElementById('submitButton'); console.lo ...
Linux 修改主机名的两种方法
Linux 修改主机名的两种方法一.使用Linux系统命令修改主机名通过man获取帮助 hostnamectl 用法修改重启生效二.通过修改配置文件修改主机名编辑配置文件修改重启生效 ...
vue项目动态设置浏览器标题title两种方法
各位铁汁们,老步骤先效果图奉上方法一.使用插件vue-wechat-title来设置浏览器动态标题第一步:安装插件 1. npm vue-wechat-title --save 第二步:在全局ma ...
DataGridView动态添加新行的两种方法
简单介绍如何为DataGridView控件动态添加新行的两种方法: 方法一: int index=this.dataGridView1.Rows.Add(); this.dataGridView1. ...
win10.java默认程序_Win10把IE修改为默认浏览器的两种方法
IE浏览器一直是Windows系统的默认浏览器,似乎从使用微软开始,就已经是这样了.但是在最新的Win10系统中,IE已经不是Win10的默认浏览器了.那么怎么把IE修改为Win10默认浏览器?本文就 ...
python 修改文件创建时间_python 两种方法修改文件的创建时间、修改时间、访问时间...
突如其来想知道一下 python 如何修改文件的属性(创建.修改.访问时间),于是就去网上搜集了可行方案,也就有了这篇博客方案一 from win32file import CreateFile, ...
datetime 比较_Python 字典中key命中取值的两种方法性能比较！
起步从字典中取值有两个方法,一个是先判断key是否在字典中再取值:另一个是包裹try块中直接去取值: Python资源共享群:484031800 def use_in(d, key):if key ...

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

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

动态修改dom node的两种方法性能比较相关推荐

最新文章

热门文章