resize和scroll事件的性能優(yōu)化

scola666 發(fā)布于2019-05-23 17:30 / 2219人閱讀

摘要：的事件也是如此，鼠標(biāo)滾動(dòng)或拖動(dòng)滾動(dòng)條，就會(huì)不停的觸發(fā)事件，如果處理的東西多，低版本的也會(huì)陷入假死狀態(tài)。基本的優(yōu)化思路在一定的時(shí)間之內(nèi)，只執(zhí)行一次事件函數(shù)，建議使用或者比如事件優(yōu)化同理。

只要用戶改變窗口大小，會(huì)對(duì)內(nèi)部一些元素大小重新計(jì)算，可能導(dǎo)致整個(gè)頁面重新渲染，最終導(dǎo)致大量消耗 CPU。比如調(diào)用 resize 方法，用戶改變窗口大小時(shí)會(huì)不停的被觸發(fā)，低版本的IE 會(huì)可能陷入假死狀態(tài)。window的scroll事件也是如此，鼠標(biāo)滾動(dòng)或拖動(dòng)滾動(dòng)條，就會(huì)不停的觸發(fā)scroll事件，如果處理的東西多，低版本的IE也會(huì)陷入假死狀態(tài)。

基本的優(yōu)化思路：在一定的時(shí)間之內(nèi)，只執(zhí)行一次resize事件函數(shù)，建議使用requestAnimationFrame, setTimeout 或者 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!");
});