页面优化之高性能滚动scroll（防抖和节流）

js相对于触发scroll和resize等类事件，触发频次非常高，涉及到大量DOM操作和渲染重绘。会影响用户体验。

页面渲染的原理

一个页面展示，主要经过以下步骤：



javascript来实现视觉变化效果

style主要用于匹配CSS样式

layout主要是布局确定每个元素的样式规则，进一步具体计算每个DOM元素最终在屏幕上显示的大小和位置，页面布局是相对的，一个元素变化有可能会联动其他元素的变化。

paint即是绘制的过程，即填充像素的过程，包括绘制文字，颜色，边框和阴影等。一般会在多个层中进行。

Composite即是渲染层合并，对页面中DOM元素的绘制是在多个层中进行的，在每个层完成绘制过程之后，浏览器按照合理的顺序合并成一个图层。

相对于解决高频率的触发事件，常用解决方式是防抖和节流。

防抖（Debouncing）

防抖技术即是可以把多个顺序地调用合并成一次，即规定事件被触发的次数。

// 防抖动函数
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};

var myEfficientFn = debounce(function() {
// 滚动中的真正的操作
}, 250);

// 绑定监听
window.addEventListener('resize', myEfficientFn);

节流函数即只允许函数在x毫秒内执行一次

// 简单的节流函数
function throttle(func, wait, mustRun) {
var timeout,
startTime = new Date();

return function() {
var context = this,
args = arguments,
curTime = new Date();

clearTimeout(timeout);
// 如果达到了规定的触发时间间隔，触发 handler
if(curTime - startTime >= mustRun){
func.apply(context,args);
startTime = curTime;
// 没达到触发间隔，重新设定定时器
}else{
timeout = setTimeout(func, wait);
}
};
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
console.log("Success");
}
// 采用了节流函数
window.addEventListener('scroll',throttle(realFunc,500,1000));

两者优缺点：

防抖动：防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。

节流函数：只允许一个函数在 X 毫秒内执行一次，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。

转自博主http://www.cnblogs.com/coco1s/p/5499469.html