放在for
循环内的append
操作,本来应该是for循环执行一次就append
一次,但是现在变成了整个for循环完成后才一次性append
生成的元素到DOM中去。查了下说这个是因为重绘DOM耗费资源所以缓存掉了。想问下有办法解决么?
问题核心代码:
for (var i = 0; i < testTimes; i++) {
for (var j = 0; j < allFunc.length; j++) {
var currentResult=$('.result').eq(j);
var gapTime=test(times,allFunc[j]);
var testTime=currentResult.find('span').length+1;
if(!resultMatrix[testTime-1]){
resultMatrix[testTime-1]=[];
}
console.log('1');
var result="<span>第"+testTime+'次实验结果:耗时'+gapTime+'ms</span>';
currentResult.append(result);//append不是一条一条加,而是全部结果出来后才加上去
/* 这是后来改成原生appendChild的代码,但是依旧不起作用
var result=document.createElement('span');
result.innerHTML='第'+testTime+'次实验结果:耗时'+gapTime+'ms';
currentResult.get(0).appendChild(result);
*/
resultMatrix[testTime-1][j]=gapTime;
};
};
DEMO:
http://codepen.io/chitanda/full/NqeZag/
期望效果:
实验结果那里的数据每次计算完成后都即时更新,而不是全部计算完成后一次性更新上去。
PS
chrome下还有个很有趣的现象就是开发者工具的Elements
面板里显示span
已经加上去了,但是页面中没有任何反应。而IE和FF中则没有这种情况。不知道能否顺带解答下。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
JS在执行的过程中,UI渲染过程是不能够介入的
只能等到所在的JS代码执行完毕,UI线程才开始执行页面渲染工作
另外 append后 DOM结构树已经生成了,要显示出来需要UI渲染线程参与
同时,由于每次访问offset都会刷新渲染树,相比其他可用的坐标属性,访问offset的性能消耗会大一些。所以如果不需要访问那些即时数据就可以完成任务,尽量不用。
说起offset,废话略多了。。不过做CSS动画是你可以offset获取到任何时刻处于动画中的元素坐标,然后就可以干好多好多事,很6的。。。。。
额,扯远了,算了,大概就是这样子吧。
楼上两位大神已经说的挺清楚了,其实就是浏览器做的性能优化,你试试看使用
setTimeout
能不能规避这种优化