console.log的一个应用 -----用new方法生成一个img对象和document.createElement方法创建一个img对象的区别
2023-09-27 14:20:06 时间
我用两种方法来生成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()似乎更好!
相关文章
- 安卓逆向_10 --- Log 日志的插入和分析、toast方法、栈跟踪
- [机器码] 获取 MAC 地址的几种方法
- Xposed框架Hook Android应用的所有类方法打印Log日志
- Oracle数据库的备份方法
- JavaDemo——随机数Random类和Math.random()方法
- Eclipse 出现Some sites could not be found. See the error log for more detail.错误 解决方法
- 【LOMBOK】能引入 @Slf4j 注解,不能识别 log 的解决方法
- Spring源码解析(十四)Spring调用初始化方法initializeBean
- 常用的采样方法
- 《众妙之门——网页排版设计制胜秘诀》——第3章 设置网页字体的5 项原则和方法3.1 系统地进行网页版式设计
- 让正常网页呈现黑白色调的方法
- c# Directory类的常用方法
- 哪位有方法把 dd/mm/yyyy的字符串 格式化成yyyy-mm-dd
- Boost Log 基本使用方法
- Git 常见错误 之 fatal: remote error: CAPTCHA required 简单解决方法
- 前端页面模板bootstrap及使用方法
- 20.multi_协程方法抓取总阅读量
- 【java排序】:基本的三种排序方法(冒泡、插入、选择)