From 7ec073f0a5ba304bc65979dddfae4c425355803f Mon Sep 17 00:00:00 2001 From: LHQ Date: Mon, 13 Jan 2025 15:07:42 +0800 Subject: [PATCH] add demo for worker --- web-workers/animation-worker/README.md | 13 ++++ web-workers/animation-worker/animation.js | 64 +++++++++++++++++++ web-workers/animation-worker/index.html | 38 +++++++++++ web-workers/animation-worker/worker.js | 9 +++ .../communication-shared-worker/README.md | 15 +++++ .../communication-shared-worker/index.html | 29 +++++++++ .../communication-shared-worker/index1.html | 35 ++++++++++ .../communication-shared-worker/index2.html | 35 ++++++++++ .../postMessage.js | 21 ++++++ .../receiveMessage.js | 11 ++++ .../sharedWorker.js | 15 +++++ 11 files changed, 285 insertions(+) create mode 100644 web-workers/animation-worker/README.md create mode 100644 web-workers/animation-worker/animation.js create mode 100644 web-workers/animation-worker/index.html create mode 100644 web-workers/animation-worker/worker.js create mode 100644 web-workers/communication-shared-worker/README.md create mode 100644 web-workers/communication-shared-worker/index.html create mode 100644 web-workers/communication-shared-worker/index1.html create mode 100644 web-workers/communication-shared-worker/index2.html create mode 100644 web-workers/communication-shared-worker/postMessage.js create mode 100644 web-workers/communication-shared-worker/receiveMessage.js create mode 100644 web-workers/communication-shared-worker/sharedWorker.js diff --git a/web-workers/animation-worker/README.md b/web-workers/animation-worker/README.md new file mode 100644 index 0000000..76705bd --- /dev/null +++ b/web-workers/animation-worker/README.md @@ -0,0 +1,13 @@ +# Worker Demo + +This demo demonstrates how to use a `Worker` to run long-running tasks in a background thread, preventing the main thread from being blocked. + +## showcase + +[Open the home page](https://mdn.github.io/dom-examples/web-workers/index.html) + +## description + +1. Open the home page. +2. Click the `start` button to view the animation effect. +3. Wait for the animation effect to finish before switching to the `optimize` button and clicking the `block` button. Observe the difference between using a Worker and not using a Worker, such as the transition from the `doing` state to the `done` state and the animation effect. \ No newline at end of file diff --git a/web-workers/animation-worker/animation.js b/web-workers/animation-worker/animation.js new file mode 100644 index 0000000..4ee311c --- /dev/null +++ b/web-workers/animation-worker/animation.js @@ -0,0 +1,64 @@ +const start = document.querySelector("#start"); +const stop = document.querySelector("#stop"); +const block = document.querySelector("#block"); +const performance = document.querySelector("#performance"); +const state = document.querySelector("#state"); + +let optimize = false; +let time = 0; +let animationId, + worker, + length = 2200; + +if (window.Worker) { + worker = new Worker("worker.js"); + worker.onmessage = function (e) { + state.textContent = e.data; + }; +} + +const animate = function () { + time++; + box.style.transform = `translateX(${time}px)`; + if (time < 600) { + animationId = requestAnimationFrame(animate); + } +}; + +const newElement = function () { + const span = document.createElement("span"); + span.style.display = "inline-block"; + span.style.width = "10px"; + span.style.height = "10px"; + span.style.backgroundColor = "red"; + span.style.margin = "2px"; + return span; +}; + +start.onclick = function () { + animationId = requestAnimationFrame(animate); +}; + +stop.onclick = function () { + cancelAnimationFrame(animationId); +}; + +block.onclick = function () { + state.textContent = "doing"; + if (optimize && worker) { + worker.postMessage({ length }); + } else { + for (let i = 0; i < length; i++) { + for (let j = i + 1; j < length; j++) { + for (let k = j + 1; k < length; k++) {} + } + } + state.textContent = "done"; + } +}; + +performance.onclick = function () { + optimize = !optimize; + if (optimize) performance.textContent = "Un-Optimize"; + else performance.textContent = "Optimize"; +}; diff --git a/web-workers/animation-worker/index.html b/web-workers/animation-worker/index.html new file mode 100644 index 0000000..d6da4d2 --- /dev/null +++ b/web-workers/animation-worker/index.html @@ -0,0 +1,38 @@ + + + + + + worker demo + + + +

Worker Demo

