console.log的一个应用 -----用new方法生成一个img对象和document.createElement方法创建一个img对象的区别
我用两种方法来生成img对象,第一种方法是用new方法,第二种方法是用document.createElement方法。
- var img1 = new Image();
- var img2 = document.createElement('img');
var img1 = new Image();
var img2 = document.createElement('img');
其实,乍一看,感觉有些不同,但是具体什么不同,一下子也说不上来。
在console窗口,比较看看,都是生成img对象,节点名称都一样。
接下来,我来比较一下它们的node类型
结果nodeType也是一样的,都属于元素节点。
节点类型常用的有3种,元素节点Node.ELEMENT_NODE(1);属性节点Node.ATTRIBUTE_NODE(2)以及文本节点Node.TEXT_NODE(3)。
从类型和名称上看,这两种方法创建的img节点是没有什么不同的。
最后,比较一下效率吧。分别运算10万次。
- <SPAN style="WHITE-SPACE: pre"> </SPAN>var time1= new Date() - 0;
- for(var i = 0; i < 100000; i++) {
- var img1 = new Image();
- }
- var time2 = new Date() - 0;
- console.log('the first time is ' + (time2 - time1));
- var time3= new Date() - 0;
- for(var i = 0; i < 100000; i++) {
- var img1 = document.createElement('img');
- }
- var time4 = new Date() - 0;
- console.log('the second time is ' + (time4 - time3));
var time1= new Date() - 0;
for(var i = 0; i < 100000; i++) {
var img1 = new Image();
}
var time2 = new Date() - 0;
console.log('the first time is ' + (time2 - time1)); var time3= new Date() - 0;
for(var i = 0; i < 100000; i++) {
var img1 = document.createElement('img');
}
var time4 = new Date() - 0;
console.log('the second time is ' + (time4 - time3));
得出的结论是document.createElement()方法的效率更好!
那么计算100万次呢?却有点出乎意料,new Image()方法更胜一筹!
1000次的时候,是document.CreateElement()方法更有效率!
1000万次的时候,new Image()方法更快,我洗脸刷牙泡脚完毕的时候,document.createElement()方法都还没有计算完成呢,再后来直接崩溃了。
所以,在生成对象个数较少的时候,用document.createElement()似乎更好!
console.log的一个应用 -----用new方法生成一个img对象和document.createElement方法创建一个img对象的区别的更多相关文章
- JavaScript 覆盖document.createElement 方法 解决window.close在火狐下不兼容问题)
近期项目遇到了问题,有个asp.net web程序仅仅能在IE7 执行.如今xp都淘汰了,大家都用IE8-IE11,因此这个web app也须要升级 适应全部IE版本号.照成IE版本号不兼容的问题主要 ...
- JavaScript 覆盖document.createElement 方法
最近项目遇到了问题,有个asp.net web程序只能在IE7 运行,现在xp都淘汰了,大家都用IE8-IE11,因此这个web app也需要升级 适应所有IE版本.照成IE版本不兼容的问题主要来致d ...
- document.createElement方法的使用
我们在使用createElemen方法t创建一个元素节点的时候,似乎在IE下面怎么写都可以,但切换到FF等其它浏览器却总是会报错. 比如我们要创建一个input元素,那么在IE下,我们可以有多种写法: ...
- document.createElement()方法
document.createElement()是在对象中创建一个对象,主要和appendChild() 方法或者insertBefore() 方法联合使用. appendChild() 方法在节点的 ...
- JavaScript原型链中toString()方法输出alert()和console.log()得到不同的结果
<script language="javascript"> function myObj(){ var total = 0; } myObj.prototype.ad ...
- 再也不用担心ie下console.log报错了。。。
习惯了在ff或者chrome下暴力调试的你会不会忘记注释掉而在ie下报错呢,那么可以加这个代码: if (typeof console == "undefined") { this ...
- 还是只使用console.log()进行调试?好吧,其实还有更多。
在浏览器控制台中打印消息无疑可以拯救所有开发人员. console.log()消息就像您的大多数疾病的药,同时调试了代码中的一些有线问题. 那里的大多数开发人员都喜欢— 让我们在浏览器中打印消息以了解 ...
- 简述alert和console.log的区别
生活中还是得有发现美好和差别的眼睛~~ 学习前端那么久既然还不知道alert和console.log的差别~~~~ 蓝瘦,香菇~~~ 本菜鸟一直以为alert和console.log其实是一样的用法, ...
- alert与console.log
1.alert在页面中弹出 console.log是在控制台显示 例子 var aa="Silence"; alert(typeof(aa)); console.log(typeo ...
随机推荐
- 大一暑假为期五周的ACM实验室培训结束了(2013.8.24)
没想到,我的大学里第一个暑假,9周的时间只有最初的两周在家待着,接下来的7周将会在学校度过. 说真的,这是我上学以来,第一次真正好好利用的假期.在这五周里,周一.三.五下午学长都会给我们讲点知识,之后 ...
- idHTTP访问百度
百度屏蔽了indy的客户端标识的 Mozilla/3.0 (compatible; Indy Library),把‘Indy Library’去掉就可以了. try IdHTTP1.Request.U ...
- Freebie: Material Design UI Kit
点这里 Following the guidelines laid out by Google, this free UI kit has been designed so that you can ...
- XCODE快捷键个人总结
1.在方法名上用CMD+左键 可以查看完整的方法名
- Baidu和Google搜索引擎使用技巧(转)
转自:Baidu和Google搜索 http://www.douban.com/note/261208979/ 百度搜索一:基本搜索 二:高级搜索 谷歌搜索一:基本搜索1)可部分匹配也可完全匹 ...
- Ajax的进阶学习(一)
在Ajax课程中,我们了解了最基本的异步处理方式.本章,我们将了解一下Ajax的一些全局请求事件.跨域处理和其他一些问题. 加载请求 在Ajax异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长 ...
- HDFS2.x之RPC流程分析
HDFS2.x之RPC流程分析 1 概述 Hadoop提供了一个统一的RPC机制来处理client-namenode, namenode-dataname,client-dataname之间的通信.R ...
- lintcode:交换链表当中两个节点
题目 给你一个链表以及两个权值v1和v2,交换链表中权值为v1和v2的这两个节点.保证链表中节点权值各不相同,如果没有找到对应节点,那么什么也不用做. 注意事项 你需要交换两个节点而不是改变节点的权值 ...
- lintcode: 最小调整代价
题目 最小调整代价 给一个整数数组,调整每个数的大小,使得相邻的两个数的差小于一个给定的整数target,调整每个数的代价为调整前后的差的绝对值,求调整代价之和最小是多少. 样例 对于数组,最小的调整 ...
- Android核心分析之十六Android电话系统-概述篇
Android电话系统之概述篇 首先抛开Android的一切概念来研究一下电话系统的最基本的描述.我们的手机首先用来打电话的,随后是需要一个电话本,随后是PIM,随后是网络应用,随后是云计算,随后是想 ...