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

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. Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象

    <template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...

  2. pytorch torch.nn.functional实现插值和上采样

    interpolate torch.nn.functional.interpolate(input, size=None, scale_factor=None, mode='nearest', ali ...

  3. OMPL RRTConnet 生成路径和可视化

    默认规划路径算法和RRTConnet路径规划算法生成路径 1.  源代码 #include <ompl/base/SpaceInformation.h> #include <ompl ...

  4. WPF 插件开发(.NET Framework 3.5 System.Addin)

    http://www.cnblogs.com/lc329857895/archive/2009/07/22/1528640.html http://www.cnblogs.com/huihui0630 ...

  5. 123457123456#0#-----com.tym.myNewShiZi45--前拼后广--识字tym

    com.tym.myNewShiZi45--前拼后广--识字tym

  6. 给APK签名,修改签名

    简介: 本来是不需要签名的,但是我有个android的专用设备,限制安装,但是售后给我通过了一个证书的验证. 那么我想装什么软件,就需要这个证书验证. 现在记录一下签名的主要过程,还有修改签名的方法. ...

  7. 【计算机视觉】OpenCV篇(9) - 轮廓(寻找/绘制轮廓)

    什么是轮廓? 轮廓是一系列相连的点组成的曲线,代表了物体的基本外形. 轮廓与边缘好像挺像的? 是的,确实挺像,那么区别是什么呢?简而言之,轮廓是连续的,而边缘并不全都连续(见下图示例).其实边缘主要是 ...

  8. 解决no module named setuptools

    To install setuptools on Debian: sudo apt-get install python-setuptools For Python 3.x: sudo apt-get ...

  9. C#语法中的select

    第一次学着用Linq的盆友们,可以看看哈.... 代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://w ...

  10. [LintCode] 619 Binary Tree Longest Consecutive Sequence III 二叉树最长连续序列 III

    Given a k-ary tree, find the length of the longest consecutive sequence path. The path could be star ...