WebWorker JSON Parse - async json parsing

chrome.out

Starting...
TestData.js:9 Buiding test Data: 603.227294921875ms
TestData.js:20 1504702356077
TestData.js:22 Bloking event loop...
TestData.js:27 StandartParsing: 140.2958984375ms
TestData.js:28 4300000
TestData.js:29 Event loop unblocked
TestData.js:15 154 - 1504702356231 - event loop not blocked
TestData.js:15 6 - 1504702356237 - event loop not blocked
TestData.js:15 10 - 1504702356247 - event loop not blocked
TestData.js:15 10 - 1504702356257 - event loop not blocked
TestData.js:15 10 - 1504702356267 - event loop not blocked
TestData.js:15 10 - 1504702356277 - event loop not blocked
TestData.js:15 10 - 1504702356287 - event loop not blocked
TestData.js:15 10 - 1504702356297 - event loop not blocked
TestData.js:15 10 - 1504702356307 - event loop not blocked
TestData.js:15 10 - 1504702356317 - event loop not blocked
TestData.js:15 10 - 1504702356327 - event loop not blocked
TestData.js:15 10 - 1504702356337 - event loop not blocked
TestData.js:15 10 - 1504702356347 - event loop not blocked
TestData.js:15 10 - 1504702356357 - event loop not blocked
TestData.js:15 10 - 1504702356367 - event loop not blocked
TestData.js:15 10 - 1504702356377 - event loop not blocked
TestData.js:15 10 - 1504702356387 - event loop not blocked
TestData.js:15 10 - 1504702356397 - event loop not blocked
TestData.js:15 10 - 1504702356407 - event loop not blocked
TestData.js:15 10 - 1504702356417 - event loop not blocked
TestData.js:15 10 - 1504702356427 - event loop not blocked
TestData.js:15 17 - 1504702356444 - event loop not blocked
TestData.js:15 3 - 1504702356447 - event loop not blocked
TestData.js:15 10 - 1504702356457 - event loop not blocked
TestData.js:15 10 - 1504702356467 - event loop not blocked
TestData.js:15 10 - 1504702356477 - event loop not blocked
TestData.js:15 10 - 1504702356487 - event loop not blocked
TestData.js:15 10 - 1504702356497 - event loop not blocked
TestData.js:15 10 - 1504702356507 - event loop not blocked
TestData.js:15 10 - 1504702356517 - event loop not blocked
TestData.js:15 10 - 1504702356527 - event loop not blocked
TestData.js:15 10 - 1504702356537 - event loop not blocked
TestData.js:15 10 - 1504702356547 - event loop not blocked
TestData.js:15 10 - 1504702356557 - event loop not blocked
TestData.js:15 10 - 1504702356567 - event loop not blocked
TestData.js:15 10 - 1504702356577 - event loop not blocked
TestData.js:15 10 - 1504702356587 - event loop not blocked
TestData.js:15 10 - 1504702356597 - event loop not blocked
TestData.js:15 10 - 1504702356607 - event loop not blocked
TestData.js:37 WebWorkerParsing: 491.041015625ms
TestData.js:38 4300000
TestData.js:15 102 - 1504702356709 - event loop not blocked
TestData.js:15 8 - 1504702356717 - event loop not blocked
TestData.js:15 10 - 1504702356727 - event loop not blocked
TestData.js:15 10 - 1504702356737 - event loop not blocked
TestData.js:15 10 - 1504702356747 - event loop not blocked
TestData.js:15 10 - 1504702356757 - event loop not blocked
TestData.js:45 FetchParsing: 495.287109375ms
TestData.js:47 4300000
TestData.js:15 498 - 1504702357255 - event loop not blocked
TestData.js:15 2 - 1504702357257 - event loop not blocked
TestData.js:15 10 - 1504702357267 - event loop not blocked
TestData.js:15 10 - 1504702357277 - event loop not blocked
TestData.js:15 10 - 1504702357287 - event loop not blocked
TestData.js:15 10 - 1504702357297 - event loop not blocked
TestData.js:51 jsonParse: 140ms, worker: 491ms(491ms), fetch: 496
TestData.js:52 jsonParseMaxBlock: 140ms, workerMaxBlock: 154ms, fetchMaxBlock: 498

firefox.out

