javascript - 为什么我的 typedArrays 在 Chrome 中的访问速度比 Firefox 慢一个数量级？

Question

我写了a basic Game of Life demo了解一些 ES6/typedArray特征。对于 600×600 的场(在我的 Macbook Air 上)，我在 Firefox Nightly 中每秒获得约 57 帧(根据 about:config > layers.acceleration.draw-fps)，这是完全可以接受的。然而，在 Chrome 中，我平均为 3.5fps(使用开发工具帧率计数器测量)。

通过一些调试(查看 repo 中的提交)，我将缓慢的代码缩小到为每个单元格构建多个事件邻居的部分。在 Firefox 中计算整个字段大约需要 18-19 毫秒(与接近 60fps 的性能一致)，但在 Chrome 中需要 175-185 毫秒。注释掉以下代码显然会破坏演示，但会均衡其余代码的性能(即，缓慢的部分不是 Canvas 渲染)。

liveNeighbours = liveNeighbours + field[index - width - 1]
  + field[index - width]
  + field[index - width + 1]
  + field[index - 1]
  + field[index + 1]
  + field[index + width - 1]
  + field[index + width]
  + field[index + width + 1];

为了让您看到问题，我已将代码放入 CodePen 中:http://codepen.io/anon/pen/aNdzPP

任何人都可以指出我做错了什么，或者 Chrome 使用这个 JS 只是病态地慢？如果是这样，我会提交错误，但我想确保我没有做傻事。

Answer 1

问题是越界访问。例如。对于 index == 0，您正在访问 field[-width-1]、field[-width] 等。 V8 没有针对越界访问进行优化，因为它们通常都是错误。这也是这里的情况:越界读取返回“undefined”，当添加到其他数字时它被强制为 NaN，因此对于字段边缘的任何字段，liveNeighbours 始终为 NaN，因此任何比较都不会返回 true，因此 fieldBuffer 在该索引处将始终保持为零。解决该问题的一种简单方法是将数组访问包装到辅助函数中:

function get(array, index) {
  if (index < 0 || index >= array.length) return 0;
  return array[index];
}

liveNeighbours = get(field, index - width - 1) + get(field, index - width) + ...