작업자 ♥ ArrayBuffer

에릭 비델만

crbug.com/73313부터 Chrome 13 및 FF5는 웹 작업자와의 ArrayBuffer (또는 유형 지정 배열) 전송을 지원합니다. 예를 들면 다음과 같습니다.

worker.js

self.onmessage = function(e) {
    var uInt8Array = e.data;
    postMessage("Inside worker.js: uInt8Array.toString() = " + uInt8Array.toString());
    postMessage("Inside worker.js: uInt8Array.byteLength = " + uInt8Array.byteLength);
};

main.html

var uInt8Array = new Uint8Array(new ArrayBuffer(10));
for (var i = 0; i < uInt8Array.length; ++i) {
    uInt8Array[i] = i * 2; // [0, 2, 4, 6, 8,...]
}

console.log('uInt8Array.toString() = ' + uInt8Array.toString());
console.log('uInt8Array.byteLength = ' + uInt8Array.byteLength);

worker.postMessage(uInt8Array);

이게 왜 흥미로울까요?...바이너리 데이터!

브라우저가 postMessage() 데이터를 JSON 객체로 직렬화하는 대신 구조화된 클론 알고리즘을 사용하여 ArrayBuffer를 작업자 컨텍스트에 복사합니다. 그 반대의 경우도 마찬가지입니다. 이것은 이전에 본 적이 없는 작업자들에게 진정한 잠재력을 열어줍니다. 즉, 기본 앱과 작업자 스레드 간에 바이너리 데이터를 쉽게 전달할 수 있습니다.

유형이 있는 배열 I/O를 사용하면 강도 높은 이미지 조작, 사운드 처리 및 과도한 WebGL 계산을 훨씬 더 쉽게 실행할 수 있습니다. 예를 들어 파일을 배열 버퍼로 읽거나 XHR2를 사용하여 Blob을 가져오고 결과를 직접 작업자에게 전달할 수 있습니다. 더 이상 데이터를 base64로 인코딩하지 않아도 됩니다.

제 생각에 이것은 노동자들이 처음부터 포함해야 하는 일 중 하나라고 생각합니다. 말이 되네요.