专栏首页京程一灯回到基础:优化 JavaScript 的循环[每日前端夜话0x52]

回到基础:优化 JavaScript 的循环[每日前端夜话0x52]

每日前端夜话0x52

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:1338 字

预计阅读时间: 5 分钟


翻译:疯狂的技术宅 原文:https://medium.freecodecamp.org/how-to-optimize-your-javascript-apps-using-loops-d5eade9ba89f

Photo by Zachary Young on Unsplash

对于提高 JavaScript 程序的性能这个问题,最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句。本文将会帮你解决这个问题。

我们将看到 JavaScript 中主要的循环类型,以及如何针对它们进行高效编码。

现在开始!

循环性能

谈到循环性能,争论的焦点始终会集中到关于应该使用哪种循环,哪个是速度最快、性能最好的?事实上,在 JavaScript 提供的四种循环类型中,只有一种比其他循环慢得多 ——  for-in 循环。 对循环类型的选择应基于你的需求而不是性能问题

有两个主要因素有助于改善循环性能 —— 每次迭代完成的工作迭代次数

在下面的内容中,我们将会看到通过对这两点的优化,可以对循环的整体性能产生积极的影响。

For 循环

在 ECMA-262(定义JavaScript的基本语法和行为的规范)第三版中,定义了四种循环类型。第一个是标准的 for 循环,它与其他类 C 语言的语法相同:

1for (var i = 0; i < 10; i++){
2    //循环体
3}

这可能是最常用的 JavaScript 循环结构。要了解应该怎样对其进行优化,需要先进行一些分析。

解析

for 循环由四部分组成:初始化,预测试条件,循环体和后执行。它的工作方式如下:首先,执行初始化代码(var i = 0;)。然后是预测试条件(i <10;)。如果预测试条件的计算结果为 true,则执行循环体。之后运行后执行代码(i ++)。

优化

要优化循环中的工作量,第一步是最小化对象成员和数组项查找的数量。

还可以通过反转顺序来提高循环的性能。在 JavaScript 中,反转循环对循环的性能提升不大,除非你消除了额外的操作。

 1// 原始循环
 2for (var i = 0; i < items.length; i++){
 3    process(items[i]);
 4}
 5// 最小化属性查找
 6for (var i = 0, len = items.length; i < len; i++){
 7    process(items[i]);
 8}
 9// 最小化属性查找并反序
10for (var i = items.length; i--; ){
11    process(items[i]);
12}

While 循环

第二种是 while 循环。下面是一个简单的预测试循环,由预测试条件和循环体组成。

1var i = 0;
2while(i < 10){
3    //循环体
4    i++;
5}

解析

如果预测试条件的计算结果为 true,则执行循环体。如果不是 —— 它就会被跳过。每个 while 循环都可以用 for 替换,反之亦然。

优化

 1// 原始循环
 2var j = 0;
 3while (j < items.length){
 4    process(items[j++]);
 5}
 6// 最小化属性查找
 7var j = 0,
 8    count = items.length;
 9while (j < count){
10    process(items[j++]);
11}
12// 最小化属性查找和反序
13var j = items.length;
14while (j--){
15    process(items[j]);
16}

Do-While 循环

do-while 是第三种循环,它是 JavaScript 中唯一的后测试循环。由循环体和后测试条件组成:

1var i = 0;
2do {
3    //循环体
4} while (i++ < 10);
5

解析

在这种类型的循环中,循环体总是至少执行一次。然后评估测试后的条件,如果它是true,则执行另一个循环周期。

优化

 1// 原始循环
 2var k = 0;
 3do {
 4    process(items[k++]);
 5} while (k < items.length);
 6// 最小化属性查找
 7var k = 0,
 8    num = items.length;
 9do {
10    process(items[k++]);
11} while (k < num);
12// 最小化属性查找和反序
13var k = items.length - 1;
14do {
15    process(items[k]);
16} while (k--);

For-In 循环

最后一种是 for-in 循环。它有一个非常特殊的用途 —— 枚举 JavaScript 对象的命名属性。 它的语法如下:

