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

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. Dart自定义库、系统库和第三方库

    /* 前面介绍Dart基础知识的时候基本上都是在一个文件里面编写Dart代码的,但实际开发中不可能这么写,模块化很重要,所以这就需要使用到库的概念. 在Dart中,库的使用时通过import关键字引入 ...

  2. prometheus + influxdb + grafana + mysql

    前言 本文介绍使用influxdb 作为prometheus持久化存储和使用mysql 作为grafana 持久化存储的安装方法 一 安装go环境 如果自己有go环境可以自主编译remote_stor ...

  3. Flutter中的Container和Text组件的常用属性

    效果图: import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends St ...

  4. 算法习题---5-7打印队列(UVa12100)

    一:题目 有一个打印机,有一些任务在排着队打印,每个任务都有优先级.打印时,每次取出队列第一个任务,如果它的优先级不是当前队列中最高的,就会被放到队尾,否则就打印出来.输出初始队列的第m个任务的打印时 ...

  5. django.db.utils.OperationalError: (1251, 'Client does not support authentication protocol requested by server; consider upgrading MySQL client')

    1.打开MySQL: cmd里 net start mysql mysql -hlocalhost -uroot -p回车 进入mysql数据库 2. 命令如下: 1.use mysql; 2.alt ...

  6. Python - Django - FBV 和 CBV

    FBV: Function Base View,基于函数的视图 views.py: from django.shortcuts import render, HttpResponse # FBV de ...

  7. vue项目开发优化

    1 按需引入ui组件 比如elementUI,不要直接在main.js中全局引入所有的组件,可以根据elementui的说明文件,按需引入 项目中的组件 2 异步引入路由组件 使用 { path:'/ ...

  8. AI - TensorFlow - 示例05:保存和恢复模型

    保存和恢复模型(Save and restore models) 官网示例:https://www.tensorflow.org/tutorials/keras/save_and_restore_mo ...

  9. http响应时长分析

    curl -o /dev/null -s -w "time_namelookup:%{time_namelookup}::time_connect:%{time_connect}::time ...

  10. 用Python打开文件夹

    用Python读取文件夹, 然后打开文件 下面读取到文件的每一个内容, 然后加上路径 import os path = r'../Downloads/text/content' for filenam ...