前言

  在《高性能JavaScript》一书的第四章算法和流程控制中,提到了减少迭代次数加速程序的策略—达夫设备(Duff's device)。达夫设备本身很好理解,但是其效果是否真的像书中所说“如果迭代次数超过1000,那么达夫设备的执行效率将明显提升”?还是随着浏览器性能的逐渐增强,这种以牺牲代码阅读性而获取的性能提升已经微不足道?

达夫设备

  达夫设备真的很简单,说白了就是“循环体展开”。看如下的代码:

var a = [0, 1, 2, 3, 4];
var sum = 0;
for(var i = 0; i < 5; i++)
  sum += a[i];
console.log(sum);

  我们将循环体展开来写:

var a = [0, 1, 2, 3, 4];
var sum = 0;
sum += a[0];
sum += a[1];
sum += a[2];
sum += a[3];
sum += a[4];
console.log(sum);

  因为少作了多次的for循环,很显然这段代码比前者效率略高,而且随着数组长度的增加,少作的for循环将在时间上体现更多的优势。

  达夫设备这种思想或者说是策略,原来是运用在C语言上的,Jeff Greenberg将它从C语言移植到了JavaScript上,我们可以来看看他写的模板代码:

var iterations = Math.floor(items.length / 8),
  startAt = items.length % 8,
  i = 0;

  do {
    switch(startAt) {
      case 0: process(items[i++]);
      case 7: process(items[i++]);
      case 6: process(items[i++]);
      case 5: process(items[i++]);
      case 4: process(items[i++]);
      case 3: process(items[i++]);
      case 2: process(items[i++]);
      case 1: process(items[i++]);
    }
    startAt = 0;
  } while(--iterations);

  注意看switch/case语句,因为没有写break,所以除了第一次外,之后的每次迭代实际上会运行8次!Duff's Device背后的基本理念是:每次循环中最多可调用8次process()。循环的迭代次数为总数除以8。由于不是所有数字都能被8整除,变量startAt用来存放余数,便是第一次循环中应调用多少次process()。

  此算法一个稍快的版本取消了switch语句,将余数处理和主循环分开:

var i = items.length % 8;
while(i) {
  process(items[i--]);
}

i = Math.floor(items.length / 8);

while(i) {
  process(items[i--]);
  process(items[i--]);
  process(items[i--]);
  process(items[i--]);
  process(items[i--]);
  process(items[i--]);
  process(items[i--]);
  process(items[i--]);
}

  尽管这种方式用两次循环代替了之前的一次循环,但它移除了循环体中的switch语句,速度比原始循环更快。

性能测试

  接着我们来进行达夫设备的性能测试。如果迭代中的操作复杂的话,会减小达夫设备优化对于时间的影响,所以循环内部我只选取了简单的操作;而且为了方便操作,选取了8的倍数作为数组长度。

var a = [];
var times = 1000;
// init array
for(var i = 1; i <= times; i++)
  a[i] = i;

// ordinary way
console.time('1');
var sum = 0;
for(var i = 1; i <= times; i++)
  sum += 1 / a[i];
console.log(sum);
console.timeEnd('1');

// Duff's device
console.time('2');
var sum = 0;
while(times) {
  sum += 1 / a[times--];
  sum += 1 / a[times--];
  sum += 1 / a[times--];
  sum += 1 / a[times--];
  sum += 1 / a[times--];
  sum += 1 / a[times--];
  sum += 1 / a[times--];
  sum += 1 / a[times--];
}
console.log(sum);
console.timeEnd('2');

  当times取值较小时,得到了这样的结果(chrome 版本 43.0.2357.134 m):

  此时心中一万头草泥马奔腾而过,默默问自己为什么会出现这样有悖常理的结果。直到times取值越来越大:

  而在firefox(39.0)下则出现了更诡异的一幕,似乎达夫设备对其不起任何效果:

  那么达夫设备真的达不到想象当中的优化程度了吗?为了验证自己的猜想,同时在网上找到了一个外国朋友写的测试代码JavaScript Loop Optimization,大多数的测试结果还是和预料一致,但是也能捕获到这样的截图:

总结

  经过测试,我觉得在迭代次数少的情况下,完全没有必要用达夫设备进行优化,且不说代码可读性差,有时甚至会适得其反,而多大的迭代次数算多,多大算少,也不好说,特定的浏览器特定的版本都有其一定的取值。老版本的浏览器运用达夫设备优化性能能得到大幅度的提升,而新版的浏览器引擎肯定对循环迭代语句进行了更强的优化,所以达夫设备能实现的优化效果日趋减弱甚至于没有。而在查阅资料的过程中,有人提出while循环的效果和达夫设备不相上下,接下去也会针对不同的循环方式作进一步的探索。

高性能JavaScript 达夫设备的更多相关文章

  1. 高性能JavaScript 循环语句和流程控制

    前言 上一篇探讨了达夫设备对于代码性能的影响,本文主要探讨并且测试各种常见的循环语句的性能以及流程控制中常见的优化. 循环语句 众所周知,常用的循环语句有for.while.do-while以及for ...

  2. 达夫设备之js

    最近阅读<高性能JavaScript>时,在书中的“达夫设备“ . 对此,有些感悟,同时有些疑问,希望看到的朋友,能帮忙解释下,在此先提前感谢了. 1. 先说自己的理解吧: ”达夫设备“的 ...

  3. 第二篇,前端高性能JavaScript优化

    加载和执行 JavaScript是单线程,所以JavaScript的加载和执行是从上下文加载执行完一个继续加载执行下一个文件会阻塞页面资源的加载,所以一般情况下JavaScript文件放在body标签 ...

  4. 【前端性能优化】高性能JavaScript整理总结

    高性能JavaScript整理总结 关于前端性能优化:首先想到的是雅虎军规34条然后最近看了<高性能JavaScript>大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅 ...

  5. 高性能JavaScript笔记二(算法和流程控制、快速响应用户界面、Ajax)

    循环 在javaScript中的四种循环中(for.for-in.while.do-while),只有for-in循环比其它几种明显要慢,另外三种速度区别不大 有一点需要注意的是,javascript ...

  6. 《高性能Javascript》读书笔记-4

    第四章 算法和流程控制 代码组织结构和解决具体问题的思路是影响代码性能的主要因素 循环处理是最常见的编程模式之一,也是提高性能的关注点之一 循环分四种:标准for循环 ; i < Things. ...

  7. 高性能javascript笔记

    ----------------------------------------------------------- 第一章 加载和执行 ------------------------------ ...

  8. 高性能JavaScript(算法和流程控制)

    在大多与编程语言中,代码的执行时间大部分消耗在循环中,是提升性能必须关注的要点之一 循环的类型 for循环(它由四部分组成:初始化.前测条件.后执行体.循环体.) for(var i = 0; i & ...

  9. 读书笔记(高性能javascript)(一)

    1.加载与执行: (1)将脚本放在底部:(否则会阻塞) (2)由于每个<script>标签初始下载时都会阻塞页面渲染,所以减少页面包含的<script>标签数量有助于改善这一情 ...

随机推荐

  1. HTTP状态码206和416

    HTTP 2xx范围内的状态码表明了:"客户端发送的请求已经被服务器接受并且被成功处理了". TTP/1.1 200 OK是HTTP请求成功后的标准响应 HTTP/1.1 206状 ...

  2. 烂泥:高负载均衡学习haproxy之关键词介绍

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 上一篇文章我们简单讲解了有关haproxy的安装与搭建,在这篇文章我们把haproxy配置文件中使用到的关键词一一介绍下. 关注我微信ilann ...

  3. android PopupWindow使用实例

    注:点空白或菜单外隐藏popupwindow菜单: 但是,若点击有点击事件的组件则要再写代码手动隐藏: @Override public boolean onTouchEvent(MotionEven ...

  4. node.js表单——formidable

    node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装package的路径分为两种,一种是本地目录,一种是全局 ...

  5. Linux命令整理中...

    Linux命令整理中... 最常用命令(我最近最常用的一般放在前面tipsbychsry) clear 清屏 date 显示日期 cal 显示日历 cal 2014 显示2014年的日历 shutdo ...

  6. Nagios check_logfiles插件的使用记录

    1 获取与安装 https://labs.consol.de/assets/downloads/nagios/check_logfiles-3.7.4.tar.gz 链接可能会失效,建议去官网下载. ...

  7. [转]关于信息安全认证CISP与CISSP的对比及分析

    本文转自:https://www.douban.com/group/topic/89081816/ 最近好多信息安全行业或者打算转行的职场人在纠结学CISP还是学CISSP,我给大家就CISP和CIS ...

  8. [麦先生]TP3.2之微信开发那点事[基础篇](微信支付完成)

    两种模式:扫码支付和微信内支付(调用js-sdk) trade_type==native即扫码支付,只需要将code_url转成二维码,使用微信扫码即可: js-sdk微信内支付-调用微信js-sdk ...

  9. Qt基础之开发环境部署

    将 Qt 5.6 集成至 VS2015 摘要: 由于VS2015不再支持addin,所以要用其他手段. 这里给出64位系统下的安装步骤,32位类似. 一.安装VS2015 过程略.值得注意的是要选择需 ...

  10. NOIP2003pj数字游戏[环形DP]

    题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前有一圈整数(一共n个),你要按顺序将其分 ...