Chrome 13에서는 구조화된 클론이라는 알고리즘을 사용하여 웹 작업자와 ArrayBuffer를 전송하는 기능을 도입했습니다. 이를 통해 postMessage() API는 단순한 문자열이 아니라 File, Blob, ArrayBuffer, JSON 객체와 같은 복합 유형의 메시지를 허용할 수 있었습니다. 구조화된 클론은 이후 버전의 Firefox에서도 지원됩니다.
빠를수록 좋습니다
구조화된 클론은 유용하지만 여전히 복사 작업입니다. 32MB ArrayBuffer를 작업자에 전달하는 오버헤드는 수백 밀리초일 수 있습니다.
새 버전의 브라우저에는 전송 가능한 객체라고 하는 메시지 전달 성능이 크게 개선되었습니다.
전송 가능한 객체를 사용하면 데이터가 한 컨텍스트에서 다른 컨텍스트로 전송됩니다. 제로 카피이므로 작업자에 데이터를 전송하는 성능이 크게 향상됩니다. C/C++ 환경의 경우 이를 패스 바이 참조로 생각하면 됩니다. 그러나 패스 바이 참조와 달리 호출 컨텍스트의 '버전'은 새 컨텍스트로 전송되면 더 이상 사용할 수 없습니다. 예를 들어 기본 앱에서 작업자로 ArrayBuffer를 전송할 때 원래 ArrayBuffer는 삭제되며 더 이상 사용할 수 없습니다. 객체의 내용은 (문자 그대로 말 그대로) Worker 컨텍스트로 전송됩니다.
전송 가능한 객체를 사용해 볼 수 있도록 전송 가능한 객체를 지원하는 새 버전의 postMessage()가 있습니다.
worker.postMessage(arrayBuffer, [transferableList]);
window.postMessage(arrayBuffer, targetOrigin, [transferableList]);
작업자 사례의 경우 첫 번째 인수는 ArrayBuffer 메시지입니다. 두 번째 인수는 전송해야 하는 항목 목록입니다. 이 예에서는 전송 가능한 목록에 arrayBuffer를 지정합니다.
벤치마크 데모
전송 가능한 기기의 성능 향상을 확인하기 위해 데모를 준비했습니다.
데모에서는 32MB ArrayBuffer를 작업자에 전송하고 postMessage()를 사용하여 다시 전송합니다. 브라우저에서 전송 가능한 항목을 지원하지 않으면 샘플은 구조화된 클론으로 대체됩니다. 서로 다른 브라우저에서 평균 5회 실행을 얻는 결과는 다음과 같습니다.
MacBook Pro/10.6.8/2.53GHz/Intel Core 2 Duo에서는 FF가 구조적 복제를 사용하는 속도가 가장 빠릅니다. 32MB ArrayBuffer를 작업자에게 전송하고 기본 스레드 (RRT - 왕복 시간)에 다시 게시하는 데 평균 302밀리초가 소요되었습니다. 전송 가능한 테스트와 비교할 때 동일한 테스트에 6.6ms가 걸렸습니다. 성능이 엄청나죠!
이러한 종류의 속도를 사용하면 대규모 WebGL 텍스처/메시를 작업자와 기본 앱 간에 원활하게 전달할 수 있습니다.
특성 감지
여기서는 특성 감지가 약간 까다롭습니다. 직원에게 작은 ArrayBuffer를 보내는 것이 좋습니다. 버퍼가 전송되고 복사되지 않으면 .byteLength가 0이 됩니다.
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
if (ab.byteLength) {
alert('Transferables are not supported in your browser!');
} else {
// Transferables are supported.
}
지원: 현재 Chrome 17 이상, Firefox, Opera, Safari, IE10 이상
업데이트됨 (2011년 12월 13일): webkitPostMessage() 서명을 표시하는 코드 스니펫이 창 및 작업자에 따라 다릅니다.
업데이트 (2016년 11월 3일): 공급업체 접두사가 삭제되고 코드 스니펫이 업데이트되었습니다.