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 相关文章推荐
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
用javascript实现倒计时效果
Feb 09 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动态创建Flash动画
2006/10/09 PHP
教你如何把一篇文章按要求分段
2006/10/09 PHP
服务器端解压缩zip的脚本
2006/12/22 PHP
实用函数9
2007/11/08 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python在Console下显示文本进度条的方法
2016/02/14 Python
使用Python进行目录的对比方法
2018/11/01 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python中os模块功能与用法详解
2020/02/26 Python
python实现拼接图片
2020/03/23 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
预备党员群众意见
2015/06/01 职场文书
安全生产协议书
2016/03/22 职场文书
JS实现九宫格拼图游戏
2022/06/28 Javascript