巧用局部变量提升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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
vue实现登录功能
Dec 31 Vue.js
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
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
js异或加解密效果代码
2008/06/25 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
js分页代码分享
2014/04/28 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
Python yield 小结和实例
2014/04/25 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
python实现网页录音效果
2020/10/26 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
协会周年庆活动方案
2014/08/26 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
信息技术国培研修日志
2015/11/13 职场文书
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python