通过循环优化 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 相关文章推荐
Knockoutjs的环境搭建教程
Nov 26 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
webpack4的迁移的使用方法
May 25 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 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操作xml入门之xml标签的属性分析
2015/01/23 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
用JS实现简单的登录验证功能
2017/07/28 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
vue实现循环切换动画
2018/10/17 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
简单谈谈Python中的反转字符串问题
2016/10/24 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
django允许外部访问的实例讲解
2018/05/14 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
对Django外键关系的描述
2019/07/26 Python
Django 限制访问频率的思路详解
2019/12/24 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
英文版银行求职信
2013/10/09 职场文书
疾病捐款倡议书
2014/05/13 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
Python基础之元类详解
2021/04/29 Python
Spring实现内置监听器
2021/07/09 Java/Android
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技