巧用局部变量提升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是怎么继承的介绍
Jan 05 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
关于vue项目中搜索节流的实现代码
Sep 17 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
PHP5 安装方法
2006/10/09 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
详解JS函数防抖
2020/06/05 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
python正则分组的应用
2013/11/10 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
python实现用户名密码校验
2020/03/18 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
优秀团员个人的自我评价
2013/10/02 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
文秘人员工作职责
2014/01/31 职场文书
高考励志标语
2014/06/05 职场文书
汽车专业求职信
2014/06/05 职场文书
二人合伙经营协议书
2014/09/13 职场文书