巧用局部变量提升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 TextArea的选中区域处理
Dec 28 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
vue实现轮播图帧率播放
Jan 26 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实现的MySQL数据浏览器
2007/03/11 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
javascript 实用的文字链提示框效果
2010/06/30 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
python实现大转盘抽奖效果
2019/01/22 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
Gap工厂店:Gap Factory
2017/11/02 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
会计出纳岗位职责
2015/03/31 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js
优化Mysql查询的示例
2022/04/26 MySQL