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源码-class操作
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- 用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式改动提交相应的那一行的改动内容。
- Jquery 动画
- 《jQuery Cookbook中文版》——1.9 根据当前上下文遍历DOM获得新的DOM元素集
- 《jQuery Mobile快速入门》—— 2.3 Ajax驱动的导航
- jQuery常用及基础知识总结(一)
- 基于bootstrsp的jquery富文本编辑器的手冊说明
- jquery 学习第一课之start
- jquery-div提示框渐隐弹出与隐藏