javascript - 将重复序列复制到 TypedArray 中的更有效方法？

Question

我有一个源 Float32Array，我从中创建了一个辅助 Float32Array。我有一个值序列 model，我想将其作为重复序列复制到辅助 Float32Array 中。我目前正在使用反向 while 循环执行此操作。

sequence = [1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 1, 0];
n = 3179520; //divisible by sequence length
modelBuffs = new Float32Array(n);

var v = modelBuffs.length;

while(v-=12){
  modelBuffs[v-12] = sequence[0];
  modelBuffs[v-11] = sequence[1];
  modelBuffs[v-10] = sequence[2];
  modelBuffs[v-9] = sequence[3];

  // YTransform
  modelBuffs[v-8] = sequence[4];
  modelBuffs[v-7] = sequence[5];
  modelBuffs[v-6] = sequence[6];
  modelBuffs[v-5] = sequence[7];

  // ZTransform
  modelBuffs[v-4] = sequence[8];
  modelBuffs[v-3] = sequence[9];
  modelBuffs[v-2] = sequence[10];
  modelBuffs[v-1] = sequence[11];
}

不幸的是，n 可能是未知的。如果没有替代解决方案，我可能不得不进行重大重构。我希望我可以设置一次序列，然后有一个副本/重复填充/按位操作来重复初始字节序列。

编辑简化了示例输入

Answer 1

用重复序列填充数组的快速方法是使用 copyWithin() 将每次迭代的缓冲区长度加倍类型化数组的方法。你可以使用 set()以及为相同的底层 ArrayBuffer 创建不同的 View ，但为此目的使用前者更简单。

使用例如 1234 作为源，第一个初始迭代填充将是 1:1，或者在这种情况下是 4 个索引:

1234

从那里我们将使用目标缓冲区作为剩余填充的源，因此第二次迭代填充 8 个索引:

12341234

第三次迭代填充 16 个索引:

1234123412341234

第四次迭代填充 32 个索引:

12341234123412341234123412341234

等等。

如果最后一段长度与 2 的幂不匹配，您可以简单地在最后填充和缓冲区中剩余的长度之间进行比较，并将其用于最后一次迭代。

var 
  srcBuffer = new Uint8Array([1,2,3,4]), // any view type will do
  dstBuffer = new Uint8Array(1<<14),     // 16 kb
  len = dstBuffer.length,   // important: use indices length, not byte-length
  sLen = srcBuffer.length,
  p = sLen;                 // set initial position = source sequence length

var startTime = performance.now();

// step 1: copy source sequence to the beginning of dest. array
// todo: dest. buffer might be smaller than source. Check for this here.
dstBuffer.set(srcBuffer);

// step 2: copy existing data doubling segment length per iteration
while(p < len) {
  if (p + sLen > len) sLen = len - p;  // if not power of 2, truncate last segment
  dstBuffer.copyWithin(p, 0, sLen);    // internal copy
  p += sLen;                           // add current length to offset
  sLen <<= 1;                          // double length for next segment
}

var time = performance.now() - startTime;
console.log("done", time + "ms");
console.log(dstBuffer);

如果数组很长，无论如何都需要一些时间。在这些情况下，您可以考虑使用 Web Worker与新 SharedArrayBuffer这样您就可以在不同的过程中进行复制，而不必来回复制或传输数据。这样做的好处仅仅是主线程不会被阻塞，处理缓冲区的开销很小，因为 copyWithin() 的内部结构已经相对最佳。缺点是异步方面与事件系统的开销相结合(例如:这取决于这是否有用)。

另一种方法是使用 WebAssembly在 C/C++ 中编写缓冲区填充代码，编译和公开方法以获取源缓冲区和目标缓冲区，然后从 JavaScript 调用它。对于这种情况，我没有任何示例。

在后两种情况下，您都会遇到与(不是那么多)旧版浏览器的兼容性问题。