This repository has been archived by the owner on Oct 18, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
94 lines (88 loc) · 4.35 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>IndexedDB and Webworkers</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>IndexedDB and Web-workers</h1>
<div class="row">
<div class="form-group">
<label for="inputEmail3" class="col-sm-6 control-label">Progress bar to show that the UI Thread is running</label>
<div class="col-sm-6">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-6 control-label">Progress bar to update progress</label>
<div class="col-sm-6">
<div class="progress">
<div class="progress-bar progress-bar-striped active" id="progressBar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-inline col-md-12">
<div class="form-group">
<label for="exampleInputName2"># of items</label>
<input type="number" class="form-control" value="100" id="numberOfItems">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Max work time (in ms)</label>
<input type="number" class="form-control" id="maxDelay" value="25">
</div>
<button id="generateData" class="btn btn-default">Generate Data</button>
<button class="btn runTest" data-worker="false">Run @ UI Thread</button>
<button class="btn runTest" data-worker="true">Run @ WebWorker</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>About</h2>
<p>
This demo shows one of the benefits of using indexed db in a webworker.
</p>
<p>
The generated data, which is an array of integers is used to simulate "work".
The data is being sent to the WebWorker using an IndexedDB database, which is being populated on the main thread. The WebWorker then fetches the entire data set and processes it.
</p>
<p>
Processing the data in the main thread will caused the browser to be "stuck" for a while, while the webworker doesn't halt the animation and actually updates the UI correctly.
</p>
<p>
The lower progress bar will turn green after the data was completely processed.
</p>
<p>
More @ <a href="https://github.com/RaananW/WebWorkers-IndexedDB/">GitHub</a>.
</p>
<h3>Usage</h3>
<p>
To generate a new set of data (delays) choose the properties and press "Generate data".
</p>
<p>
To see how this data is being processed on the main thread or persisted in IndexedDB and processed in a webworker click the corresponding buttons.
</p>
<p>
Try 10000 : 1 , 2500 : 10, 1000 : 25 . You will notice the overhead of storing the data and reading it entirely is not affecting the site's performance.
</p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Created by Raanan Weber (<a href="https://github.com/RaananW/">https://github.com/RaananW/</a>), 2015.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="doWork.js"></script>
<script src="app.js"></script>
</body>
</html>