摘要：有两个主要因素有助于改善循环性能每次迭代完成的工作和迭代次数。第一个是标准的循环，它与其他类语言的语法相同循环体这可能是最常用的循环结构。解析循环由四部分组成初始化，预测试条件，循环体和后执行。它将会不断执行，直到返回所有属性为止。
翻译：疯狂的技术宅
https://medium.freecodecamp.o...
本文首发微信公众号：前端先锋
欢迎关注，每天都给你推送新鲜的前端技术文章
对于提高 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 循环，除非你需要对大量未知对象属性进行迭代。
提高循环性能的最佳方法是减少每次迭代完成的工作量并减少循环迭代次数。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103573.html
摘要：的目标是对高级程序中间表示的适当低级抽象，即代码旨在由编译器生成而不是由人来写。表示把源代码变成解释器可以运行的代码所花的时间表示基线编译器和优化编 WebAssembly 那些事儿 什么是 WebAssembly？ WebAssembly 是除 JavaScript 以外，另一种可以在网页中运行的编程语言，并且相比之下在某些功能和性能问题上更具优势，过去我们想在浏览器中运行代码来对网...
摘要：解释器的利弊解释器启动和执行的更快。正是因为这个原因，解释器看起来更加适合。这就是为什么最开始的浏览器都是用解释器的原因。可是当你运行同样的代码一次以上的时候，解释器的弊处就显现出来了。起初，监视器监视着所有通过解释器的代码。 作者：Lin Clark 编译：胡子大哈 翻译原文：http://huziketang.com/blog/posts/detail?postId=58c12f...
摘要：接下来该填表了生成行和单元格为了填充表格可以遵循同样的方法，但这次我们需要迭代数组中的每个对象。对于每个对象，我们可以使用生成单元格。 翻译：疯狂的技术宅原文：https://www.valentinog.com/bl... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章 怎样用原生 JavaScript 生成表格需？本文告诉你答案！...
摘要：解释器的利弊解释器启动和执行的更快。正是因为这个原因，解释器看起来更加适合。这就是为什么最开始的浏览器都是用解释器的原因。可是当你运行同样的代码一次以上的时候，解释器的弊处就显现出来了。起初，监视器监视着所有通过解释器的代码。 作者：Lin Clark 编译：胡子大哈 翻译原文：http://huziketang.com/blog/posts/detail?postId=58c12f...
摘要：解释器的利弊解释器启动和执行的更快。正是因为这个原因，解释器看起来更加适合。这就是为什么最开始的浏览器都是用解释器的原因。可是当你运行同样的代码一次以上的时候，解释器的弊处就显现出来了。起初，监视器监视着所有通过解释器的代码。 作者：Lin Clark 编译：胡子大哈 翻译原文：http://huziketang.com/blog/posts/detail?postId=58c12f...
阅读 1681·2019-08-30 15:54
阅读 3331·2019-08-26 17:15
阅读 3521·2019-08-26 13:49
阅读 2581·2019-08-26 13:38
阅读 2290·2019-08-26 12:08
阅读 3034·2019-08-26 10:41
阅读 1368·2019-08-26 10:24
阅读 3375·2019-08-23 18:35
