Chrome中Worker内使用console.log重复打印消息的问题

嘿，我来帮你搞定这个Web Worker重复打印的问题！你说的情况挺有意思——新标签页打开时console.log('Foo bar!')会重复输出，刷新就正常，对吧？

问题根源 #

这其实是浏览器的预加载/预渲染机制在搞鬼！很多现代浏览器（比如Chrome）会在你打开新标签页的时候，提前预加载页面资源、甚至预渲染页面，为的是让你打开页面时更快。这时候浏览器可能会悄悄启动一次Worker，等你真正进入页面时又启动一次，所以就出现了两次日志。而刷新页面的时候，预加载机制不会触发，所以Worker只启动一次，日志也就只打一次。

解决办法 #

这里给你几个实用的方案，挑适合你的来用：

• 方案一：主线程加全局标记，避免重复创建Worker
  在main.js里加个全局变量判断，确保Worker只被实例化一次：

  // main.js
  if (!window.workerInstance) {
    window.workerInstance = new Worker('worker.js');
  }
  

  这样就算浏览器预渲染时创建了Worker，真正进入页面时因为已经有window.workerInstance了，就不会再创建第二次。

• 方案二：通过消息通信标记初始化状态
  让Worker启动时给主线程发个消息，主线程记录是否已经初始化过，避免重复创建：

  // main.js
  let isWorkerInitialized = false;
  if (!isWorkerInitialized) {
    const worker = new Worker('worker.js');
    worker.onmessage = (e) => {
      if (e.data === 'worker-ready') {
        isWorkerInitialized = true;
      }
    };
  }
  
  // worker.js
  console.log('Foo bar!');
  self.postMessage('worker-ready');
  

• 方案三：禁用浏览器预渲染（不推荐）
  可以在HTML里加meta标签禁用预渲染，但这会影响页面加载速度，所以除非必要不建议用：

  <meta name="prerender" content="no">
  

总结 #

本质上就是浏览器的预优化机制导致Worker被实例化了两次，只要加个简单的判断确保Worker只创建一次，就能解决这个问题啦。

内容的提问来源于stack exchange，提问作者doubleOrt