通过循环优化 JavaScript 程序


Posted in Javascript onJune 24, 2019

前言

对于提高 JavaScript 程序的性能这个问题,最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句。本文将会帮你解决这个问题。

我们将看到 JavaScript 中主要的循环类型,以及如何针对它们进行高效编码。

现在开始!

循环性能

谈到循环性能,争论的焦点始终会集中到关于应该使用哪种循环,哪个是速度最快、性能最好的?事实上,在 JavaScript 提供的四种循环类型中,只有一种比其他循环慢得多 ——  for-in 循环。 对循环类型的选择应基于你的需求而不是性能问题。

有两个主要因素有助于改善循环性能 —— 每次迭代完成的工作和迭代次数。

在下面的内容中,我们将会看到通过对这两点的优化,可以对循环的整体性能产生积极的影响。

For 循环

在 ECMA-262(定义JavaScript的基本语法和行为的规范)第三版中,定义了四种循环类型。第一个是标准的 for 循环,它与其他类 C 语言的语法相同:

for (var i = 0; i < 10; i++){
//循环体
}

这可能是最常用的 JavaScript 循环结构。要了解应该怎样对其进行优化,需要先进行一些分析。

解析

for 循环由四部分组成:初始化,预测试条件,循环体和后执行。它的工作方式如下:首先,执行初始化代码(var i = 0;)。然后是预测试条件(i <10;)。如果预测试条件的计算结果为 true,则执行循环体。之后运行后执行代码(i ++)。

优化

要优化循环中的工作量,第一步是最小化对象成员和数组项查找的数量。
还可以通过反转顺序来提高循环的性能。在 JavaScript 中,反转循环对循环的性能提升不大,除非你消除了额外的操作。

// 原始循环
for (var i = 0; i < items.length; i++){
process(items[i]);
}
// 最小化属性查找
for (var i = 0, len = items.length; i < len; i++){
process(items[i]);
}
// 最小化属性查找并反序
for (var i = items.length; i--; ){
process(items[i]);
}

While 循环

第二种是 while 循环。下面是一个简单的预测试循环,由预测试条件和循环体组成。

var i = 0;
while(i < 10){
//循环体
i++;
}

解析

如果预测试条件的计算结果为 true,则执行循环体。如果不是 —— 它就会被跳过。每个 while 循环都可以用 for 替换,反之亦然。

优化

// 原始循环
var j = 0;
while (j < items.length){
process(items[j++]);
}
// 最小化属性查找
var j = 0,
count = items.length;
while (j < count){
process(items[j++]);
}
// 最小化属性查找和反序
var j = items.length;
while (j--){
process(items[j]);
}

Do-While 循环

do-while 是第三种循环,它是 JavaScript 中唯一的后测试循环。由循环体和后测试条件组成:

var i = 0;
do {
//循环体
} while (i++ < 10);

解析

在这种类型的循环中,循环体总是至少执行一次。然后评估测试后的条件,如果它是true,则执行另一个循环周期。

优化

// 原始循环
var k = 0;
do {
process(items[k++]);
} while (k < items.length);
// 最小化属性查找
var k = 0,
num = items.length;
do {
process(items[k++]);
} while (k < num);
// 最小化属性查找和反序
var k = items.length - 1;
do {
process(items[k]);
} while (k--);

For-In 循环

最后一种是 for-in 循环。它有一个非常特殊的用途 —— 枚举 JavaScript 对象的命名属性。 它的语法如下:

for (var prop in object){
//loop body
}

解析

它的名称与 for 循环类似。但是工作方式完全不同。而这种差异使它比另外三种循环慢得多,后者具有相同的性能特征,所以争论哪个循环最快是没有用的。

每次循环执行时,变量 prop 会得到 object 的一个属性。它将会不断执行,直到返回所有属性为止。这些是对象自身的以及通过其原型链继承的属性。

注意事项

永远不要用“ for-in ”来迭代数组成员。

这种循环的每次迭代都会在实例或原型上进行属性查找,这使得 for-in 循环比其它循环要慢得多。对于相同次数的迭代,可能会比其它循环慢七倍。

结论

for , while 和 do-while 循环都有类似的性能特征,因此没有哪种类型比其他的更快或更慢。

避免使用 for-in 循环,除非你需要对大量未知对象属性进行迭代。

提高循环性能的最佳方法是减少每次迭代完成的工作量并减少循环迭代次数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 #Javascript
node中实现删除目录的几种方法
Jun 24 #Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 #Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 #Javascript
浅谈一个webpack构建速度优化误区
Jun 24 #Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 #Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 #Javascript
You might like
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
毕业生就业推荐信范文
2013/12/01 职场文书
大型活动策划方案
2014/01/12 职场文书
大学校务公开实施方案
2014/03/31 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
人事行政主管岗位职责
2015/04/09 职场文书