造成两种代码性能差异的原因是什么
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);
求教，是什么具体原因导致上面两种写法，带来的性能差异
最佳答案
1
因为楼主用了setTimeout，setTimeout(func, 0)不是立即执行，而是将事件添加到事件队列中，另外setTimeout的第二个参数实质上不可能为0，现代浏览器中一般最小为4ms，老旧的IE好像是16ms。
https://github.com/JofunLiang/usuallyjs 这是本人的一个开源项目，欢迎楼主一起交流！
收获园豆：10
其他回答(5)
0
代码多了好多行.肯定上面的差.
1
方法一：
js 的for一次性就执行完成后，dom才去渲染。
意味着dome渲染一次
方法二：
使用settimeout的方式，每一次给bgcolor赋值之后，就会使dom去渲染，渲染完成后，在进行下一次timeout执行func。
意味着dom渲染0xFFFFFF次
好像是这么个意思，我以前也是用settimeout（function,0）才能满足需求。不然有bug
@一禅·小和尚: 理解 js 的eventloop 模型就比较好理解了。
楼下说的没错，settimeout 每一次都要往eventloop 里面丢callback，在然后调用。自然慢的很
1
从另一个角度看：
方法一是 for 循环，方法二是 递归。
for 循环和 递归都能达到同样的目的，那么二者性能对比如何？
我认为是递归的效率更底下，因为递归中存在大量的对内存栈的 push 和pop 操作，并且函数重复调用的消耗也比for循环消耗更过。
大佬分析的很透彻!菜鸟膜拜！
方法二并不是递归
@不如隐茶去: 为什么不是呢？
@Shendu.CC: 因为并不存在哪一个函数在调用自身
@不如隐茶去: func 调用 func
function func() {
timer = setTimeout(func, 0);
....@Shendu.CC: func 调用的是 setTimeout, setTimeout 调用 func 的时候，当前的 func 栈已经退出了
0
越简单的效率越高
0
楼主研究得真细致，感觉还是因为用了递归，导致性能更低些。
