JavaScript提高网站性能优化的建议(二)


Posted in Javascript onJuly 24, 2016

在javascript关于提高网站性能的几点建议(一)中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书《高性能网站建设进阶指南》之后,从JavaScript性能的角度进行总结概括,诸君共勉。

JavaScript性能是实现高性能Web应用程序的关键

——Steve Sounders

1 利用js作用域链

作用域链(scope chain)

当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为其创建一个作用域又称为执行上下文(Execution Context),在页面加载后会首先创建一个全局的作用域,然后每执行一个函数,会建立一个对应的作用域,从而形成了一条作用域链。每个作用域都有一条对应的作用域链,链头是全局作用域,链尾是当前函数作用域。

作用域链的作用是用于解析标识符,当函数被创建时(不是执行),会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中,当JavaScript需要查找变量X的时候(这个过程称为变量解析),它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性,如果没有找到就顺着作用域链继续查找,直到查找到链头,也就是全局作用域链,仍未找到该变量的话,就认为这段代码的作用域链上不存在x变量,并抛出一个引用错误(ReferenceError)的异常。

管理好作用域链的深度,是一种只要少量工作就能提高性能的简易方法,我们应避免因无意中增长了作用域链而导致执行速度变得缓慢。

使用局部变量(尽量缩短作用域链)

如果理解了作用域链的概念,那么我们应该清楚JavaScript引擎对变量的解析时间跟作用域链的深度有关,显而易见,局部变量由于处于链尾,存取速度是最快的,因此,一个好的经验是:任何非局部变量使用超过一次时,请使用局部变量将其存储下来,例如:

function changeDiv(){
document.getELementById('myDiv').className = 'changed';
document.getELementById('myDiv').style.height = 150;
}

这里myDiv这个dom元素被引用了两次,为了更快的引用,我们应该用一个局部变量将其存储下来,这样做的好处不仅缩短了作用域链,而且避免了DOM元素的重复查询:

function changeDiv(){
var myDivStyle = document.getElementById('myDiv').style;
myDiv.className = 300;
myDiv.style.height = 150;
}

避免使用with(不要增长作用域链)

一般在代码执行过程中,函数的作用域链是固定的,然而with可以临时增长函数的作用域链。with用于将对象属性作为局部变量来显示,使其便于访问,例如:

var user = {
name:'vicfeel',
age:'23'
};
function showUser(){
var local = 0;
with(user){
console.log("姓名" + name);
console.log("年龄" + age);
console.log(local);
}
}
showUser();

这个例子中,通过with在showUser作用域链的链尾中又增加了一个临时作用域,该作用域存储着user对象的所有属性,也就是增长了with这段代码的作用域链,在这段代码中,局部变量像local从链尾的第一个对象变成了第二个,自然减慢了标识符的存取。直到with语句结束,作用域链恢复增长。正因为with的这个缺陷,我们应尽量避免使用with关键字。

2 更合理的流控制

JavaScript与其它编程语言一样,拥有一些流控制语句(循环、条件等),在每个环节上使用恰当的语句能极大的提高脚本的运行速度。

快速条件判断

提到条件判断,首先要避免的一种使用方式:

if(value == 0){
return result0;
}
else if(value == 1){
return result1;
}
else if(value == 2){
return result2;
}
else if(value == 3){
return result3;
}
else if(value == 4){
return result4;
}
else if(value == 5){
return result5;
}
else if(value == 6){
return result6;
}
else{
return result7;
}

这种使用if进行条件判断的方式存在的主要问题是层次太深,当我要value = 7时,消耗时间要比value = 0长很多,大大损耗了性能,同时可读性很差。

一种更好的方式,利用switch进行判断。

swithc(value){
case 0:
return result0;
case 1:
return result1;
case 2:
return result2;
case 3:
return result3;
case 4:
return result4;
case 5:
return result5;
case 6:
return result6;
default:
return result7;
}

这样不仅提高了可读性,查询时间也要比if更快。但是如果只有一两个条件时,if是比switch更快的

在JavaScript中,条件查询还有另外一种方式,之前的例子是根据值返回不同的值,刚好可以利用数组实现hash表的映射查询。

//定义数组
var results = [result0,result1,result2,result3,result4,result5,result6,result7];
//查询结果
return results[value];

这种数组的方式,在查询范围很大时才更加有效,因为它不必检测上下边界,只需要填入索引值就可以查询了。它的局限性在于条件对应的是单一值,而不是一系列操作。因此要综合实际情况,选择合适的条件判断方式,发挥性能最大化。

快速循环

JavaScript中存在4种循环方式for循环、do-while循环、while循环和for-in循环。下面是一个很常用的循环使用方式:

var values = [1,2,3,4,5];
for(var i = 0;i < values.length;i++){
process(values[i]);
}

我们可以看到,这段代码最明显可以优化的地方在于values.length,每次循环i都要和values的长度进行比较,而查询属性要比局部变量更耗时,如果循环次数越大,这种耗时就越明显,因此可以这样优化:

var values = [1,2,3,4,5];
var length = values.length;//局部变量存储数组长度
for(var i = 0;i < length;i++){
process(values[i]);
}

这段代码还可以继续优化,将循环变量递减到0,而不是递加到总长度。

var values = [1,2,3,4,5];
var length = values.length;
for(var i = length;i--;){ //递减到0
process(values[i]);
}

这里将循环结束改造为与0比较,所以每个循环的速度更快了,根据循环的复杂度不同,这种简单改变可以比原来节约大概50%的时间。

Javascript 相关文章推荐
Javascript !!的作用
Dec 04 Javascript
jquery tools之tooltip
Jul 25 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 #Javascript
省市二级联动小案例讲解
Jul 24 #Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 #Javascript
js简单实现调整网页字体大小的方法
Jul 23 #Javascript
jquery实现ajax加载超时提示的方法
Jul 23 #Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 #Javascript
js的各种排序算法实现(总结)
Jul 23 #Javascript
You might like
两种php调用Java对象的方法
2006/10/09 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
理清apply(),call()的区别和关系
2011/08/14 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
python 自动批量打开网页的示例
2019/02/21 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
如何提高python 中for循环的效率
2020/04/15 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
HTML5样式控制示例代码
2013/11/27 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
老同学聚会感言
2014/02/23 职场文书
访谈节目策划方案
2014/05/15 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
身边的榜样活动方案
2014/08/20 职场文书
社团个人总结范文
2015/03/05 职场文书
详解nodejs内置模块
2021/05/06 NodeJs