页面优化之高性能滚动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 事件上的 handlerfunction realFunc(){    console.log("Success");}// 采用了节流函数window.addEventListener('scroll',throttle(realFunc,500,1000));

两者优缺点：

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

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

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