mdn · 011015 · Jan 13, 2025
@@ -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.
@@ -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";
+};
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>worker demo</title>
+    <style>
+      #box {
+        width: 100px;
+        height: 100px;
+        background-color: pink;
+      }
+      .container {
+        padding: 5px;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Worker Demo</h1>
+    <div class="container">
+      <div>
+        <span>Animation: </span>
+        <button id="start">start</button> <button id="stop">stop</button>
+      </div>
+      <div>
+        <span>State: </span><span id="state">-</span>
+        <button id="block">block</button>
+        <button id="performance">Optimize</button>
+      </div>
+    </div>
+    <div id="box"></div>
+    <div id="element"></div>
+    <script src="animation.js"></script>
+  </body>
+</html>
@@ -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");
+};
@@ -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.
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Shared Worker Demo</title>
+    <style>
+      .main > h1 {
+        text-align: center;
+      }
+      .main > div {
+        width: 70vw;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="main">
+      <h1>Shared Worker Demo</h1>
+      <div>
+        <h2>home page</h2>
+        <div id="comments">
+          <h3>All comments:</h3>
+        </div>
+      </div>
+    </div>
+    <script src="receiveMessage.js"></script>
+  </body>
+</html>
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Shared Worker Demo</title>
+    <style>
+      .main > h1 {
+        text-align: center;
+      }
+      .main > div {
+        width: 70vw;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="main">
+      <h1>Shared Worker Demo</h1>
+      <div>
+        <h2>Username: <span id="user">user1</span></h2>
+        <div>
+          <label for="comment">Post a comment: </label>
+          <input type="textarea" id="comment" />
+          <button id="post">post</button>
+        </div>
+        <div>
+          <p>Result:</p>
+          <p id="result"></p>
+        </div>
+      </div>
+    </div>
+    <script src="postMessage.js"></script>
+  </body>
+</html>
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Shared Worker Demo</title>
+    <style>
+      .main > h1 {
+        text-align: center;
+      }
+      .main > div {
+        width: 70vw;
+        margin: 0 auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="main">
+      <h1>Shared Worker Demo</h1>
+      <div>
+        <h2>Username: <span id="user">user2</span></h2>
+        <div>
+          <label for="comment">Post a comment: </label>
+          <input type="textarea" id="comment" />
+          <button id="post">post</button>
+        </div>
+        <div>
+          <p>Result:</p>
+          <p id="result"></p>
+        </div>
+      </div>
+    </div>
+    <script src="postMessage.js"></script>
+  </body>
+</html>
@@ -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;
+  };
+}
@@ -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);
+  };
+}
@@ -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
+        );
+    });
+  };
+};