巧用局部变量提升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 相关文章推荐
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
Vue如何实现组件间通信
May 15 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,js双版本
2012/09/25 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python3遍历目录树实现方法
2015/05/22 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python 支付整合开发包的实现
2019/01/23 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
自我管理的活动方案
2014/08/25 职场文书
队列队形口号
2015/12/25 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Python制作一个随机抽奖小工具的实现
2021/07/07 Python