当要对一个大数组进行循环时,通常会通过局部变量缓存数组长度来提高性能,例:

for(var i=0,len=arr.len;i<len;i++){}

光是缓存数组长度或使用倒序遍历来减少判断外,另一个优化手段就是减少循环次数,减少循环次数使用的是duff's  device算法,算法原理如下:

通过将 values 数组中元素个数除以 8 来计算出循环需要进行多少次迭代。然后使用取整的上限函数确保结果是整数。如果完全根据除 8 来进行迭代,可能会有一些不能被处理到的元素,这个数量保存在 startAt 变量中。首次执行该循环时,会检查 StartAt 变量看有需要多少额外调用。例如,如果数组中有 10 个值,startAt 则等于 2,那么最开始的时候 processer()则只会被调用 2 次。在接下来的循环中,每次循环都会调用 8 次 process()。展开循环可以提升大数据集的处理速度。

以下是优化版的duff's算法

 const arr=Array.from({length:20},(value,key)=>key+1) //从1开始,生成length个元素
const len=arr.length,startAt=len%8,loopCount = Math.floor(len/8),i = 0
//不够8个的,独立循环
while(startAt--){
processer(arr[i++])
}
//8个一组,执行一次循环
while(loopCount--){
processer(arr[i++])
processer(arr[i++])
processer(arr[i++])
processer(arr[i++])
processer(arr[i++])
processer(arr[i++])
processer(arr[i++])
processer(arr[i++])
}
function processer(value){
console.log(value)
}

  

js展开循环的更多相关文章

  1. Node.js 事件循环(Event Loop)介绍

    Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...

  2. Node.js事件循环

    Node JS是单线程应用程序,但它通过事件和回调概念,支持并发. 由于Node JS每一个API是异步的,作为一个单独的线程,它使用异步函数调用,以保持并发性.Node JS使用观察者模式.Node ...

  3. JS基础——循环很重要

    介绍循环之前,首先要说一下同样很重要的if-else结构,switch-case结构 ①if-else结构 if(判断条件) { 条件为true时执行 } else{ 条件为false时执行 } ②i ...

  4. 【JS中循环嵌套常见的六大经典例题+六大图形题,你知道哪几个?】

    首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...

  5. js事件循环机制辨析

     对于新接触js语言的人来说,最令人困惑的大概就是事件循环机制了.最开始这也困惑了我好久,花了我几个月时间通过书本,打代码,查阅资料不停地渐进地理解他.接下来我想要和大家分享一下,虽然可能有些许错误的 ...

  6. js 各种循环遍历

    js 各种循环遍历(表格比较) 遍历方法 能否遍历数组 能否遍历对象 备注 for 能 不能 for in 能(有诸多缺点) 能 为遍历对象而设计的,不适用于遍历数组 forEach 能 不能 bre ...

  7. 6、Node.js 事件循环

    #########################################################################################Node.js 事件循 ...

  8. js for循环的陷阱

    ☞问题概述 一页面有三个按钮,点击提示相应内容.相应内容已从后台获取,并转化成json数组. var content = ["提示1", "提示2", &quo ...

  9. Vue.js:循环语句

    ylbtech-Vue.js:循环语句 1.返回顶部 1. 循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 ...

随机推荐

  1. flutter drawer 自定义图标 icon 手动打开drawer

    方法1:GlobalKey import "package:flutter/material.dart"; class Test extends StatefulWidget { ...

  2. 六、postman做ui测试

    一.思路 发请求去拿到网站的响应——>html 解析html标签,判断一些元素是否显示 二.目的 快速检查ui是否正确 三.用到的库 Cheerio https://cheerios.js.or ...

  3. ubuntu2 setting

    luo@luo-ThinkPad-W540:research$ conda create -n tf2019 python=3.6Solving environment: done ==> WA ...

  4. 【源码解析】Flink 是如何基于事件时间生成Timestamp和Watermark

    生成Timestamp和Watermark 的三个重载方法介绍可参见上一篇博客: Flink assignAscendingTimestamps 生成水印的三个重载方法 之前想研究下Flink是怎么处 ...

  5. LeetCode_350. Intersection of Two Arrays II

    350. Intersection of Two Arrays II Easy Given two arrays, write a function to compute their intersec ...

  6. LeetCode_231. Power of Two

    231. Power of Two Easy Given an integer, write a function to determine if it is a power of two. Exam ...

  7. Vue学习笔记十一:按键修饰符和自定义指令(钩子函数)

    目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...

  8. jenkins编译时文件存放的位置

    1.首先随便打包编译一下 2.查看编译执行的目录 [root@bogon ~]# ls /root/.jenkins/workspace/pipline-test/ CHANGE_LOGS.html ...

  9. 修改ecshop的70种技巧

    1.如何修改网站”欢迎惠临本店”答复(dafu):languages\zh_cn\common.php文件中,$_LANG['welcome']=’欢迎惠临本店’:将他修改成你需要的字样. 2.如何修 ...

  10. nodejs应用转换png,jpg,gif为webp图片格式

    本博客列表缩略图在支持webp格式的浏览器下,使用的是webp格式图片,不支持webp图片下使用的是原图片(如png,gif,jpg等) webp使用指南,请参考 https://www.imqian ...