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 设计模式学习 Factory
Jul 29 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
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里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
jQuery 位置插件
2008/12/25 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
python生成随机mac地址的方法
2015/03/16 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
python接口自动化框架实战
2020/12/23 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
银行员工职业规划范文
2014/01/21 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
读书活动实施方案
2014/03/10 职场文书
机关办公室岗位职责
2014/04/16 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
植树节标语
2014/06/27 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
升学宴学生答谢词
2015/01/05 职场文书
支教个人总结
2015/03/04 职场文书
工作表现证明
2015/06/15 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
python之django路由和视图案例教程
2021/07/26 Python
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
Spring 使用注解开发
2022/05/20 Java/Android