Web Workers Transferable post demo

by Yosuke Kurami

HTML

<h1>Web Workers Transferable post demo</h1>
<label>Data size: </label>
<input id="size" type="number" step="10" value="256" /> [MB]

<br />
<input id="r_simple" type="radio" name="type" value="simple"/>
<label for="r_simple">simple</label>

<input id="r_tr1" type="radio" name="type" checked value="transferable1"/>
<label for="r_tr1">Transferable(no copy)</label>

<input id="r_tr2" type="radio" name="type" value="transferable2"/>
<label for="r_tr2">Transferable(copy at woker)</label>

<br />

<button id="exec">execute</button>

<br />

Out: <span id="out">***[msec]</span>

JavaScript

'use strict';

(function(worker){

	worker.onmessage = function(event){
		var array, array2, start, end;
		if(!event.data.type){
			return;
		}else if(event.data.type === 'simple'){
			array = new Uint8Array(event.data.size);
			start = new Date() - 0;
			worker.postMessage({
				type: 'res',
				array: array,
				start: start
			});
		}else if(event.data.type === 'transferable1'){
			array = new Uint8Array(event.data.size);
			start = new Date() - 0;
			worker.postMessage({
				type: 'res',
				array: array,
				start: start
			}, [array.buffer]);
		}else if(event.data.type === 'transferable2'){
			array = new Uint8Array(event.data.size);
			start = new Date() - 0;
			array2 = new Uint8Array(array);
			worker.postMessage({
				type: 'res',
				array: array2,
				start: start
			}, [array2.buffer]);
		}else if(event.data.type === 'res'){
			end = new Date() - 0;
			$('#out').text((end - event.data.start) + '[msec]');
		}
	};

})((function(){
	if(typeof window !== 'undefined'){
		var url = $('script:last').attr('src');
		var blob, sub;
		if(url && url !== ''){
			sub = new Worker(url);
		}else{
			blob = new Blob([$('script:last').text()], {type: 'text\/javascript'});
			url = window.URL.createObjectURL(blob);
			sub = new Worker(url);
		}
		$(function(){
			$('#exec').click(function(){
				sub.postMessage({
					type: $('input:radio:checked')[0].value,
					size: parseInt($('#size')[0].value) * 1000 * 1000
				});
				$('#out').text('calc...');
			});
		});
		return sub;
	}else{
		return self;
	}
})());