grind086 · April 16, 2017 20:43 · grind086 · Apr 16, 2017
diff --git a/index.html b/index.html
 <html>
    <head>
        <script type='javascript/worker' id='bufferWorker'>
            self.onmessage = function(e) {
                var data = e.data;
                self.postMessage(data, [ data.buffer ]);
            }
        </script>

        <script type='javascript/worker' id='objectWorker'>
            self.onmessage = function(e) {
                var data = e.data;
                self.postMessage(data, [ data.data.buffer ]);
            }
        </script>

        <script type='javascript/worker' id='echoWorker'>
            self.onmessage = function(e) {
                var data = e.data;
                self.postMessage(data);
            }
        </script>

        <script type='text/javascript'>
            var dataSize = 1024 * 1024;
            var loopCount = 10000;

            function workerFromId(id) {
                var source = document.querySelector('#' + id).textContent;
                var blob = new Blob([source], { type: 'text/javascript' });

                return new Worker(window.URL.createObjectURL(blob));
            }

            function runTest(worker, fn) {
                return new Promise((res, rej) => {
                    var now, data;
                    var cumTime = 0;
                    var i = 0;

                    function iter() {
                        if (now) {
                            cumTime += Date.now() - now;
                        }

                        if (i++ >= loopCount) {
                            return res(cumTime);
                        }

                        data = new Uint8ClampedArray(dataSize);
                        now = Date.now();

                        fn(worker, data, iter);
                    }

                    iter();
                });
            }

            var bufferWorker = workerFromId('bufferWorker');
            var objectWorker = workerFromId('objectWorker');
            var echoWorker = workerFromId('echoWorker');

            var bufferTime;
            var objectTime;
            var echoBufferTime;
            var echoObjectTime;

            Promise.resolve()
                .then(() => {
                    return runTest(bufferWorker, (worker, data, done) => {
                        worker.onmessage = done;
                        worker.postMessage(data, [ data.buffer ]);
                    }).then((t) => bufferTime = t);
                })
                .then(() => {
                    return runTest(objectWorker, (worker, data, done) => {
                        worker.onmessage = done;
                        worker.postMessage({ foo: 'bar', data: data }, [ data.buffer ]);
                    }).then((t) => objectTime = t);
                })
                .then(() => {
                    return runTest(echoWorker, (worker, data, done) => {
                        worker.onmessage = done;
                        worker.postMessage(data);
                    }).then((t) => echoBufferTime = t);
                })
                .then(() => {
                    return runTest(echoWorker, (worker, data, done) => {
                        worker.onmessage = done;
                        worker.postMessage({ foo: 'bar', data: data });
                    }).then((t) => echoObjectTime = t);
                })
                .then(() => {
                    console.log([
                        `Buffer: ${bufferTime}`,
                        `Object: ${objectTime}`,
                        `Echo Buffer: ${echoBufferTime}`,
                        `Echo Object: ${echoObjectTime}`
                    ].join('\n'));
                });
        </script>
    </head>

    <body>
    </body>
 </html>
	<html>
	<head>
	<script type='javascript/worker' id='bufferWorker'>
	self.onmessage = function(e) {
	var data = e.data;
	self.postMessage(data, [ data.buffer ]);
	}
	</script>

	<script type='javascript/worker' id='objectWorker'>
	self.onmessage = function(e) {
	var data = e.data;
	self.postMessage(data, [ data.data.buffer ]);
	}
	</script>

	<script type='javascript/worker' id='echoWorker'>
	self.onmessage = function(e) {
	var data = e.data;
	self.postMessage(data);
	}
	</script>

	<script type='text/javascript'>
	var dataSize = 1024 * 1024;
	var loopCount = 10000;

	function workerFromId(id) {
	var source = document.querySelector('#' + id).textContent;
	var blob = new Blob([source], { type: 'text/javascript' });

	return new Worker(window.URL.createObjectURL(blob));
	}

	function runTest(worker, fn) {
	return new Promise((res, rej) => {
	var now, data;
	var cumTime = 0;
	var i = 0;

	function iter() {
	if (now) {
	cumTime += Date.now() - now;
	}

	if (i++ >= loopCount) {
	return res(cumTime);
	}

	data = new Uint8ClampedArray(dataSize);
	now = Date.now();

	fn(worker, data, iter);
	}

	iter();
	});
	}

	var bufferWorker = workerFromId('bufferWorker');
	var objectWorker = workerFromId('objectWorker');
	var echoWorker = workerFromId('echoWorker');

	var bufferTime;
	var objectTime;
	var echoBufferTime;
	var echoObjectTime;

	Promise.resolve()
	.then(() => {
	return runTest(bufferWorker, (worker, data, done) => {
	worker.onmessage = done;
	worker.postMessage(data, [ data.buffer ]);
	}).then((t) => bufferTime = t);
	})
	.then(() => {
	return runTest(objectWorker, (worker, data, done) => {
	worker.onmessage = done;
	worker.postMessage({ foo: 'bar', data: data }, [ data.buffer ]);
	}).then((t) => objectTime = t);
	})
	.then(() => {
	return runTest(echoWorker, (worker, data, done) => {
	worker.onmessage = done;
	worker.postMessage(data);
	}).then((t) => echoBufferTime = t);
	})
	.then(() => {
	return runTest(echoWorker, (worker, data, done) => {
	worker.onmessage = done;
	worker.postMessage({ foo: 'bar', data: data });
	}).then((t) => echoObjectTime = t);
	})
	.then(() => {
	console.log([
	`Buffer: ${bufferTime}`,
	`Object: ${objectTime}`,
	`Echo Buffer: ${echoBufferTime}`,
	`Echo Object: ${echoObjectTime}`
	].join('\n'));
	});
	</script>
	</head>

	<body>
	</body>
	</html>