Starting...  TestData.js:1:1
Buiding test Data: таймер запущенTestData.js:3
Buiding test Data: 377.86мсTestData.js:9
1504702375142  TestData.js:20:1
StandartParsing: таймер запущенTestData.js:21
Bloking event loop...  TestData.js:22:1
StandartParsing: 112.87мсTestData.js:27
4300000  TestData.js:28:1
Event loop unblocked  TestData.js:29:1
WebWorkerParsing: таймер запущенTestData.js:31
127 - 1504702375269 - event loop not blocked  TestData.js:15:2
HTML-документ не содержит объявления кодировки символов. Если документ содержит символы, не входящие в диапазон US-ASCII, то в некоторых конфигурациях браузера в документе будет отображён искажённый текст. Кодировка символов страницы должна быть объявлена в документе или в протоколе передачи.  index.html
10 - 1504702375279 - event loop not blocked  TestData.js:15:2
10 - 1504702375289 - event loop not blocked  TestData.js:15:2
10 - 1504702375299 - event loop not blocked  TestData.js:15:2
11 - 1504702375310 - event loop not blocked  TestData.js:15:2
10 - 1504702375320 - event loop not blocked  TestData.js:15:2
10 - 1504702375330 - event loop not blocked  TestData.js:15:2
10 - 1504702375340 - event loop not blocked  TestData.js:15:2
10 - 1504702375350 - event loop not blocked  TestData.js:15:2
10 - 1504702375360 - event loop not blocked  TestData.js:15:2
10 - 1504702375370 - event loop not blocked  TestData.js:15:2
10 - 1504702375380 - event loop not blocked  TestData.js:15:2
10 - 1504702375390 - event loop not blocked  TestData.js:15:2
10 - 1504702375400 - event loop not blocked  TestData.js:15:2
10 - 1504702375410 - event loop not blocked  TestData.js:15:2
11 - 1504702375421 - event loop not blocked  TestData.js:15:2
10 - 1504702375431 - event loop not blocked  TestData.js:15:2
10 - 1504702375441 - event loop not blocked  TestData.js:15:2
10 - 1504702375451 - event loop not blocked  TestData.js:15:2
10 - 1504702375461 - event loop not blocked  TestData.js:15:2
10 - 1504702375471 - event loop not blocked  TestData.js:15:2
10 - 1504702375481 - event loop not blocked  TestData.js:15:2
10 - 1504702375491 - event loop not blocked  TestData.js:15:2
10 - 1504702375501 - event loop not blocked  TestData.js:15:2
11 - 1504702375512 - event loop not blocked  TestData.js:15:2
11 - 1504702375523 - event loop not blocked  TestData.js:15:2
11 - 1504702375534 - event loop not blocked  TestData.js:15:2
9 - 1504702375543 - event loop not blocked  TestData.js:15:2
11 - 1504702375554 - event loop not blocked  TestData.js:15:2
11 - 1504702375565 - event loop not blocked  TestData.js:15:2
10 - 1504702375575 - event loop not blocked  TestData.js:15:2
10 - 1504702375585 - event loop not blocked  TestData.js:15:2
10 - 1504702375595 - event loop not blocked  TestData.js:15:2
11 - 1504702375606 - event loop not blocked  TestData.js:15:2
9 - 1504702375615 - event loop not blocked  TestData.js:15:2
11 - 1504702375626 - event loop not blocked  TestData.js:15:2
10 - 1504702375636 - event loop not blocked  TestData.js:15:2
10 - 1504702375646 - event loop not blocked  TestData.js:15:2
10 - 1504702375656 - event loop not blocked  TestData.js:15:2
10 - 1504702375666 - event loop not blocked  TestData.js:15:2
11 - 1504702375677 - event loop not blocked  TestData.js:15:2
11 - 1504702375688 - event loop not blocked  TestData.js:15:2
11 - 1504702375699 - event loop not blocked  TestData.js:15:2
10 - 1504702375709 - event loop not blocked  TestData.js:15:2
10 - 1504702375719 - event loop not blocked  TestData.js:15:2
10 - 1504702375729 - event loop not blocked  TestData.js:15:2
11 - 1504702375740 - event loop not blocked  TestData.js:15:2
9 - 1504702375749 - event loop not blocked  TestData.js:15:2
11 - 1504702375760 - event loop not blocked  TestData.js:15:2
10 - 1504702375770 - event loop not blocked  TestData.js:15:2
10 - 1504702375780 - event loop not blocked  TestData.js:15:2
10 - 1504702375790 - event loop not blocked  TestData.js:15:2
11 - 1504702375801 - event loop not blocked  TestData.js:15:2
WebWorkerParsing: 1228.37мсTestData.js:37
4300000  TestData.js:38:2
686 - 1504702376487 - event loop not blocked  TestData.js:15:2
10 - 1504702376497 - event loop not blocked  TestData.js:15:2
10 - 1504702376507 - event loop not blocked  TestData.js:15:2
10 - 1504702376517 - event loop not blocked  TestData.js:15:2
10 - 1504702376527 - event loop not blocked  TestData.js:15:2
FetchParsing: таймер запущенTestData.js:43
77 - 1504702376604 - event loop not blocked  TestData.js:15:2
10 - 1504702376614 - event loop not blocked  TestData.js:15:2
10 - 1504702376624 - event loop not blocked  TestData.js:15:2
11 - 1504702376635 - event loop not blocked  TestData.js:15:2
FetchParsing: 237.07мсTestData.js:45
4300000  TestData.js:47:4
141 - 1504702376776 - event loop not blocked  TestData.js:15:2
10 - 1504702376786 - event loop not blocked  TestData.js:15:2
10 - 1504702376796 - event loop not blocked  TestData.js:15:2
11 - 1504702376807 - event loop not blocked  TestData.js:15:2
11 - 1504702376818 - event loop not blocked  TestData.js:15:2
jsonParse: 111ms, worker: 1228ms(1227ms), fetch: 238  TestData.js:51:5
jsonParseMaxBlock: 111ms, workerMaxBlock: 686ms, fetchMaxBlock: 141  TestData.js:52:5

