window resize和scroll事件性能优化

只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 CPU。比如调用 resize 方法，用户改变窗口大小时会不停的被触发， 低版本的IE 会可能陷入假死状态。window的scroll事件也是如此，鼠标滚动或拖动滚动条，就会不停的触发scroll事件，如果处理的东西多，低版本的IE也会陷入假死状态。

基本的优化思路：在一定的时间之内，只执行一次resize事件函数，建议使用requestAnimationFrame（https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame）, setTimeout 或者 customEvent（https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent）, 比如:

requestAnimationFrame

var optimizedResize = (function() {	
    var callbacks = [],	
        running = false;	
    // fired on resize event	
    function resize() {	
        if (!running) {	
            running = true;	
            if (window.requestAnimationFrame) {	
                window.requestAnimationFrame(runCallbacks);	
            } else {	
                setTimeout(runCallbacks, 66);	
            }	
        }	
    }	
    // run the actual callbacks	
    function runCallbacks() {	
        callbacks.forEach(function(callback) {	
            callback();	
        });	
        running = false;	
    }	
    // adds callback to loop	
    function addCallback(callback) {	
        if (callback) {	
            callbacks.push(callback);	
        }	
    }	
    return {	
        // public method to add additional callback	
        add: function(callback) {	
            if (!callbacks.length) {	
                window.addEventListener('resize', resize);	
            }	
            addCallback(callback);	
        }	
    }	
}());	
// start process	
optimizedResize.add(function() {	
    console.log('Resource conscious resize callback!')	
});

setTimeout

(function() {	
  window.addEventListener("resize", resizeThrottler, false);	
  var resizeTimeout;	
  function resizeThrottler() {	
    // ignore resize events as long as an actualResizeHandler execution is in the queue	
    if ( !resizeTimeout ) {	
      resizeTimeout = setTimeout(function() {	
        resizeTimeout = null;	
        actualResizeHandler();	
       // The actualResizeHandler will execute at a rate of 15fps	
       }, 66);	
    }	
  }	
  function actualResizeHandler() {	
    // handle the resize event	
    ...	
  }	
}());

requestAnimationFrame + customEvent

;(function() {	
    var throttle = function(type, name, obj) {	
        obj = obj || window;	
        var running = false;	
        var func = function() {	
            if (running) { return; }	
            running = true;	
             requestAnimationFrame(function() {	
                obj.dispatchEvent(new CustomEvent(name));	
                running = false;	
            });	
        };	
        obj.addEventListener(type, func);	
    };	
    /* init - you can init any event */	
    throttle("resize", "optimizedResize");	
})();	
// handle event	
window.addEventListener("optimizedResize", function() {	
    console.log("Resource conscious resize callback!");	
});

scroll事件优化同理。

效果如图：