update

Author: MuGuiLin

Web-API/Worker-JS多线程运行环境/Web Worker/Web Worker应用场景-阶乘求和计算.html

@@ -53,7 +53,7 @@ <h1>Web Worker应用场景-阶乘求和计算</h1>
  const workerjs = `
  // 监听来自主线程的消息
  self.onmessage = function (event) {
- console.log("\n\nWorker：收到计算任务 ->", event.data.loopNumber, typeof event.data.loopNumber);
+ console.log("Worker：收到计算任务 ->", event.data.loopNumber, typeof event.data.loopNumber);
 
  if (typeof event.data.loopNumber !== "number") {
  self.postMessage("对不起：loopNumber参数必须是数字！");
@@ -75,35 +75,21 @@ <h1>Web Worker应用场景-阶乘求和计算</h1>
  self.close();
  console.log("Worker：关闭自己！");
  };
- `;
+ `;
+ 
 
  // main.js (主线程代码)
  let worker = null;
  const $result = document.querySelector("#result");
  const $takeTime = document.querySelector("#takeTime");
  document.getElementById("btn").addEventListener("click", function () {
  let start_time = "";
- const simpleWorker = `
- self.onmessage = function(e) {
- self.postMessage("Hello from worker!");
- };
- `;
 
- try {
- const worker = new Worker(new Blob([simpleWorker], { type: "application/javascript" }));
- worker.onmessage = function(e) {
- console.log(e.data); // 应该输出 "Hello from worker!"
- worker.terminate();
- };
- worker.postMessage("");
- } catch(e) {
- console.error("Simple worker test failed:", e);
- }
  // 创建一个新的 Worker
  // worker = new Worker("worker.js");
- // const worker = new Worker(new URL('./worker.js', import.meta.url));
- worker = new Worker(new Blob([workerjs], { type: "application/javascript" })); // 使用 Blob 对象 来创建 Worker线程，这样就不用去加载外部的worker.js文件，就可以避免 CORS 问题了！！
-
+ // worker = new Worker(new URL('./worker.js', import.meta.url)); // 在Vue.js中加载worker.js文件
+ // worker = new Worker(new Blob([workerjs], {type: "application/javascript"})); // 使用 Blob 对象 来创建 Worker线程，这样就不用去加载外部的worker.js文件，就可以避免 CORS 问题了！！
+ worker = new Worker(URL.createObjectURL(new Blob([workerjs], {type: "application/javascript"}))); // 注意：由于Content Security Policy (CSP)限制导致的。现代浏览器出于安全考虑，可能会阻止通过Blob URL创建Web Worker。
  // 监听来自 Worker 的消息
  worker.onmessage = function (event) {
  // event.data 是 Worker 返回的结果

Web-API/Worker-JS多线程运行环境/Web Worker/使用Blob加载workerJs文件.html

@@ -11,9 +11,7 @@
  <h1>使用Blob加载workerJs文件</h1>
  <hr />
  <h3>
- 注意：由于Content Security Policy
- (CSP)限制导致的。现代浏览器出于安全考虑，可能会阻止通过Blob URL创建Web
- Worker。
+ 注意：由于Content Security Policy (CSP)限制导致的。现代浏览器出于安全考虑，可能会阻止通过Blob URL创建Web Worker。
  </h3>
  <script>
  const simpleWorker = `
@@ -23,15 +21,15 @@ <h3>
  };
  `;
  console.log("workerJs字符串代码：", simpleWorker);
- 
+
  try {
  // 开始创建Worker
  const blob = new Blob([simpleWorker], {
  type: "application/javascript",
  });
  const workerUrl = URL.createObjectURL(blob);
  const worker = new Worker(workerUrl);
- 
+
  // Worker创建成功，监听Worker返回消息
  worker.onmessage = function (e) {
  console.log("收到线程simpleWorker返回的信息：", e.data);

Web-API/Worker-JS多线程运行环境/Worker-JS多线程运行环境.md

@@ -303,7 +303,7 @@ registerPaint(
 
 Worklet 将 Web 的可编程性带入了一个新的维度，它让我们有能力去干预和定制浏览器最底层的渲染行为，这是过去无法想象的。
 
-## 总结
+## 4、总结
 
 回顾一下今天我们认识的这些“工人们”：
 
@@ -321,7 +321,7 @@ Worklet 将 Web 的可编程性带入了一个新的维度，它让我们有能
 
 
 
-## 推荐链接
+## 5、推荐链接
 
 - [Web Worker 使用教程 - 阮一峰](https://link.juejin.cn?target=https%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2018%2F07%2Fweb-worker.html)
 - [WebWorker 与 ServiceWorker - free-coder](https://link.juejin.cn?target=https%3A%2F%2Fwww.bilibili.com%2Fvideo%2FBV1j44y1w7v1)