网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索

 
 
 
日一二三四五六
       
       
       
       
       
       

签到排名:今日本吧第个签到,

本吧因你更精彩,明天继续来努力!

本吧签到人数:0

一键签到
成为超级会员,使用一键签到
一键签到
本月漏签0次!
0
成为超级会员,赠送8张补签卡
如何使用?
点击日历上漏签日期,即可进行补签。
连续签到:天  累计签到:天
0
超级会员单次开通12个月以上,赠送连续签到卡3张
使用连续签到卡
06月03日漏签0天
javascript吧 关注:269,262贴子:906,462
  • 看贴

  • 图片

  • 吧主推荐

  • 游戏

  • 16回复贴,共1页
<<返回javascript吧
>0< 加载中...

利用函数的惰性载入提高javascript代码性能

  • 只看楼主
  • 收藏

  • 回复
  • hanan198501
  • for
    8
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
在JavaScript代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的if语句,以检查浏览器特性,解决不同浏览器的兼容问题。例如,我们最常见的为dom节点添加事件的函数:

每次调用addEvent函数的时候,它都要对浏览器所支持的能力进行检查,首先检查是否支持addEventListener方法,如果不支持,再检查是否支持attachEvent方法,如果还不支持,就用dom 0级的方法添加事件。这个过程,在addEvent函数每次调用的时候都要走一遍,其实,如果浏览器支持其中的一种方法,那么他就会一直支持了,就没有必要再进行其他分支的检测了,也就是说,if语句不必每次都执行,代码可以运行的更快一些。解决的方案就是称之为惰性载入的技巧。
所谓惰性载入,就是说函数的if分支只会执行一次,之后调用函数时,直接进入所支持的分支代码。有两种实现惰性载入的方式,第一种事函数在第一次调用时,对函数本身进行二次处理,该函数会被覆盖为符合分支条件的函数,这样对原函数的调用就不用再经过执行的分支了,我们可以用下面的方式使用惰性载入重写addEvent()。

在这个惰性载入的addEvent()中,if语句的每个分支都会为addEvent变量赋值,有效覆盖了原函数。最后一步便是调用了新赋函数。下一次调用addEvent()的时候,便会直接调用新赋值的函数,这样就不用再执行if语句了。
第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样在第一次调用函数时就不会损失性能了,只在代码加载时会损失一点性能。一下就是按照这一思路重写的addEvent()。

这个例子中使用的技巧是创建一个匿名的自执行函数,通过不同的分支以确定应该使用那个函数实现,实际的逻辑都一样,不一样的地方就是使用了函数表达式(使用了var定义函数)和新增了一个匿名函数,另外每个分支都返回一个正确的函数,并立即将其赋值给变量addEvent。
惰性载入函数的优点只执行一次if分支,避免了函数每次执行时候都要执行if分支和不必要的代码,因此提升了代码性能,至于那种方式更合适,就要看您的需求而定了。
原文地址:cssha.com/function-of-the-inertia-load


  • hzwzjwy
  • Boolean
    11
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
好帖必须顶。


2025-06-03 19:35:11
广告
  • 六月之冥
  • Error
    10
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
好帖必须顶,虽然我没看内容。。。。


  • 次碳酸钴
  • Number
    12
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
惰性= =。。氦氖氩氪氙吗。。。
其实要看是什么函数了,对DOM的操作我肯定不会这样封装。
JS本身的效率和DOM的操作效率比起来就相当于求极限丢掉常数项,完全可以忽略的。
除非是一些高密度的运算,否则做这个优化会得不偿失。
这个优化会提高程序的维护成本的。
参见:
http://www.web-tinker.com/article/20018.html


  • RW1237
  • true
    4
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
顶,必须的


  • 求知吖
  • Error
    10
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
这个可以有!我咋没想到呢,


  • DavidLeom
  • for
    8
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
好帖必须顶,虽然我没看懂。。。。


  • fengdayin
  • for
    8
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

惰性载入就是防止你的 检测函数在不停调用时,每次都执行检测。
一般当浏览器第一次检测的时候,就能根据浏览器的功能,判定这个浏览器是if检测系列中的一个特定范围了。
但是每次都check()函数的重复一大堆if语句,很影响性能,所以用函数覆盖和赋值的方法,第一次检测的时候,给检测函数赋值,下一次调用的时候,直接采用函数所赋的值,不再去查找if。
当然第一次会比较消耗性能。


2025-06-03 19:29:11
广告
  • codetyphon
  • trycatch
    9
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
这点运算对于js引擎来说无所谓了。毕竟时代不同了,内存足够用,这样的速度差异并不大。


登录百度账号

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频!
  • 贴吧页面意见反馈
  • 违规贴吧举报反馈通道
  • 贴吧违规信息处理公示
  • 16回复贴,共1页
<<返回javascript吧
分享到:
©2025 Baidu贴吧协议|隐私政策|吧主制度|意见反馈|网络谣言警示