为什么我的网络工作者表现出乎意料的糟糕？

Question

为了让自己熟悉网络工作者，我编写了一个小测试，其中添加了 2 个数组元素。目标数组中的位置分配给 4 个工作人员。我想衡量表现并经历了一次粗鲁的觉醒。

///init///
const workers = new Array(4), global_elements = 250000;

function createArray(value, elements) {
    return new Int8Array(elements).fill(value);
}

let a = createArray(1, global_elements), b = createArray(2,global_elements), c = createArray(0,global_elements), data_recived = 0;

window.URL = window.URL || window.webkitURL;

for(let i=0; i<4; ++i) {
    let response = `self.onmessage=function(e){
                        for(let i=${i*global_elements}; i<${i*global_elements+global_elements}; ++i) {
                                e.data[2][i] = e.data[0][i] + e.data[1][i];
                        }
                        postMessage(0);
                    }`;
    workers[i] = new Worker(URL.createObjectURL(new Blob([response], {type: 'application/javascript'})));
    workers[i].onmessage = function(e) {
        if(++data_recived === 4) {
            t1 = performance.now();
            console.log(t1-t0);
        }
    };
}
///end-init///    

//normal
let t0 = performance.now();
for(let i=0; i<global_elements; ++i) {
    c[i] = a[i] + b[i];
}
let t1 = performance.now();
console.log(t1-t0);

//worker
t0 = performance.now();
for(let i=0; i<4; ++i) {
    workers[i].postMessage([a,b,c]);
}

可悲的是，这里的工人甚至无法随着 global_elements 数量的增加而得分。

元素：正常 |工人

2500: 0.1 | 51.4
25000：1.5 | 66.5
250000：4.1 | 182

（我知道性能测试不是最优的。）

为什么我的网络工作者表现如此糟糕？

Answer 1

我发现如何在函数中访问数组的方式对性能有很大影响。通过将它们保存在本地，我能够将计算时间减少一半以上。

任务：2DMatrixMul，元素：250000，worker_count：8
正常需要：1010 毫秒
需要的工人：325 毫秒

这是我的小测试用例的最终结果，供感兴趣的人参考。

const worker_count = 8, workers = new Array(worker_count), global_elements = 250000;

let data_recived = 0, a = new Tensor(1, [Math.sqrt(global_elements), Math.sqrt(global_elements)]), b = new Tensor(1, [Math.sqrt(global_elements), Math.sqrt(global_elements)]), c = new Tensor(0, [Math.sqrt(global_elements), Math.sqrt(global_elements)]);

window.URL = window.URL || window.webkitURL;

for(let i=0; i<worker_count; ++i) {
    let response = `
                    self.onmessage=function(e){
                        const a = e.data[0], b = e.data[1], tmp = new Float32Array(${global_elements/worker_count});
                        let c=${i*global_elements/worker_count}, i=0, z=0, m=0, lim = 0;
                        for(; c<${i*global_elements/worker_count+global_elements/worker_count}; ++c) {
                            i = Math.floor(c/${c._shape._dim[0]}), z = c%${c._shape._dim[0]};
                            for(m=i*${a._shape._dim[1]}, lim = m+${a._shape._dim[1]}; m<lim; ++m) {
                                    tmp[c-${i*global_elements/worker_count}] += a[m] * b[(m - i*${a._shape._dim[1]})*${b._shape._dim[1]}+z];
                            }
                        }
                        postMessage(tmp);
                    }`;
    workers[i] = new Worker(URL.createObjectURL(new Blob([response], {type: 'application/javascript'})));
    workers[i].onmessage = function(e) {
        pass(c._value, e.data, i);
        if(++data_recived === worker_count) {
            t1 = performance.now();
            console.log(t1-t0);
            console.log(c);
        }
    };
}

function pass(arr, data, index) {
    for(let i=index*global_elements/worker_count, len=index*global_elements/worker_count+global_elements/worker_count; i<len; ++i) {
        arr[i] = data[i-index*global_elements/worker_count];
    }
}
///end-init///    

//normal
let t0 = performance.now();
calculations.matmul2D(a,b);
let t1 = performance.now();
console.log(t1-t0);

//worker
t0 = performance.now();
for(let i=0; i<worker_count; ++i) {
    workers[i].postMessage([a._value,b._value]);
}

/* calculations.matmul2D( ) looks like this:

static matmul2D(a, b) { //revisite
    const row = a._shape._dim[0], column = b._shape._dim[1], a1 = a._shape._dim[1];
    let c=0, i=0, m=0, lim=0, len=row * column, result = new Tensor(0, [a._shape._dim[0], column]);
    for(; c<len; ++c) {
        i = Math.floor(c/row);
        for(m=i*a1, lim = m+a1; m<lim; ++m) {
            result._value[c] += a._value[m] * b._value[(m - i*a1)*column+(c%row)];
        }
    }
    return result;
}

*/

Answer 2

我怀疑性能问题的原因是向工作人员发送数据时发生的复制。主线程和工作线程之间不共享内存，因此传递消息通常涉及克隆要发送的数据。在此处查看更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Transferring_data_to_and_from_workers_further_details

一些浏览器支持一种称为 Transferable Objects 的技术，它允许您传递一个对象而不用克隆它。你可以在这里阅读更多相关信息：https://developers.google.com/web/updates/2011/12/Transferable-Objects-Lightning-Fast