通过循环优化 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 相关文章推荐
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
小程序实现搜索框功能
Mar 26 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
JS字符串和数组如何实现相互转化
Jul 02 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中Date获取时间不正确怎么办
2008/06/05 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
通过实例了解python property属性
2019/11/01 Python
如何基于Python创建目录文件夹
2019/12/31 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
python如何进入交互模式
2020/07/06 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
《埃及的金字塔》教学反思
2014/04/07 职场文书
关于读书的演讲稿
2014/05/07 职场文书
事业单位聘任报告
2015/03/02 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
婚宴父亲致辞
2015/07/27 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
python内置进制转换函数的操作
2021/06/02 Python