国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

scola666 / 2228人閱讀

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

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

基本的優(yōu)化思路：在一定的時間之內(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!");
});

scroll事件優(yōu)化同理。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/7335.html

相關(guān)文章

  • 前端優(yōu)化 —— 函數(shù)的節(jié)流和防抖

    摘要：文件為函數(shù)要傳入的參數(shù)返回事件處理函數(shù)添加事件監(jiān)聽節(jié)流函數(shù)一般用于事件的情況較多，因為這些事件的觸發(fā)是連續(xù)性的，需要在一個時間間隔內(nèi)只觸發(fā)一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 閱讀原文 前言 在前端開發(fā)當(dāng)中我們經(jīng)常會綁定一些事件觸發(fā)的某些程序執(zhí)行，有時這些事件會連續(xù)觸發(fā)，如瀏覽器窗口 s...

    ralap 評論0 收藏0

  • 【譯】通過例子解釋 Debounce 和 Throttle

    摘要：舉例舉例通過拖拽瀏覽器窗口，可以觸發(fā)很多次事件。不支持，所以不能在服務(wù)端用于文件系統(tǒng)事件?？偨Y(jié)將一系列迅速觸發(fā)的事件例如敲擊鍵盤合并成一個單獨的事件。確保一個持續(xù)的操作流以每毫秒執(zhí)行一次的速度執(zhí)行。 Debounce 和 Throttle 是兩個很相似但是又不同的技術(shù)，都可以控制一個函數(shù)在一段時間內(nèi)執(zhí)行的次數(shù)。 當(dāng)我們在操作 DOM 事件的時候，為函數(shù)添加 debounce 或者 th...

    LeoHsiun 評論0 收藏0

  • 移動端滾動研究

    摘要：還會有一個性能上的問題就是當(dāng)頁面的列表過長，元素過多時，在模擬滾動，下拉刷新這段時間內(nèi)，頁面也會有卡頓現(xiàn)象，這里采取了一個優(yōu)化策略即列表較長時數(shù)量較多時，在觸發(fā)下拉刷新的時機(jī)時將頁面視窗之外的元素隱藏或者存放在里面。 移動web滾動問題 在移動端如果使用局部滾動，意思就是我們的滾動在一個固定寬高的div內(nèi)觸發(fā)，將該div設(shè)置成overflow:scroll/auto;來形成div內(nèi)部的...

    ghnor 評論0 收藏0

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動debounce

    摘要：主要實現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調(diào)用方法打時間進(jìn)行比較，用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說，直奔主題。 什么是throttle和debounce？ 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

    張紅新 評論0 收藏0

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動debounce

    摘要：主要實現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調(diào)用方法打時間進(jìn)行比較，用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說，直奔主題。 什么是throttle和debounce？ 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

    lieeps 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<