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)
  })
  })