只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 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事件优化同理。
效果如图：
