通过循环优化 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的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
Vue动态组件和异步组件原理详解
May 06 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP自定义错误用法示例
2016/09/28 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
js中cookie的使用详细分析
2008/05/28 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
python装饰器使用方法实例
2013/11/21 Python
python比较两个列表大小的方法
2015/07/11 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
四风查摆问题及整改措施
2014/10/10 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
搬迁通知
2015/04/20 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
Django程序的优化技巧
2021/04/29 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python