关于性能优化的那点事——函数节流

khlbat 发布于2019-08-20 10:31 / 3413人阅读

摘要：函数节流背景中的函数大多数情况下都是由用户主动调用触发的除非是函数本身的实现不合理否则一般不会遇到跟性能相关的问题但在少数情况下函数的触发不是由用户直接控制的在这些场景下函数可能被非常频繁调用而造成大的性能问题场景事件事件滚动事件共同的特征

函数节流 背景

javascript中的函数大多数情况下都是由用户主动调用触发的, 除非是函数本身的实现不合理, 否则一般不会遇到跟性能相关的问题,但在少数情况下, 函数的触发不是由用户直接控制的. 在这些场景下, 函数可能被非常频繁调用, 而造成大的性能问题.

场景

window.onresize事件
mousemove事件
scroll滚动事件
共同的特征：高频触发事件函数, 若事件函数里附带DOM相关操作, 会造成非常大的性能消耗.

原理

将即将被执行的函数使用setTimeout延迟一段时间执行, 如果该次延迟执行还没有完成, 则忽略接下来调用该函数的请求.

实现 示例1

underscore.js的函数节流定义: _.throttle(fn, wait, [options]);

_.throttle接收三个参数, 第一次执行默认立刻执行一次fn
@params fn: 需要进行函数节流的函数;
@params wait: 函数执行的时间间隔, 单位是毫秒.
@params options: options有两个选项, 分别是:
        {leading: false}: 第一次调用不执行fn
        {trailing: false}: 禁止最后一次延迟的调用


_.throttle = function(fn, wait, options) {
    var context,
        args,
        result,
        timeout = null,
        previous = 0;

    if(!options) {
        options = {};
    }

    var later = function() {
        previous = options.leading === false ? 0 : _.now();
        timeout = null;
        result = fn.apply(context, args);

        if(!timeout) {
            context = args = null;
        }
    };

    return function() {
        var now = _.now();
        if(!previous && options.leading === false) {
            previous = now;
        }

        var remaining = wait - (now - previous);
        context = this;
        args = arguments;

        if(remaining <= 0 || remaining > wait) {
            if(timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = fn.apply(context, args);

            if(!timeout) {
                context = args = null;
            } else if(!timeout && options.trailing !== false) {
                timeout = setTimeout(later, remaining);
            }
            return result;
        }
    };
};

// demo:
$(window).scroll(_.throttle(function() {
    //相关处理
}, 500));

示例2

《javascript设计模式与开发实战》中对函数节流示例：

throttle函数接收两个参数
@params fn: 需要被延迟执行的函数;
@params interval: 延迟执行的时间;

var throttle = function(fn, interval) {
    var _self = fn,            // 保存需要被延迟执行的函数引用
        timer,                // 计时器
        firstTime = true;    // 是否第一次调用

    return function() {
        var args = arguments,
            _this = this;

        if(firstTime) {        // 如果是第一次调用, 不需要延迟执行
            _self.apply(_this, args);
            return firstTime = false;
        }

        if(timer) {            // 如果定时器还在, 说明前一次延迟执行还未完成
            return false;
        }

        timer = setTimeout(function() {
            clearTimeout(timer);
            timer = null;
            _self.apply(_this, args);
        }, interval || 500);
    };
};

// demo:
window.onresize = throttle(function() {
    console.log(1);
}, 500);

云服务器 GPU云服务器函数节流 js函数节流关于服务器的优化函数优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80188.html

关于性能优化的那点事——函数防抖

摘要：函数防抖场景假设网站有个搜索框用户输入文本我们会自动联想匹配出一些结果供用户选择我们可能首先想到的做法就是监听事件然后异步查询结果但是如果用户快速的输入了一串字符假设是个字符那么就会在瞬间触发次请求这无疑不是我们想要的我们想要的是用户停止输函数防抖场景假设网站有个搜索框, 用户输入文本我们会自动联想匹配出一些结果供用户选择,我们可能首先想到的做法就是监听keypress事件, 然...

Stardustsky 2019-08-21 14:21 评论0 收藏0
关于性能优化的那点事——BigRender首屏渲染优化

摘要：首屏渲染优化背景一个庞大的页面有时我们并不会滚动去看下面的内容这样就造成了非首屏部分的渲染这些无用的渲染不仅包括图片还包括其他元素甚至一些某些根据模块请求比如理论上每增加一个都会增加渲染的时间并且影响着页面打开的加载速度这时就需要一种办法使 BigRender首屏渲染优化背景一个庞大的页面, 有时我们并不会滚动去看下面的内容, 这样就造成了非首屏部分的渲染, 这些无用的渲染不仅包括...

Markxu 2019-08-20 10:35 评论0 收藏0
关于localStorage面试的那点事

摘要：已经超出本地存储限定大小可进行超出限定大小之后的操作，如下面可以先清除记录，再次保存面试官一波素质三连对于只是会使用的同学来说，肯定是不得其解的。最近面试的时候关于html5API总会被问到localStorage的问题，对于一般的问题很简单，无非就是 localStorage、sessionStorage和cookie这三个客户端缓存的区别 localStorage的API，g...

timger 2019-08-01 17:57 评论0 收藏0
关于var，let，const的那点事

摘要：一直使用定义变量，的出现给变量定义增加了两个大将，。声明的变量，块作用域，不重复声明覆盖，限制了变量的作用域，保证变量不会去污染全局变量，所以尽量将改为用。一直使用var定义变量，ES6的出现给变量定义增加了两个大将let，const。那它们有什么区别呢。 1、const关键字它的作用就是定义一个常量,一旦定义无法更改，不能重复声明覆盖； showImg(https://segmen...

KavenFan 2019-08-20 14:26 评论0 收藏0
php 学习笔记之关于时区的那点事

摘要：科普一下什么是时区众所周知地球绕着太阳转的同时也会自转因此同一时刻不同地区所接收到太阳照射的情况不同所以有的地区是日出有的地区是日落还有的地区可能是黑夜既然地球上的不同地区时间不同那总要有统一的时间刻度才能方便文化科技交流吧不然大家说的都是科普一下什么是时区众所周知,地球绕着太阳转的同时也会自转,因此同一时刻不同地区所接收到太阳照射的情况不同,所以有的地区是日出,有的地区是日落,还...

xzavier 2019-07-01 12:50 评论0 收藏0