JQuery执行DOM批量克隆插入提效方法

浏览数：22 / 时间：2015年06月09日

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>