perf: improve unsub perf for deps with massive amount of subs

close #12696

Author: yyx990803

src/core/observer/dep.ts

@@ -1,9 +1,19 @@
-import { remove } from '../util/index'
 import config from '../config'
 import { DebuggerOptions, DebuggerEventExtraInfo } from 'v3'
 
 let uid = 0
 
+const pendingCleanupDeps: Dep[] = []
+
+export const cleanupDeps = () => {
+  for (let i = 0; i < pendingCleanupDeps.length; i++) {
+    const dep = pendingCleanupDeps[i]
+    dep.subs = dep.subs.filter(s => s)
+    dep._pending = false
+  }
+  pendingCleanupDeps.length = 0
+}
+
 /**
  * @internal
  */
@@ -21,7 +31,9 @@ export interface DepTarget extends DebuggerOptions {
 export default class Dep {
   static target?: DepTarget | null
   id: number
-  subs: Array<DepTarget>
+  subs: Array<DepTarget | null>
+  // pending subs cleanup
+  _pending = false
 
   constructor() {
     this.id = uid++
@@ -33,7 +45,15 @@ export default class Dep {
   }
 
   removeSub(sub: DepTarget) {
-    remove(this.subs, sub)
+    // #12696 deps with massive amount of subscribers are extremely slow to
+    // clean up in Chromium
+    // to workaround this, we unset the sub for now, and clear them on
+    // next scheduler flush.
+    this.subs[this.subs.indexOf(sub)] = null
+    if (!this._pending) {
+      this._pending = true
+      pendingCleanupDeps.push(this)
+    }
   }
 
   depend(info?: DebuggerEventExtraInfo) {
@@ -50,23 +70,23 @@ export default class Dep {
 
   notify(info?: DebuggerEventExtraInfo) {
     // stabilize the subscriber list first
-    const subs = this.subs.slice()
+    const subs = this.subs.filter(s => s) as DepTarget[]
     if (__DEV__ && !config.async) {
       // subs aren't sorted in scheduler if not running async
       // we need to sort them now to make sure they fire in correct
       // order
       subs.sort((a, b) => a.id - b.id)
     }
     for (let i = 0, l = subs.length; i < l; i++) {
+      const sub = subs[i]
       if (__DEV__ && info) {
-        const sub = subs[i]
         sub.onTrigger &&
           sub.onTrigger({
             effect: subs[i],
             ...info
           })
       }
-      subs[i].update()
+      sub.update()
     }
   }
 }

src/core/observer/scheduler.ts

@@ -1,6 +1,6 @@
 import type Watcher from './watcher'
 import config from '../config'
-import Dep from './dep'
+import Dep, { cleanupDeps } from './dep'
 import { callHook, activateChildComponent } from '../instance/lifecycle'
 
 import { warn, nextTick, devtools, inBrowser, isIE } from '../util/index'
@@ -121,6 +121,7 @@ function flushSchedulerQueue() {
   // call component updated and activated hooks
   callActivatedHooks(activatedQueue)
   callUpdatedHooks(updatedQueue)
+  cleanupDeps()
 
   // devtool hook
   /* istanbul ignore if */

src/shared/util.ts

@@ -133,7 +133,13 @@ export const isReservedAttribute = makeMap('key,ref,slot,slot-scope,is')
  * Remove an item from an array.
  */
 export function remove(arr: Array<any>, item: any): Array<any> | void {
-  if (arr.length) {
+  const len = arr.length
+  if (len) {
+    // fast path for the only / last item
+    if (item === arr[len - 1]) {
+      arr.length = len - 1
+      return
+    }
     const index = arr.indexOf(item)
     if (index > -1) {
       return arr.splice(index, 1)

test/unit/modules/observer/dep.spec.ts

@@ -1,4 +1,4 @@
-import Dep from 'core/observer/dep'
+import Dep, { cleanupDeps } from 'core/observer/dep'
 
 describe('Dep', () => {
   let dep
@@ -24,8 +24,13 @@ describe('Dep', () => {
 
   describe('removeSub()', () => {
     it('should remove sub', () => {
-      dep.subs.push(null)
-      dep.removeSub(null)
+      const sub = {}
+      dep.subs.push(sub)
+      dep.removeSub(sub)
+      expect(dep.subs.includes(sub)).toBe(false)
+
+      // nulled subs are cleared on next flush
+      cleanupDeps()
       expect(dep.subs.length).toBe(0)
     })
   })