refactor: optimize queue job (#4859)

* refactor: optimize queue job

* fix: gemini suggestion and test

* refactor: cancelScheduleJob and SCHEDULE_MODE constant

Author: GaoFuhong

__tests__/renderer/queueJob.spec.ts

@@ -195,6 +195,7 @@ describe('JobQueue', () => {
       jobQueue['isFlushing'] = true
       jobQueue['isFlushPending'] = true
       jobQueue['scheduleId'] = 1
+      jobQueue['scheduleMode'] = 'idle'
 
       jobQueue.clearJobs()
 
@@ -293,7 +294,7 @@ describe('JobQueue', () => {
     })
 
     it('should handle errors in job callbacks', () => {
-      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
       const error = new Error('Test error')
       const job: Job = {
         id: '1',
@@ -379,6 +380,96 @@ describe('JobQueue', () => {
     })
   })
 
+  // Additional tests aligned with current JobQueue behavior
+  describe('queueJob - dedup and priority reorder', () => {
+    it('deduplicates by id and updates callback without growing queue', () => {
+      const cb1 = vi.fn()
+      const cb2 = vi.fn()
+      const job1: Job = { id: 'dup', priority: JOB_PRIORITY.Update, cb: cb1 }
+      const job2: Job = { id: 'dup', priority: JOB_PRIORITY.Update, cb: cb2 }
+
+      jobQueue.queueJob(job1)
+      jobQueue.queueJob(job2)
+
+      expect(jobQueue['queue'].length).toBe(1)
+      expect(jobQueue['queue'][0].cb).toBe(cb2)
+
+      jobQueue.flushJobsSync()
+      expect(cb1).not.toHaveBeenCalled()
+      expect(cb2).toHaveBeenCalled()
+    })
+
+    it('re-orders existing job when its priority changes', () => {
+      const cb = vi.fn()
+      const edgeJob: Job = {
+        id: 'e',
+        priority: JOB_PRIORITY.RenderEdge,
+        cb: vi.fn(),
+      }
+      const updateJob: Job = { id: 'u', priority: JOB_PRIORITY.Update, cb }
+
+      jobQueue.queueJob(edgeJob)
+      jobQueue.queueJob(updateJob)
+
+      const upgraded: Job = { id: 'u', priority: JOB_PRIORITY.RenderNode, cb }
+      jobQueue.queueJob(upgraded)
+
+      expect(jobQueue['queue'][0].id).toBe('u')
+      expect(jobQueue['queue'][0].priority).toBe(JOB_PRIORITY.RenderNode)
+      expect(jobQueue['queue'][1].id).toBe('e')
+    })
+  })
+
+  describe('flushJobs - idle deadline budget', () => {
+    it('caps budget using idle deadline timeRemaining', () => {
+      const mockCb1 = vi.fn()
+      const mockCb2 = vi.fn()
+      jobQueue.queueJob({ id: '1', priority: JOB_PRIORITY.Update, cb: mockCb1 })
+      jobQueue.queueJob({ id: '2', priority: JOB_PRIORITY.Update, cb: mockCb2 })
+
+      const fakeDeadline = { timeRemaining: () => 5 } as any
+      mockPerformanceNow
+        .mockImplementationOnce(() => 0)
+        .mockImplementationOnce(() => 6)
+
+      jobQueue.flushJobs(fakeDeadline)
+
+      expect(mockCb1).toHaveBeenCalled()
+      expect(mockCb2).not.toHaveBeenCalled()
+      expect(jobQueue['isFlushPending']).toBe(true)
+      expect(jobQueue['isFlushing']).toBe(false)
+    })
+  })
+
+  describe('cancelScheduleJob - modes', () => {
+    it('cancels RAF schedule when mode is raf', () => {
+      let cancelRAFSpy: any
+      if ('cancelAnimationFrame' in window) {
+        cancelRAFSpy = vi.spyOn(window, 'cancelAnimationFrame')
+      } else {
+        const mock = vi.fn()
+        Object.defineProperty(window, 'cancelAnimationFrame', { value: mock })
+        cancelRAFSpy = vi.spyOn(window, 'cancelAnimationFrame' as any)
+      }
+
+      jobQueue['scheduleMode'] = 'raf'
+      jobQueue['scheduleId'] = 1
+
+      jobQueue.clearJobs()
+
+      expect(cancelRAFSpy).toHaveBeenCalled()
+    })
+
+    it('cancels timeout schedule when mode is timeout', () => {
+      jobQueue['scheduleMode'] = 'timeout'
+      jobQueue['scheduleId'] = 1
+
+      jobQueue.clearJobs()
+
+      expect(mockClearTimeout).toHaveBeenCalled()
+    })
+  })
+
   describe('getCurrentTime', () => {
     it('should use performance.now if available', () => {
       mockPerformanceNow.mockReturnValue(1000)

src/renderer/queueJob.ts

@@ -1,18 +1,42 @@
+const SCHEDULE_MODE = {
+  idle: 'idle',
+  raf: 'raf',
+  timeout: 'timeout',
+} as const
+
+type ScheduleMode = (typeof SCHEDULE_MODE)[keyof typeof SCHEDULE_MODE]
+
 export class JobQueue {
   private isFlushing = false
   private isFlushPending = false
   private scheduleId = 0
   private queue: Job[] = []
-  private frameInterval = 33
+  private frameInterval = 16
   private initialTime = Date.now()
+  private pendingJobs = new Map<string, Job>()
+  private scheduleMode: ScheduleMode | null = null
 
   queueJob(job: Job) {
     if (job.priority & JOB_PRIORITY.PRIOR) {
       job.cb()
     } else {
-      const index = this.findInsertionIndex(job)
-      if (index >= 0) {
+      const existing = this.pendingJobs.get(job.id)
+      if (existing) {
+        // 仅更新已有任务的回调与优先级
+        existing.cb = job.cb
+        if (job.priority !== existing.priority) {
+          existing.priority = job.priority
+          const idx = this.queue.indexOf(existing)
+          if (idx >= 0) {
+            this.queue.splice(idx, 1)
+            const newIndex = this.findInsertionIndex(existing)
+            this.queue.splice(newIndex, 0, existing)
+          }
+        }
+      } else {
+        const index = this.findInsertionIndex(job)
         this.queue.splice(index, 0, job)
+        this.pendingJobs.set(job.id, job)
       }
     }
   }
@@ -33,21 +57,29 @@ export class JobQueue {
 
   clearJobs() {
     this.queue.length = 0
+    this.pendingJobs.clear()
     this.isFlushing = false
     this.isFlushPending = false
     this.cancelScheduleJob()
   }
 
-  flushJobs() {
+  flushJobs(deadline?: IdleDeadline) {
     this.isFlushPending = false
     this.isFlushing = true
 
     const startTime = this.getCurrentTime()
+    let budget = this.frameInterval
+    if (deadline && typeof deadline.timeRemaining === 'function') {
+      const remain = deadline.timeRemaining()
+      // 防止过长占用单帧
+      budget = Math.max(0, Math.min(budget, remain))
+    }
 
-    let job
-    while ((job = this.queue.shift())) {
+    while (this.queue.length > 0) {
+      const job = this.queue.shift()!
       job.cb()
-      if (this.getCurrentTime() - startTime >= this.frameInterval) {
+      this.pendingJobs.delete(job.id)
+      if (this.getCurrentTime() - startTime >= budget) {
         break
       }
     }
@@ -63,14 +95,14 @@ export class JobQueue {
     this.isFlushPending = false
     this.isFlushing = true
 
-    let job
-    while ((job = this.queue.shift())) {
+    while (this.queue.length > 0) {
+      const job = this.queue.shift()!
       try {
         job.cb()
       } catch (error) {
-        // eslint-disable-next-line
-        console.log(error)
+        console.error(error)
       }
+      this.pendingJobs.delete(job.id)
     }
 
     this.isFlushing = false
@@ -94,33 +126,42 @@ export class JobQueue {
   }
 
   private scheduleJob() {
+    if (this.scheduleId) {
+      this.cancelScheduleJob()
+    }
     if ('requestIdleCallback' in window) {
-      if (this.scheduleId) {
-        this.cancelScheduleJob()
-      }
-      this.scheduleId = window.requestIdleCallback(this.flushJobs.bind(this), {
-        timeout: 100,
-      })
+      this.scheduleMode = SCHEDULE_MODE.idle
+      this.scheduleId = window.requestIdleCallback(
+        (deadline: IdleDeadline) => this.flushJobs(deadline),
+        {
+          timeout: 100,
+        },
+      )
+    } else if ('requestAnimationFrame' in window) {
+      this.scheduleMode = SCHEDULE_MODE.raf
+      this.scheduleId = (window as Window).requestAnimationFrame(() =>
+        this.flushJobs(),
+      )
     } else {
-      if (this.scheduleId) {
-        this.cancelScheduleJob()
-      }
-      this.scheduleId = (window as Window).setTimeout(this.flushJobs.bind(this))
+      this.scheduleMode = SCHEDULE_MODE.timeout
+      this.scheduleId = (window as Window).setTimeout(() => this.flushJobs())
     }
   }
 
   private cancelScheduleJob() {
-    if ('cancelIdleCallback' in window) {
-      if (this.scheduleId) {
-        window.cancelIdleCallback(this.scheduleId)
-      }
-      this.scheduleId = 0
-    } else {
-      if (this.scheduleId) {
-        clearTimeout(this.scheduleId)
-      }
-      this.scheduleId = 0
+    if (!this.scheduleId) return
+    const cancelMethods: Partial<Record<ScheduleMode, (id: number) => void>> = {
+      [SCHEDULE_MODE.idle]: window?.cancelIdleCallback,
+      [SCHEDULE_MODE.raf]: window?.cancelAnimationFrame,
+      [SCHEDULE_MODE.timeout]: window?.clearTimeout,
+    }
+    const mode = this.scheduleMode
+    const cancelMethod = mode ? cancelMethods[mode] : undefined
+    if (typeof cancelMethod === 'function') {
+      cancelMethod(this.scheduleId as number)
     }
+    this.scheduleId = 0
+    this.scheduleMode = null
   }
 
   private getCurrentTime() {
@@ -145,20 +186,3 @@ export enum JOB_PRIORITY {
   RenderNode = /**/ 1 << 3,
   PRIOR = /*     */ 1 << 20,
 }
-
-// function findInsertionIndex(job: Job) {
-//   let start = 0
-//   for (let i = 0, len = queue.length; i < len; i += 1) {
-//     const j = queue[i]
-//     if (j.id === job.id) {
-//       console.log('xx', j.bit, job.bit)
-//     }
-//     if (j.id === job.id && (job.bit ^ (job.bit & j.bit)) === 0) {
-//       return -1
-//     }
-//     if (j.priority <= job.priority) {
-//       start += 1
-//     }
-//   }
-//   return start
-// }