巧用局部变量提升javascript性能


Posted in Javascript onFebruary 24, 2014

javascript中一个标识符所在的位置越深,它的读写速度也越慢。因此,函数中读写局部变量总是最快的,而读写全局变量通常是最慢的。一个好的经验法则是:如果某个跨作用域的值在函数中被引用一次以上,那么就把它存储到局部变量里。

例如:

<!-- 优化前 --> 
<script type="text/javascript"> 
function initUI () { 
var bd = document.body, 
links = document.getElementByTagName("a"), 
i=0, 
len=links.length; 
while(i < len){ 
update(links[i++]); 
} document.getElementById("go-btn").onclick = function(){ 
start(); 
} 
bd.className = "active"; 
} 
</script>

该函数引用了三次document,而document是个全局对象。搜索该变量的过程必须遍历整个作用域链接,直到最后在全局变量对象中找到。你可以通过以下方法减少对性能的影响:先将全局变量的引用存储在一个局部变量中,然后使用这个局部变量代替全局变量。

例如:

<!-- 优化后 --> 
<script type="text/javascript"> 
function initUI () { 
var doc=document, 
bd = doc.body, 
links = doc.getElementByTagName("a"), 
i=0, 
len=links.length; 
while(i < len){ 
update(links[i++]); 
} doc.getElementById("go-btn").onclick = function(){ 
start(); 
} 
bd.className = "active"; 
} 
</script>
Javascript 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
iView框架问题整理小结
Oct 16 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
Jquery Fade用法详解
Nov 06 jQuery
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
javascript中的原型链深入理解
Feb 24 #Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 #Javascript
动态加载js、css等文件跨iframe实现
Feb 24 #Javascript
js操纵dom生成下拉列表框的方法
Feb 24 #Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 #Javascript
JS取request值以及自动执行使用示例
Feb 24 #Javascript
减少访问DOM的次数提升javascript性能
Feb 24 #Javascript
You might like
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
js性能优化技巧
2015/11/29 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python多进程机制实例详解
2015/07/02 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
会计实习自我鉴定
2013/12/04 职场文书
三字经教学反思
2014/04/26 职场文书
我的长生果教学反思
2014/04/28 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
2014年优秀党员材料
2014/12/18 职场文书
护士医德考评自我评价
2015/03/03 职场文书
横空出世观后感
2015/06/09 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js