1for (var prop in object){
2    //loop body
3}

解析

它的名称与 for 循环类似。但是工作方式完全不同。而这种差异使它比另外三种循环慢得多,后者具有相同的性能特征,所以争论哪个循环最快是没有用的。

每次循环执行时,变量 prop 会得到 object 的一个属性。它将会不断执行,直到返回所有属性为止。这些是对象自身的以及通过其原型链继承的属性。

注意事项

永远不要用“ for-in ”来迭代数组成员

这种循环的每次迭代都会在实例或原型上进行属性查找,这使得 for-in 循环比其它循环要慢得多。对于相同次数的迭代,可能会比其它循环慢七倍。

结论

  • forwhiledo-while 循环都有类似的性能特征,因此没有哪种类型比其他的更快或更慢。
  • 避免使用 for-in 循环,除非你需要对大量未知对象属性进行迭代。
  • 提高循环性能的最佳方法是减少每次迭代完成的工作量并减少循环迭代次数

? 希望这对你有用,感谢阅读! ?

资源

《高性能 JavaScript》(https://www.amazon.com/High-Performance-JavaScript-Application-Interfaces/dp/059680279X)- Nicholas C. Zakas

求分享

如果你觉得这篇文章对你有帮助,请点击右下角的 “?好看” 并分享给小伙伴们↘️↘️↘️??

下面夹杂一些私货:也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。

愿你有个好前程,愿你月薪30K。我们是认真的 !

在公众号内回复“体系”查看高清大图

本文分享自微信公众号 - 前端先锋(jingchengyideng),作者:前端先锋

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用 MelonJS 开发一个游戏[每日前端夜话0xD9]

    游戏开发并不需要局限于使用 Unity 或 Unreal Engine4 的用户。JavaScript 游戏开发已经有一段时间了。实际上,最流行的浏览器(例如C...

    疯狂的技术宅
  • JavaScript 原型中的哲学思想

    记得当年初试前端的时候,学习JavaScript过程中,原型问题一直让我疑惑许久,那时候捧着那本著名的红皮书,看到有关原型的讲解时,总是心存疑虑。

    疯狂的技术宅
  • 技术分享:用Node抓站(一)

    如果只写怎么抓取网页,肯定会被吐槽太水,满足不了读者的逼格要求,所以本文会通过不断的审视代码,做到令自己满意(撸码也要不断迸发新想法!

    疯狂的技术宅
  • 4.2 for循环

    作用:for循环,不仅可以用于循环次数已经确定的情况,还可以用于循环次数不确定而只给出循环结束条件的情况

    C语言入门到精通
  • 循环和代码规范

    断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,

    星辰_大海
  • 程序员进阶之路 -- 算法刷题必备神器

    不少程序员提起算法可能都心惊胆战,但是又逃不过真香定理,因为会算法的程序员真的惹不起,先不说会算法的要比不会算法的薪资多好多,单是哪个思维逻辑能力就能甩开好大一...

    周三不加班
  • 用小程序发的群公告被刷走了,还能找回来吗?| 小程序问答 #56

    如果用过「群里有事」、「群空间助手」这类针对群聊天的小程序,没准会遇到一个问题:在群聊里分享一张小程序卡片,很容易被群里其他人的聊天刷走。想要在聊天里找回这张卡...

    知晓君
  • PE 病毒与 msf 奇遇记

    通俗的讲,PE 病毒就是感染 PE 文件的病毒,通过修改可执行文件的代码中程序入口地址,变为恶意代码的的入口,导致程序运行时执行恶意代码。

    信安之路
  • ASM 翻译系列第二十八弹:ASM INTERNAL Partnership and Status Table

    原作者:Bane Radulovic 译者: 邱大龙 审核: 魏兴华 DBGeeK社群联合出品 Partnership and Status Tab...

    沃趣科技
  • 英特尔处理器又曝重大安全漏洞,微软、苹果等受连累 | 热点

    镁客网

扫码关注云+社区

领取腾讯云代金券