window resize和scroll事件性能优化

前端迷

发布于 2019-05-28 19:40:20

1.8K0

发布于 2019-05-28 19:40:20

只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 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 processoptimizedResize.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 eventwindow.addEventListener("optimizedResize", function() {    console.log("Resource conscious resize callback!");});

scroll事件优化同理。

效果如图：