通过循环优化 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 相关文章推荐
javascript 读取图片文件的大小
Jun 25 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
javascript常用的设计模式
Feb 09 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
jQuery 使用个人心得
2009/02/26 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
python实用代码片段收集贴
2015/06/03 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
表决心的诗句大全
2014/03/11 职场文书
平安建设实施方案
2014/03/19 职场文书
审计专业自荐信范文
2014/04/21 职场文书
希特勒的演讲稿
2014/05/23 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
Python保存并浏览用户的历史记录
2022/04/29 Python