+
+
+ Animation: + +
+
+ State: - + + +
+
+
+
+ + + diff --git a/web-workers/animation-worker/worker.js b/web-workers/animation-worker/worker.js new file mode 100644 index 0000000..0f1f58e --- /dev/null +++ b/web-workers/animation-worker/worker.js @@ -0,0 +1,9 @@ +self.onmessage = function (e) { + let length = e.data.length; + for (let i = 0; i < length; i++) { + for (let j = i + 1; j < length; j++) { + for (let k = j + 1; k < length; k++) {} + } + } + self.postMessage("done"); +}; diff --git a/web-workers/communication-shared-worker/README.md b/web-workers/communication-shared-worker/README.md new file mode 100644 index 0000000..bd8f8e5 --- /dev/null +++ b/web-workers/communication-shared-worker/README.md @@ -0,0 +1,15 @@ +# Shared Worker Demo + +This demo demonstrates how to enable communication between multiple same-origin tabs using a `Shared Worker`. + +## showcase + +[Open the home page](https://mdn.github.io/dom-examples/web-workers/shared-worker/index.html) +[Open the user1 page](https://mdn.github.io/dom-examples/web-workers/index1.html) +[Open the user2 page](https://mdn.github.io/dom-examples/web-workers/index2.html) + +## description + +1. Open the home page. +2. Open the user1 page and the user2 page, then post comments on each page separately. +3. On the home page, you can view all the comments. On the user1 page, you can see comments from both user1 and user2. Similarly, on the user2 page, you can see comments from both user2 and user1. diff --git a/web-workers/communication-shared-worker/index.html b/web-workers/communication-shared-worker/index.html new file mode 100644 index 0000000..5eeafc9 --- /dev/null +++ b/web-workers/communication-shared-worker/index.html @@ -0,0 +1,29 @@ + + + + + + Shared Worker Demo + + + +
+

Shared Worker Demo

+
+

home page

+
+

All comments:

+
+
+
+ + + diff --git a/web-workers/communication-shared-worker/index1.html b/web-workers/communication-shared-worker/index1.html new file mode 100644 index 0000000..64c8905 --- /dev/null +++ b/web-workers/communication-shared-worker/index1.html @@ -0,0 +1,35 @@ + + + + + + Shared Worker Demo + + + +
+

Shared Worker Demo

+
+

Username: user1

+
+ + + +
+
+

Result:

+

+
+
+
+ + + diff --git a/web-workers/communication-shared-worker/index2.html b/web-workers/communication-shared-worker/index2.html new file mode 100644 index 0000000..981c35c --- /dev/null +++ b/web-workers/communication-shared-worker/index2.html @@ -0,0 +1,35 @@ + + + + + + Shared Worker Demo + + + +
+

Shared Worker Demo

+
+

Username: user2

+
+ + + +
+
+

Result:

+

+
+
+
+ + + diff --git a/web-workers/communication-shared-worker/postMessage.js b/web-workers/communication-shared-worker/postMessage.js new file mode 100644 index 0000000..e0c185e --- /dev/null +++ b/web-workers/communication-shared-worker/postMessage.js @@ -0,0 +1,21 @@ +const username = document.querySelector("#user").textContent; +const comment = document.querySelector("#comment"); +const post = document.querySelector("#post"); +const result = document.querySelector("#result"); + +if (window.SharedWorker) { + const sharedWorker = new SharedWorker("sharedWorker.js"); + sharedWorker.port.start(); + + post.onclick = function () { + const message = comment.value; + sharedWorker.port.postMessage({ + username, + message, + }); + }; + sharedWorker.port.onmessage = function (e) { + console.log(e.data); + result.textContent = e.data; + }; +} diff --git a/web-workers/communication-shared-worker/receiveMessage.js b/web-workers/communication-shared-worker/receiveMessage.js new file mode 100644 index 0000000..a7b446f --- /dev/null +++ b/web-workers/communication-shared-worker/receiveMessage.js @@ -0,0 +1,11 @@ +const comment = document.querySelector("#comments"); + +if (window.SharedWorker) { + const sharedWorker = new SharedWorker("sharedWorker.js"); + sharedWorker.port.start(); + sharedWorker.port.onmessage = function (e) { + const p = document.createElement("p"); + p.textContent = e.data; + comment.appendChild(p); + }; +} diff --git a/web-workers/communication-shared-worker/sharedWorker.js b/web-workers/communication-shared-worker/sharedWorker.js new file mode 100644 index 0000000..8804951 --- /dev/null +++ b/web-workers/communication-shared-worker/sharedWorker.js @@ -0,0 +1,15 @@ +const ports = []; +onconnect = function (e) { + const port = e.ports[0]; + ports.push(port); + port.onmessage = function (e) { + ports.forEach((p) => { + if (p !== port) + p.postMessage(e.data.username + " posted a message: " + e.data.message); + else + p.postMessage( + "You have successfully posted a message: " + e.data.message + ); + }); + }; +};