美文网首页
javascript的装逼优化技巧之惰性加载函数

javascript的装逼优化技巧之惰性加载函数

作者: 张培跃 | 来源:发表于2020-03-07 17:02 被阅读0次

天下武功唯快不破!编程也是同理!程序的优化,其实最终优化的是代码执行速度。而执行速度的提升往往是从很多代码细节当中不断堆砌出来的。相反,垃圾代码也是同理。

程序优化的过程往往也是提升编程效率的一个有效捷径。

今天为大家分享的是JavaScript当中的惰性函数。所谓惰性函数的重点就在这个惰字上,它是函数式编程应用的一种。由于它很惰,所以其只会在函数第一次调用时执行。

如果在字面上不好理解,那么请细品下方的代码。不知是否有种似曾相识的感觉?

function zhang(){
    if(a === 1){
        console.log("对着JS一调一下午")
    }else{
        console.log("调了一下午,bug还得补")
    }
}

在上面这段代码中存有一个判断语句,如果在当前环境下a的值不变,那么该函数不管你如何执行,其结果都不会发生任何变化。但每次执行还要进行if判断,这势必造成了没有必要的浪费。

当聊到这儿的时候,肯定有同学在想:这只是多执行一次判断而已,对整体应该无伤大雅吧!没错!影响的效率从某种程序上不会被察觉,但请记住:苍蝇腿也是肉!程序的优化其实优化的是细节,优化的细节多了,那么势必会提升你项目的用户体验!

惰性加载表示函数内的执行分支只会发生一次。那如何才能达到发生一次?一般有两种破解方案。

1、函数被调用时处理函数:
function zhang(){
    if(a === 1){
        zhang = function(){
            console.log("对着JS一调一下午");
        }
    }else{
        zhang = function(){
            console.log("调了一下午,bug还得补");
        }
    }
    return zhang();
}

这样在进入满足条件的分支后会对zhang重新赋值,之后每次调用zhang就不会再执行if判断。

2、声明函数时就指定适当的函数
var zhang = (function () {
    if (a === 1) {
        return function () {
            console.log("对着JS一调一下午");
        }
    } else {
        return function () {
            console.log("调了一下午,bug还得补");
        }
    }
})();

这里创建一个匿名函数并自执行,用来确定具体使用哪一个函数来实现。

惰性函数的特点就是:只在第一次执行时牺牲一点点性能,将性能节省至最低。
—————END—————
喜欢本文的朋友们,欢迎关注公众号 张培跃,收看更多精彩内容!!!

相关文章

  • javascript的装逼优化技巧之惰性加载函数

    天下武功唯快不破!编程也是同理!程序的优化,其实最终优化的是代码执行速度。而执行速度的提升往往是从很多代码细节当中...

  • 前端_JavaScript

    JavaScript 专题之惰性函数 JavaScript 专题系列第十五篇,讲解惰性函数 需求 我们现在需要写一...

  • JS性能优化之惰性加载函数

    前端开发不可避免的会有跨浏览器的需求,为了兼容各浏览器,绝大时候我们的处理方式都是用几个if...else或者tr...

  • 前端性能优化之Lazyload

    前端性能优化之Lazyload @(冬晨)[JavaScript|技术分享|懒加载] [TOC] Lazyload...

  • 『JavaScript专题』之惰性函数

    需求 我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date 对象,注意是首次。 解决一:普通方法 ...

  • 惰性加载函数

    1.普通函数 缺点: 每次调用要重复判断 2.避免每次重复判断 缺点:首次页面加载会进行一次判断,延缓页面首次加载...

  • 惰性加载函数

    1.常规 缺点:每次调用都会执行条件判断,可避免 2.改进,只在加载时做判断 缺点:虽避免了判断,但如果从未使用过...

  • 惰性加载函数

    处理 IE 兼容性问题时,一般会进行一些嗅探操作,如何更好的解决这个问题呢? 例如下面自定义绑定事件函数: 标准写...

  • JavaScript惰性函数

    惰性函数 定义: 惰性函数,函数内部有许多判断来来检测函数,这样多次调用会浪费时间和浏览器资源,所有当第一次判断完...

  • JavaScript惰性函数

    背景 在开发过程中,有时候需要对浏览器环境进行检测,比如封装一个AJAX函数的时候需要写一个函数进行检测,但是常规...

网友评论

      本文标题:javascript的装逼优化技巧之惰性加载函数

      本文链接:https://www.haomeiwen.com/subject/drbirhtx.html