通过循环优化 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 相关文章推荐
JS创建类和对象的两种不同方式
Aug 08 Javascript
理解javascript回调函数
Dec 28 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
js实现三角形粒子运动
Sep 22 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
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP新手入门学习方法
2011/05/08 PHP
php随机输出名人名言的代码
2012/10/07 PHP
PHP中文乱码解决方案
2015/03/05 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
物业管理员岗位职责范文
2013/11/25 职场文书
销售找工作求职信
2013/12/20 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
高中数学教学反思
2014/01/30 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
文明单位汇报材料
2014/12/24 职场文书
部门2015年度工作总结
2015/04/29 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL