处理浏览器端长时间执行JavaScript脚本的两种优化方式：定时器和worker

最新推荐文章于 2025-07-13 20:38:46 发布

原创最新推荐文章于 2025-07-13 20:38:46 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

jsvascript 同时被 2 个专栏收录

40 篇文章

订阅专栏

性能优化

1 篇文章

订阅专栏

本文介绍了两种处理浏览器中长时间任务的技术：定时器方式和worker线程。定时器方式通过将任务分割并间隔执行来避免UI卡顿；worker线程则在独立于UI的新线程中运行长时间任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：定时器方式，把长时间的任务进行分割成一个数组，间隔一定的时间执行。

function timeProcessArray(items, process, callBack) {
  let todo = items.concat()
  setTimeout(function () {
    let time = +new Date()
    do {
      process(todo.shift())
    } while (todo.length && (+new Date() - time < 50))// 大于100毫秒时间就偏长了（UI线程会卡住，用户会感觉到卡顿），最好小于这个值
    if (todo.length) {
      setTimeout(arguments.callee, 25) // 考虑定时器的分辨率，window系统在定时器小于15秒IE会锁定，卡住UI进程
    } else {
      callBack(items)
    }
  }, 25)
}

第二种：worker，浏览器开启的一个新的线程，不涉及UI线程无关

// Worker运行环境有以下几部分组成：
   // 1. 一个navigator对象，只包含四个属性：appName，appVersion，userAgent和platform
   // 2. 一个location对象，（与window.location一样，不过属性只读）
  //  3. self对象，指向全局的worker对象
  //  4. 一个importScripts()方法，用来加载外部文件到worder
  //  5. 所以ECMAScript对象，如 object，array
  //  6. XMLHttpRequest构造器
  //  7. 定时器
  //  8. 一个close方法，它能立即停止worker运行

// Web Workers适用于那些纯数据处理，或者与UI无关的长时间运行脚本
let worker = new Worker('./p3.js')
worker.onmessage = function (event) {
  console.log(event.data)
}
worker.postMessage('zsn')

//p3

importScripts('p1.js', 'p2.js')
//该方法接受一个或多个JavaScript文件URL路径。importScripts的调用过程是阻塞式的，只有文件加载执行后，脚本才会继续运行
 //由于worker在UI线程之外运行，所以这种阻塞不会影响UI响应
self.onmessage = function (event) {
  self.postMessage('hello ' + event.data)
}