JavaScript执行长耗时计算触发网站无响应提示的解决方法

浏览器JS运行在主线程上，这个线程同时负责DOM渲染、用户交互事件响应。当同步执行的JS连续运行时间超过浏览器阈值（通常为50ms以上，不同浏览器阈值有差异），主线程无法响应交互和刷新请求，就会触发“页面无响应”提示。排列生成逻辑属于CPU密集型计算，同步执行时很容易触发这个阈值。

方案1：Web Worker 独立线程计算（优先推荐） #

这是纯计算类长任务的最优解，Web Worker运行在和主线程完全隔离的独立线程，计算过程完全不会阻塞主线程的渲染和交互，不管跑多久都不会触发无响应提示。

• 实现步骤：
  • 将排列生成的核心逻辑抽离到独立的JS文件（Worker文件）中，在Worker内部接收主线程传入的参数，完成计算后将结果回传给主线程
  • 主线程初始化Worker实例，传入计算参数，监听Worker回传的结果，拿到结果后再做页面渲染
• 代码示例：
  Worker文件（perm.worker.js）：

// 核心排列生成逻辑和你原有写法完全一致，不需要修改算法
function genPerm(arr) {
  const result = []
  const backtrack = (path, used) => {
    if (path.length === arr.length) {
      result.push([...path])
      return
    }
    for (let i = 0; i < arr.length; i++) {
      if (used[i]) continue
      used[i] = true
      path.push(arr[i])
      backtrack(path, used)
      path.pop()
      used[i] = false
    }
  }
  backtrack([], new Array(arr.length).fill(false))
  return result
}

// 接收主线程消息，触发计算
self.onmessage = (e) => {
  const input = e.data
  const permResult = genPerm(input)
  self.postMessage(permResult)
}

主线程调用代码：

// 初始化Worker
const worker = new Worker('./perm.worker.js')
// 传入计算参数
worker.postMessage(/* 生成排列的原始数据源 */)
// 接收计算结果
worker.onmessage = (e) => {
  const finalResult = e.data
  // 在这里执行结果渲染逻辑
  worker.terminate() // 计算完成后销毁Worker释放资源
}

• 注意事项：Worker上下文无法访问window、document对象，不能直接操作DOM，仅适合放纯计算逻辑；如果传输的结果数据量极大，可以用Transferable Objects转移数据所有权，降低序列化开销。

方案2：时间分片异步调度（无需额外文件） #

如果不想拆分独立Worker文件，可以把原本同步连续执行的计算逻辑拆成多个小任务块，每执行完一个块就主动让出主线程，让浏览器先处理渲染和交互，再继续执行后续计算，避免出现连续的长任务阻塞。
你之前觉得排列逻辑无法拆分，本质是同步递归/循环的写法无法中断，只要把执行步骤拆成可调度的任务单元即可实现分片，参考实现：

async function genPermAsync(arr, chunkSize = 800) {
  const result = []
  const taskList = []

  const backtrack = (path, used) => {
    if (path.length === arr.length) {
      result.push([...path])
      return
    }
    for (let i = 0; i < arr.length; i++) {
      if (used[i]) continue
      // 把每一步计算封装成任务存入队列
      taskList.push(() => {
        used[i] = true
        path.push(arr[i])
        backtrack(path, used)
        path.pop()
        used[i] = false
      })
    }
  }
  backtrack([], new Array(arr.length).fill(false))

  // 分片执行任务
  while (taskList.length) {
    const currentChunk = taskList.splice(0, chunkSize)
    currentChunk.forEach(task => task())
    // 让出主线程，等待下一个事件循环再继续计算
    await new Promise(resolve => setTimeout(resolve, 0))
  }
  return result
}

调用时直接用await genPermAsync(数据源)即可拿到结果，整个计算过程不会阻塞主线程。这个方案的缺点是总计算耗时会比纯同步执行略高，存在调度开销。

方案3：WebAssembly 加速计算（大计算量场景可选） #

如果排列的量级极大，比如原始数组长度超过10，可以把核心排列生成逻辑用Rust/C等语言实现后编译为WebAssembly，WASM的计算效率远高于纯JS，通常可以把数秒的计算压缩到数百毫秒内，达不到浏览器触发无响应的阈值，自然不会弹出提示。这个方案改造成本最高，仅适合对计算性能要求极高的场景。

注意：不要用空while循环等同步等待的方式尝试规避提示，这类写法依然会占满主线程，完全无法解决阻塞问题。

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