利用函数的惰性载入提高javascript代码执行效率


Posted in Javascript onMay 05, 2014

在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题。 例如,我们最常见的为 dom 节点添加事件的函数:

function addEvent (type, element, fun) { 
if (element.addEventListener) { 
element.addEventListener(type, fun, false); 
} 
else if(element.attachEvent){ 
element.attachEvent('on' + type, fun); 
} 
else{ 
element['on' + type] = fun; 
} 
}

每次调用 addEvent 函数的时候,它都要对浏览器所支持的能力进行检查,首先检查是否支持addEventListener 方法,如果不支持,再检查是否支持 attachEvent 方法,如果还不支持,就用 dom 0 级的方法添加事件。 这个过程,在 addEvent 函数每次调用的时候都要走一遍,其实,如果浏览器支持其中的一种方法,那么他就会一直支持了,就没有必要再进行其他分支的检测了, 也就是说,if 语句不必每次都执行,代码可以运行的更快一些。

解决的方案就是称之为惰性载入的技巧。

所谓惰性载入,就是说函数的if分支只会执行一次,之后调用函数时,直接进入所支持的分支代码。 有两种实现惰性载入的方式,第一种事函数在第一次调用时,对函数本身进行二次处理,该函数会被覆盖为符合分支条件的函数,这样对原函数的调用就不用再经过执行的分支了, 我们可以用下面的方式使用惰性载入重写 addEvent()。

function addEvent (type, element, fun) { 
if (element.addEventListener) { 
addEvent = function (type, element, fun) { 
element.addEventListener(type, fun, false); 
} 
} 
else if(element.attachEvent){ 
addEvent = function (type, element, fun) { 
element.attachEvent('on' + type, fun); 
} 
} 
else{ 
addEvent = function (type, element, fun) { 
element['on' + type] = fun; 
} 
} 
return addEvent(type, element, fun); 
}

在这个惰性载入的 addEvent() 中,if 语句的每个分支都会为 addEvent 变量赋值,有效覆盖了原函数。 最后一步便是调用了新赋函数。下一次调用 addEvent() 的时候,便会直接调用新赋值的函数,这样就不用再执行if 语句了。

第二种实现惰性载入的方式是在声明函数时就指定适当的函数。 这样在第一次调用函数时就不会损失性能了,只在代码加载时会损失一点性能。 一下就是按照这一思路重写的 addEvent()。

var addEvent = (function () { 
if (document.addEventListener) { 
return function (type, element, fun) { 
element.addEventListener(type, fun, false); 
} 
} 
else if (document.attachEvent) { 
return function (type, element, fun) { 
element.attachEvent('on' + type, fun); 
} 
} 
else { 
return function (type, element, fun) { 
element['on' + type] = fun; 
} 
} 
})();

这个例子中使用的技巧是创建一个匿名的自执行函数,通过不同的分支以确定应该使用那个函数实现,实际的逻辑都一样, 不一样的地方就是使用了函数表达式(使用了 var 定义函数)和新增了一个匿名函数,另外每个分支都返回一个正确的函数,并立即将其赋值给变量 addEvent。

惰性载入函数的优点只执行一次 if 分支,避免了函数每次执行时候都要执行 if 分支和不必要的代码,因此提升了代码性能,至于那种方式更合适,就要看您的需求而定了。

Javascript 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 #Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 #Javascript
javascript 获取元素样式必杀技
May 04 #Javascript
javascript操作excel生成报表全攻略
May 04 #Javascript
javascript如何使用bind指定接收者
May 04 #Javascript
用jquery.sortElements实现table排序
May 04 #Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 #Javascript
You might like
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
python的几种开发工具介绍
2007/03/07 Python
python端口扫描系统实现方法
2014/11/19 Python
Python的设计模式编程入门指南
2015/04/02 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
Python之修改图片像素值的方法
2019/07/03 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
汉语专业应届生求职信
2013/10/01 职场文书
公司节能减排倡议书
2014/05/14 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
中班教师个人总结
2015/02/05 职场文书
高中美术教学反思
2016/02/17 职场文书
高质量“欢迎词”
2019/04/03 职场文书