同事在项目中使用scroll事件去加载数据,结果IE下悲剧了。给了一个简单优化方法,效果明显。
只要用户改变窗口大小,会对内部一些元素大小重新计算,可能导致整个页面重新渲染,最终导致大量消耗 CPU。比如调用 resize 方法,用户改变窗口大小时会不停的被触发,?低版本的IE 会可能陷入假死状态。window的scroll事件也是如此,鼠标滚动或拖动滚动条,就会不停的触发scroll事件,如果处理的东西多,低版本的IE也会陷入假死状态。
基本的优化思路:在一定的时间之内,只执行一次resize事件函数。
var resizeTimer = null;
$(window).on('resize', function () {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log("window resize");
}, 400);
}
);
scroll事件优化同理。
这个明显的错误的,你自己试过了吗?
$.resizeWaiter = false;
$(window).resize(function() {
if(!$.resizeWaiter){
$.resizeWaiter = true;
setTimeout(function(){
$.dataTable && $.dataTable.fnDraw(false);
$.resizeWaiter = false;
}, 500);
}
});
路过的试了下是对的,反倒是你调用setTimeout()的位置不对与文章中的不相同。你想说明什么?
认真点抄
你这代码有问题,不停的拖动,你的timer 只有在停下来以后才会调用,
var resizeTimer = null;
window.onresize = function () {
if (resizeTimer) {
return;
}
resizeTimer = setTimeout(function(){
console.log(“window resize”);
}, 400);
}