jquery 操作dom效率测试------html和append插入文档
$(function () {
var htmlResult = createHtmlContent(100);
console.log(htmlResult)
insertHtml.call($("#left"), "html()耗时:", htmlResult);
insertHtml.call($("#right"), "append()耗时:", htmlResult);
}); function createHtmlContent(count) {
var htmlContent = "";
for (var i = 0; i < count; i++) {
htmlContent += `<div>这是第${i + 1}个元素</div>`;
}
return htmlContent;
} function insertHtml(type, htmlContent) {
console.time(type);
if (type === "html()耗时:") {
this.html(htmlContent);
} else if (type === "append()耗时:") {
this.empty().append(htmlContent);
}
console.timeEnd(type);
}
100条数据集合测试结果:
html()耗时:: 0.69921875ms
jqueryApiTest.html:46 append()耗时:: 1.571044921875ms
1000条数据集合测试结果:
html()耗时:: 3.281982421875ms
jqueryApiTest.html:46 append()耗时:: 9.39111328125ms
10000条数据集合测试结果
html()耗时:: 26.7099609375ms
jqueryApiTest.html:46 append()耗时:: 51.161865234375ms
jquery 操作dom效率测试------html和append插入文档的更多相关文章
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- jQuery权威指南(第2版) 学习一 jQuery操作DOM
jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...
- *jquery操作DOM总结 (原创:最全、最系统、实例展示)
jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...
- jQuery操作DOM知识总结
jquery操作DOM(节点) 1.创建元素 //$(htmlStr) //htmlStr:html格式的字符串 $("<span>这是一个span元素</span> ...
随机推荐
- docker基础-虚拟化与容器介绍
正如所有关心docker技术的人所知道的那样,docker是以容器虚拟化为技术为基础的软件,因此在学习docker具体的内容之前,有必要讨论一下虚拟化和容器技术. 虚拟化技术: 在了解虚拟化技术时,各 ...
- NO5——素数筛选
#include <stdio.h> int main() { ]={}; ;i<=;i++) a[i]=; ;i<=;i++) if(a[i]) ;j+=i) a[j]=; ...
- nopcommerce商城系统--升级NopCommerce
原址:http://www.nopcommerce.com/docs/80/upgrading-nopcommerce.aspx 本章介绍如何nopCommerce升级到最新版本.你可能希望这样做,你 ...
- 一个android控件资源网站
http://www.androidviews.net/ 里面有各种常用控件,赞~
- Linux之JDK在线安装及配置
1.查找java相关得列表 yum -y list java*2.在线安装 yum -y install java-1.6.0-openjdk*3.查看安装目录 ls -l /usr/lib/jv ...
- 【PHP】- 魔术常量
PHP 向它运行的任何脚本提供了大量的预定义常量.不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了.有八个魔术常量它们的值随着它们在代 ...
- Zebra - zebra command to get printer error and warning status
1 Flag2 Nibble 16-93 Nibble 8-44 Nibble 35 Nibble 26 Nibble 1
- BZOJ4488 JSOI2015最大公约数
显然若右端点确定,gcd最多变化log次.容易想到对每一种gcd二分找最远端点,但这样就变成log^3了.注意到右端点右移时,只会造成一些gcd区间的合并,原本gcd相同的区间不可能分裂.由于区间只有 ...
- C&C++——库头文件及其作用
1. 一些头文件的作用::ANSI C.提供断言,assert(表达式):GCC.GTK,GNOME的基础库,提供很多有用的函数,如有数据结构操作函数.使用glib只需要包含:GCC.文件夹操作函数. ...
- Generator的基本用法
Generator函数是一个状态机,封装了多个内部状态.执行一个Generator,会返回一个迭代器对象,通过迭代器对象,可以遍历Generator函数内部的每个状态.因此,Generator函数可以 ...