-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
55 lines (50 loc) · 2.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Workers Test</title>
<style>
p, button {
font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2 {
font: bold 24px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#test-container {
position: relative;
height: 40px;
}
#test {
width: 40px;
height: 40px;
background: red;
position: absolute;
}
#desc {
width: 640px;
}
</style>
</head>
<body>
<div id="desc">
<h2>Loading large amounts of data in a worker</h2>
<p>Loading a large amount of JSON data for visualizations on a page freezes the browser, because the data is evaluated in the main thread shared with the browser UI. Many apps use Web Workers to do CPU-intensive calculations on data in a separate thread, but they still typically load the data in the main thread (making the page freeze) and then send it to a worker for calculations (freezing the page on each send too).</p>
<p>This test shows that you can eliminate the freezes completely by loading the data in the worker directly. After that we can query the data from the main thread without interrupting it. You can make pretty fast visualizations by combining this approach with algorithms like indexing the data into R-tree/quadtree, clustering or simplification.</p>
<p>Tested in Chrome/Firefox/Safari on OS X and Safari on iPad 2.</p>
<p>Note that Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686274">throws an error</a> if you try to initialize an array literal with more than ~490,000 points, so the test array (containing 1,600,000 elements) is broken into several concatenated chunks.</p>
<p>Load the data either way to get it cached (may take a while), after that the times will not include the actual network transfer of the file (for a fair comparison).</p>
</div>
<div id="test-container">
<div id="test"></div>
</div>
<p>
<button id="load-async">Load 9MB array asynchronously</button>
<button id="load-async-worker" disabled>Send to a worker</button><br />
<button id="load-worker">Load 9MB array in a worker</button>
</p>
<p id="log"></p>
<p>Source code: <a href="https://github.com/mourner/worker-data-load">mourner / worker-data-load</a></p>
<p>Made by <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>, creator of <a href="http://leafletjs.com">Leaflet</a>.</p>
<script src="main.js"></script>
</body>
</html>