JQuery执行DOM批量克隆并插入的提效方法
JQuery clone方法可以实现对指定DOM对象的快速复制，并插入文档中。 对于同一类型的对象往往需要按照同一样式模板（HTML标签代码）复制N份并插入文档中，然后再将内容填入模板中，这就需要批量克隆插入，例如你的博客发表的若干篇文章，都具有相同的模板样式（标题 + 内容摘要）。
按照直接的思维逻辑往往会写出 先clone后插入文档，插入使用append preprend或者insertAfter insertBefore接口。此方法导致时间效率低下， 因为每次生成的克隆实例插入文档，都会导致整个文档重绘动作。
设计简单测试用例，对模板template(一个div)进行clone并插入执行5000次，使用Date.getTime来计算耗时(ms)，使用chrome浏览器(33)测试耗时4107ms，下面给出代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
<div id="template_div">heheiiiii</div>
<script>
var start = new Date().getTime(); for (var i=0; i<5000; i++)
{
$("#template_div").clone().appendTo($("body"));
}
var end = new Date().getTime(); alert(end - start);
</script>
</body>
</html>
考察JQuery append接口定义（https://api.jquery.com/append/），其参数包括数组，数组包括DOM Element：
Similar to other content-adding methods such as
.prepend()and.before(),.append()also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.
借助此特性，为减少页面重绘次数，考虑将每个clone实例缓存到DOM数组中，然后使用append接口一次性将所有实例插入文档，即重绘次数从 5000 减少为 1。 使用相同版本的chrome浏览器，测试这种方法耗时为 636ms，相校未修改前节省3500ms，甚是喜人, 推荐使用。下面给出完整代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
<div id="template_div">heheiiiii</div>
<script>
var start = new Date().getTime();
//缓存clone实例
var domCache = [];
for (var i=0; i<5000; i++)
{
domCache.push($("#template_div").clone())
}
$("body").append(domCache);
var end = new Date().getTime();
alert(end - start);
</script>
</body>
</html>
为验证该方法的在各个浏览器上的稳定性，使用上面两则代码，对三个主流浏览器做了对比试验，结果如下表，对于IE浏览器处理效率有明显提升 9s（总体上时间较长，应该源于IE浏览器对JS处理的低效）：
| 单位（ms） | Chrome33 | IE8 | Firefox |
| 改进前 | 4107 | 18235 | 2966 |
| 改进后 | 636 | 9203 | 1006 |
JQuery执行DOM批量克隆并插入的提效方法的更多相关文章
- 如何 ︰ 执行批量更新和插入使用.NET 提供程序在 C#.NET OpenXML
https://support.microsoft.com/zh-cn/kb/315968 如何 ︰ 执行批量更新和插入使用.NET 提供程序在 C#.NET OpenXML Email Prin ...
- PG数据库创建并执行存储过程批量插入数据
记录一下PG数据库创建并执行存储过程批量插入数据的SQL: create or replace function addId() returns boolean AS $BODY$ declare i ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- jQuery的dom操作(二)转
addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- jQuery （DOM篇）
1.DOM节点的创建 创建元素节点: 常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构") $("<div&g ...
- HTML 学习笔记 JQuery（DOM 操作）
一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- 提高jQuery执行效率需要注意几点
1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...
随机推荐
- UVA 11609 - Teams(二项式系数)
题目链接 想了一会,应该是跟二项式系数有关系,无奈自己推的式子,构不成二项式的系数. 选1个人Cn1*1,选2个人Cn2*2....这样一搞,以为还要消项什么的... 搜了一下题解,先选队长Cn1,选 ...
- 访问google，youtube
一.找到host文件 windows : C:\windows\system32\drivers\etc mac os: /private/etc linux : /etc 二.修改host文件 ht ...
- linux下的crontab服务
linux下的crontab服务:1.crontab 是用来让使用者在固定时间或固定间隔执行程序之用在linux平台上如果需要实现任务调度功能可以编写cron脚本来实现.以某一频率执行任务linux缺 ...
- Maven dependency spring-web vs spring-webmvc
<dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmv ...
- bootstrap学习笔记之二
学习表单时还是有些吃力的,主要感觉有些结构有些复杂,没有自己亲手去操作就感觉似懂非懂,所以还得自己亲手测一下. 现在开始按钮的学习. 可作为按钮使用的标签和元素有: <a>.<bu ...
- 关于viewpoint的疑惑
问题: 为什么在手机上打开一个PC web页面,用手机打开一个宽度为980的固定布局页面,页面会默认缩放到刚好满屏显示,并不会出现横向滚动条? 一:设备像素和CSS像素区别 现代浏览器中实现缩放的方式 ...
- centos下安装php后连接不上mysql
安装完php后需要安装php的扩展比如: 安装php的扩展yum install php-mysql php-gd php-imap php-ldap php-odbc php-pear php-xm ...
- Oracle RAC的日志体系
Oracle Clusterware 不像数据库那样,有丰富的视图.工具可以用来辅助诊断,它的日志和trace文件是唯一的选择.但不像Oracle只有alert日志和几种trace文件,Oracle ...
- Java开发搜索引擎爬虫
package com.peidon.html; import java.io.BufferedReader; import java.io.File; import java.io.FileOutp ...
- 代理模式 & Java原生动态代理技术 & CGLib动态代理技术
第一部分.代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间通常 ...