Skip to content

Commit 5eb7eca

Browse files
vivaxyvivaxy
committed
feat(web-worker-multithreading): init
1 parent f4cd6ec commit 5eb7eca

File tree

8 files changed

+122
-32
lines changed

8 files changed

+122
-32
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -553,6 +553,7 @@ Table of contents
553553
* [Web Share](https://vivaxy.github.io/examples/web-api/web-share/) Web Share
554554
* [web worker demo page](https://vivaxy.github.io/examples/web-api/web-worker/) Web worker
555555
* [Does WebWorker JS Infinite Loop Freeze Page?](https://vivaxy.github.io/examples/web-api/web-worker-js-infinite-loop-freeze-page/) Does WebWorker JS Infinite Loop Freeze Page?
556+
* [Web Worker Multithreading](https://vivaxy.github.io/examples/web-api/web-worker-multithreading/) Web Worker Multithreading
556557
* [Web Worker transfer](https://vivaxy.github.io/examples/web-api/web-worker-transfer/) Web worker transfer
557558
* [WebGL](https://vivaxy.github.io/examples/web-api/webgl/) WebGL
558559
* [webgl fundamentals](https://vivaxy.github.io/examples/web-api/webgl/fundamentals/) Fundamentals

‎benchmark/algorithms/find-max-prime.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* @since 2024-09-03
3+
* @author vivaxy
4+
*/
5+
/**
6+
* @param {number} num
7+
* @return {boolean}
8+
*/
9+
function isPrime(num) {
10+
if (num <= 1) {
11+
return false;
12+
}
13+
if (num === 2) {
14+
return true;
15+
}
16+
for (let i = 3; i <= Math.sqrt(num); i += 2) {
17+
if (num % i === 0) {
18+
return false;
19+
}
20+
}
21+
return true;
22+
}
23+
24+
/**
25+
* @param {number} target
26+
* @return {number}
27+
*/
28+
export function findMaxPrime(target) {
29+
for (let i = target; i > 0; i--) {
30+
if (isPrime(i)) {
31+
return i;
32+
}
33+
}
34+
return -1;
35+
}

‎benchmark/algorithms/index.js

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,7 @@
22
* @since 2024-09-03
33
* @author vivaxy
44
*/
5-
/**
6-
* @param {number} num
7-
* @return {boolean}
8-
*/
9-
function isPrime(num) {
10-
if (num <= 1) {
11-
return false;
12-
}
13-
if (num === 2) {
14-
return true;
15-
}
16-
for (let i = 3; i <= Math.sqrt(num); i += 2) {
17-
if (num % i === 0) {
18-
return false;
19-
}
20-
}
21-
return true;
22-
}
23-
24-
/**
25-
* @param {number} target
26-
* @return {number}
27-
*/
28-
function findMaxPrime(target) {
29-
for (let i = target; i > 0; i--) {
30-
if (isPrime(i)) {
31-
return i;
32-
}
33-
}
34-
return -1;
35-
}
5+
import { findMaxPrime } from './find-max-prime.js';
366

377
const algorithms = {
388
findMaxPrime() {

‎sitemap.xml

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎web-api/menu.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
[
2+
{
3+
"name": "Web Worker Multithreading",
4+
"link": "web-worker-multithreading/"
5+
},
26
{
37
"name": "localStorage Consistency",
48
"link": "local-storage-consistency/"

‎web-api/web-worker-multithreading/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
8+
/>
9+
<meta name="description" content="Web Worker Multithreading" />
10+
<meta
11+
name="keywords"
12+
content="vivaxy,example,examples,github,demo,demos,playground,test,Web Worker Multithreading,web-api,sample,samples,web-worker-multithreading"
13+
/>
14+
<meta name="author" content="vivaxy" />
15+
<link type="image/png" rel="shortcut icon" href="/vivaxy.icon.png" />
16+
<title>Web Worker Multithreading</title>
17+
</head>
18+
<body>
19+
<p>
20+
Tasks cost longer than 1 second in main thread is better to split into web
21+
workers.
22+
</p>
23+
<input id="tasks" value="1e12, 1e13, 1e14" />
24+
<button id="main-thread">Run in main thread</button>
25+
<button id="multiple-workers">Run in multiple workers</button>
26+
<script src="https://unpkg.com/@vivaxy/framework/utils/console.js"></script>
27+
<script type="module" src="index.js"></script>
28+
<script type="text/javascript" charset="utf-8" src="/cm.js"></script>
29+
</body>
30+
</html>

‎web-api/web-worker-multithreading/index.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* @since 2024-09-03
3+
* @author vivaxy
4+
*/
5+
import { findMaxPrime } from '../../benchmark/algorithms/find-max-prime.js';
6+
7+
function bindClick(id, compute) {
8+
document.getElementById(id).addEventListener('click', async function () {
9+
const args = document
10+
.getElementById('tasks')
11+
.value.split(',')
12+
.map((v) => Number(v));
13+
const startTime = performance.now();
14+
const results = await compute(...args);
15+
const endTime = performance.now();
16+
console.log(
17+
`Run in ${id}, result=${results.join(',')}, cost=${
18+
endTime - startTime
19+
}ms`,
20+
);
21+
});
22+
}
23+
24+
function getWorkerResponse(number) {
25+
return new Promise(function (resolve) {
26+
const worker = new Worker('./worker.js', { type: 'module' });
27+
worker.addEventListener('message', function (e) {
28+
resolve(e.data);
29+
worker.terminate();
30+
});
31+
worker.postMessage(number);
32+
});
33+
}
34+
35+
bindClick('main-thread', function (...args) {
36+
return args.map((v) => findMaxPrime(v));
37+
});
38+
39+
bindClick('multiple-workers', async function (...args) {
40+
return Promise.all(args.map((v) => getWorkerResponse(v)));
41+
});

‎web-api/web-worker-multithreading/worker.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* @since 2024-09-03
3+
* @author vivaxy
4+
*/
5+
import { findMaxPrime } from '../../benchmark/algorithms/find-max-prime.js';
6+
7+
self.addEventListener('message', function (e) {
8+
self.postMessage(findMaxPrime(e.data));
9+
});

0 commit comments

Comments
 (0)