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批量克隆并插入的提效方法的更多相关文章

  1. 如何 ︰ 执行批量更新和插入使用.NET 提供程序在 C#.NET OpenXML

    https://support.microsoft.com/zh-cn/kb/315968 如何 ︰ 执行批量更新和插入使用.NET 提供程序在 C#.NET OpenXML Email Prin ...

  2. PG数据库创建并执行存储过程批量插入数据

    记录一下PG数据库创建并执行存储过程批量插入数据的SQL: create or replace function addId() returns boolean AS $BODY$ declare i ...

  3. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  4. jQuery的dom操作(二)转

    addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr ...

  5. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  6. jQuery （DOM篇）

    1.DOM节点的创建 创建元素节点: 常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构") $("<div&g ...

  7. HTML 学习笔记 JQuery（DOM 操作）

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  8. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  9. 提高jQuery执行效率需要注意几点

    1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...

随机推荐

  1. Codeforces Round #233 (Div. 2) B. Red and Blue Balls

    #include <iostream> #include <string> using namespace std; int main(){ int n; cin >&g ...

  2. NOIp 2014 #2 联合权值 Label：图论 ！！！未AC

    题目描述 无向连通图G 有n 个点,n - 1 条边.点从1 到n 依次编号,编号为 i 的点的权值为W i ,每条边的长度均为1 .图上两点( u , v ) 的距离定义为u 点到v 点的最短距离. ...

  3. Linq to DataTable 左连接

    所先创建2个DataTable并对其赋值,来进行模拟. DataTable dt1 = new DataTable(); dt1.Columns.Add("ID", typeof( ...

  4. BZOJ4519: [Cqoi2016]不同的最小割

    Description 学过图论的同学都知道最小割的概念:对于一个图,某个对图中结点的划分将图中所有结点分成 两个部分,如果结点s,t不在同一个部分中,则称这个划分是关于s,t的割.对于带权图来说,将 ...

  5. ThinkPhp循环出数据库中的内容并输出到模板

    <foreach name='user' item='v'> //循环出数据库中的内容 对应控制器->方法中的  $this->assign('user',M('user')- ...

  6. linux下查看内存的命令

    top能显示系统内存.我们常用的Linux下查看内容的专用工具是free命令. 下面是对内存查看free命令输出内容的解释: total:总计物理内存的大小. used:已使用多大. free:可用有 ...

  7. 接口测试之soupui&groovy

    原著地址:http://www.cnblogs.com/wade-xu/p/4236295.html#3334654 需注意下方code的设置

  8. [转][LeetCode]Longest Common Prefix ——求字符串的最长公共前缀

    题记: 这道题不难但是很有意思,有两种解题思路,可以说一种是横向扫描,一种是纵向扫描. 横向扫描:遍历所有字符串,每次跟当前得出的最长公共前缀串进行对比,不断修正,最后得出最长公共前缀串. 纵向扫描: ...

  9. Repaint轨迹保留？（待处理，待编辑）

    import java.awt.Color; import java.awt.Graphics; import javax.swing.JFrame; import javax.swing.JPane ...

  10. Daily Scrum 11.5

    今天成员全部到齐,对今天的工作进行了总结,并对明天的工作作了安排.由于先前分配的任务都已基本完成,要完成程序的三级优化是较为艰巨的任务.所以我们讨论决定,除PM外其他成员都投入到程序的优化和改进中去. ...