首页新闻找找看学习计划

造成两种代码性能差异的原因是什么

0
悬赏园豆:10 [已解决问题] 解决于 2019-04-01 10:47
写法一:
        var div = document.getElementsByTagName('div')[0];
        for (var i = 0xA00000; i < 0xFFFFFF; i++) {
            div.style.backgroundColor = '#' + i.toString(16);
        }
写法二:
        var div = document.getElementsByTagName('div')[0];
        var timer;
        var i=0x100000;
        function func() {
            timer = setTimeout(func, 0);
            div.style.backgroundColor = '#' + i.toString(16);
            if (i++ == 0xFFFFFF) clearTimeout(timer);
        }
        timer = setTimeout(func, 0);    

求教,是什么具体原因导致上面两种写法,带来的性能差异

David-lcw的主页 David-lcw | 初学一级 | 园豆:185
提问于:2019-02-13 19:36
< >
分享
最佳答案
1

因为楼主用了setTimeout,setTimeout(func, 0)不是立即执行,而是将事件添加到事件队列中,另外setTimeout的第二个参数实质上不可能为0,现代浏览器中一般最小为4ms,老旧的IE好像是16ms。

https://github.com/JofunLiang/usuallyjs 这是本人的一个开源项目,欢迎楼主一起交流!

收获园豆:10
雨霖月寒 | 菜鸟二级 |园豆:229 | 2019-03-27 10:58
其他回答(5)
0

代码多了好多行.肯定上面的差.

吴瑞祥 | 园豆:28731 (高人七级) | 2019-02-13 22:02
1

方法一:
js 的for一次性就执行完成后,dom才去渲染。

意味着dome渲染一次

方法二:
使用settimeout的方式,每一次给bgcolor赋值之后,就会使dom去渲染,渲染完成后,在进行下一次timeout执行func。

意味着dom渲染0xFFFFFF次

czd890 | 园豆:7575 (大侠五级) | 2019-02-14 09:22

好像是这么个意思,我以前也是用settimeout(function,0)才能满足需求。不然有bug

支持(0) 反对(0) 一禅·小和尚 | 园豆:497 (菜鸟二级) | 2019-02-14 10:16

@一禅·小和尚: 理解 js 的eventloop 模型就比较好理解了。

楼下说的没错,settimeout 每一次都要往eventloop 里面丢callback,在然后调用。自然慢的很

支持(0) 反对(0) czd890 | 园豆:7575 (大侠五级) | 2019-02-14 13:34
1

从另一个角度看:
方法一是 for 循环,方法二是 递归。

for 循环和 递归都能达到同样的目的,那么二者性能对比如何?
我认为是递归的效率更底下,因为递归中存在大量的对内存栈的 push 和pop 操作,并且函数重复调用的消耗也比for循环消耗更过。

Shendu.CC | 园豆:1771 (小虾三级) | 2019-02-14 12:24

大佬分析的很透彻!菜鸟膜拜!

支持(0) 反对(0) 古宇 | 园豆:276 (菜鸟二级) | 2019-02-14 13:04

方法二并不是递归

支持(0) 反对(0) 不如隐茶去 | 园豆:524 (小虾三级) | 2019-02-15 16:56

@不如隐茶去: 为什么不是呢?

支持(0) 反对(0) Shendu.CC | 园豆:1771 (小虾三级) | 2019-02-15 17:15

@Shendu.CC: 因为并不存在哪一个函数在调用自身

支持(0) 反对(0) 不如隐茶去 | 园豆:524 (小虾三级) | 2019-02-15 18:12

@不如隐茶去: func 调用 func

  function func() {
            timer = setTimeout(func, 0);
          ....
支持(0) 反对(0) Shendu.CC | 园豆:1771 (小虾三级) | 2019-02-15 18:24

@Shendu.CC: func 调用的是 setTimeout, setTimeout 调用 func 的时候,当前的 func 栈已经退出了

支持(0) 反对(0) 不如隐茶去 | 园豆:524 (小虾三级) | 2019-02-15 23:41
0

越简单的效率越高

学会乐观 | 园豆:653 (小虾三级) | 2019-03-05 08:41
0

楼主研究得真细致,感觉还是因为用了递归,导致性能更低些。

zanetti | 园豆:153 (初学一级) | 2019-03-15 23:51
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册