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批量克隆并插入的提效方法相关推荐
- jQuery 学习-DOM篇(三):jQuery 在 DOM 外部插入元素
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- jQuery 学习-DOM篇(二):jQuery 在 DOM 内部插入元素
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- jQuery (DOM篇)
1.DOM节点的创建 创建元素节点: 常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构") $("<div&g ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...
- 提高jQuery执行效率
[from] http://hi-beijing.iteye.com/blog/1168296 [ppt] http://addyosmani.com/jqprovenperformance/ 1. ...
- 04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
- jQuery的DOM操作
jQuery的DOM操作 前期:http://blog.csdn.net/goodshot/article/details/20202019 1 , 创建元素节点 传统的javascript方法,创建 ...
- day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、 对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
最新文章
- SpringBoot集成全局异常处理
- 经典的异或题:只出现一次的数字
- mysql单列索引和多列索引_浅谈MySQL索引优化
- 细数那些你可能不知道的国产数据库
- cdr 表格自动填充文字_PS那些好用到哭的新手小技巧(1)——如何快速去除文字图片的水印或背景文字?...
- oracle报sp20042,oracle中ora-04301故障处理
- java监听鼠标接口实现_自定义Java鼠标监听器?
- install常见问题
- Ubuntu下mysql跟换datadir,数据库存放路径,支持更改单个库的存放路径
- php手机网站制作程序,phpcms制作手机WAP网站模板二次开发教程
- C语言素数ns流程图,请各位大神帮个忙,画个NS流程图,,急!!!
- java-net-php-python-2020ssm考研题目管理系统计算机毕业设计程序
- 越睡越累,原因竟然是这个!
- c语言 楼盘查询系统,专业楼盘部模型
- 苹果手机计算机有哪些功能,苹果iPhone手机问答:iPhone计算器原来这么好用 神奇功能汇总...
- Android加固调研
- Docker 配置国内镜像源
- RabbitMQ介绍和安装以及当下发展现状
- python基础知识三 字典-dict + 菜中菜
- Android studio 出现C:\WINDOWS\TEMP\