通过循环优化 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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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插件 HTMLPurifier HTML解析器
2013/07/01 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
jquery实现动态添加附件功能
2018/10/23 jQuery
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
跟老齐学Python之模块的加载
2014/10/24 Python
python并发编程之线程实例解析
2017/12/27 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
python 深度学习中的4种激活函数
2020/09/18 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
中专毕业生自我鉴定范文
2013/11/09 职场文书
大学毕业感言200字
2014/03/09 职场文书
政治思想表现评语
2014/05/04 职场文书
红白喜事主持词
2015/07/06 职场文书
新学期感想
2015/08/10 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书