index.html

<!doctype html>
<head>
    <script type="text/javascript" src="./TestData.js"></script>
</head>
<body></body>
</html>

TestData.js

console.log('Starting...');

console.time('Buiding test Data');
const jsonData = { data: new Array(4300000) };
for (let i = 0; i < 1300000; i++) {
	jsonData.data[i]=`el-${i}`;
}
const dataString = JSON.stringify(jsonData);
console.timeEnd('Buiding test Data');

let max = 0;
let last = Date.now();
const interval = setInterval(() => {
	let now = Date.now();
	console.log(`${now-last} - ${now} - event loop not blocked`);
	max = Math.max(now-last,max);
	last = now;
}, 10);

console.log(Date.now());
console.time('StandartParsing');
console.log('Bloking event loop...');
let t1 = Date.now();
const n = JSON.parse(dataString);
let t2 = Date.now();
let max1 = t2-t1;
console.timeEnd('StandartParsing');
console.log(n.data.length);
console.log('Event loop unblocked');

console.time('WebWorkerParsing');
max = 0;
let t3 = Date.now();
let t32 = Date.now();
webWorkerJSONParse(dataString, (e) => {
	let t4 = Date.now();
	console.timeEnd('WebWorkerParsing');
	console.log(e.data.length);
	setTimeout(function () {
		let max2 = max;
		let t5 = Date.now();
		max = 0;
		console.time('FetchParsing');
		(new Response(dataString)).json().then(json => {
			console.timeEnd('FetchParsing');
			let t6 = Date.now();
			console.log(json.data.length);
			setTimeout(() => {
				let max3 = max;
				clearInterval(interval)
				console.log(`jsonParse: ${t2 - t1}ms, worker: ${t4 - t3}ms(${t4 - t32}ms), fetch: ${t6 - t5}`)
				console.log(`jsonParseMaxBlock: ${max1}ms, workerMaxBlock: ${max2}ms, fetchMaxBlock: ${max3}`)
			}, 50);
		});
	}, 50)
	
});





function webWorkerJSONParse(data, callback) {
	if (typeof data !== 'string' || data.charAt(0) !== '{') {
		callback(data);
		return;
	}

	const WT = `
	function () {
		self.onmessage = function(e){
		self.postMessage(JSON.parse(e.data));
		self.close();
		};
	}
	`;

	const worker = new Worker(URL.createObjectURL(new Blob(["(" + WT + ")()"], { type: 'text/javascript' })));
	worker.onmessage = (e) => {
		callback(e.data);
	};
	t32 = Date.now();
	worker.postMessage(data);
}