{"parents":["7b9a8e98439fc31d0fe4b4e3b50b8afb4d4af3db"],"commit":{"subject":"Throttle bridge traffic for Elements tree updates","revision":"d02b4a27842228945c71b6043b5ba145f5c41b41","authorEmail":"bvaughn@fb.com","authoredAt":"2019-01-23T08:27:40-08:00","authorName":"Brian Vaughn","shortRevision":"d02b4a2784"},"patch":"diff --git a\/shells\/dev\/app\/ElementTypes\/index.js b\/shells\/dev\/app\/ElementTypes\/index.js\nindex e9de79cc72..3cf320747e 100644\n--- a\/shells\/dev\/app\/ElementTypes\/index.js\n+++ b\/shells\/dev\/app\/ElementTypes\/index.js\n@@ -8,12 +8,13 @@ import React, {\n Component,\n ConcurrentMode,\n Fragment,\n+ \/\/ $FlowFixMe Flow doesn't know about the Profiler import yet\n Profiler,\n StrictMode,\n Suspense,\n } from 'react';\n \n-class ClassComponent extends Component {\n+class ClassComponent extends Component {\n render() {\n return null;\n }\ndiff --git a\/src\/backend\/agent.js b\/src\/backend\/agent.js\nindex 8bac8b99c4..d15cf67ec0 100644\n--- a\/src\/backend\/agent.js\n+++ b\/src\/backend\/agent.js\n@@ -9,14 +9,28 @@ import type {Fiber, RendererData, RendererID, RendererInterface} from '.\/types';\n import type {Bridge} from '..\/types';\n import type {Element} from 'src\/devtools\/types';\n \n+const debug = (methodName, ...args) => {\n+ \/\/console.log(`%cAgent %c${methodName}`, 'color: blue; font-weight: bold;', 'font-weight: bold;', ...args);\n+};\n+\n+const THROTTLE_BY_MS = 350;\n+\n export default class Agent extends EventEmitter {\n- fiberToID: WeakMap = new WeakMap();\n- idToElement: Map = new Map();\n- idToFiber: Map = new Map();\n- idToRendererData: Map = new Map();\n- idToRendererID: Map = new Map();\n- rendererInterfaces: {[key: RendererID]: RendererInterface} = {};\n- roots: Set = new Set();\n+ _fiberToID: WeakMap = new WeakMap();\n+ _idToElement: Map = new Map();\n+ _idToFiber: Map = new Map();\n+ _idToRendererData: Map = new Map();\n+ _idToRendererID: Map = new Map();\n+ _isRenderInProgress: boolean = false;\n+ _rendererInterfaces: {[key: RendererID]: RendererInterface} = {};\n+ _roots: Set = new Set();\n+\n+ \/\/ Tree updates are debounced to reduce bridge traffic and improve performance.\n+ \/\/ This reduces the potential negative impact that DevTools has on React performance.\n+ \/\/ Eventual consistency is good enough for the Elements tree.\n+ _lastCrawlTime: number = -THROTTLE_BY_MS;\n+ _pendingRoots: Set = new Set();\n+ _pendingRootTimeoutID: TimeoutID | null = null;\n \n addBridge(bridge: Bridge) {\n \/\/ TODO Listen to bridge for things like selection.\n@@ -30,25 +44,25 @@ export default class Agent extends EventEmitter {\n }\n \n setRendererInterface(rendererID: RendererID, rendererInterface: RendererInterface) {\n- this.rendererInterfaces[rendererID] = rendererInterface;\n+ this._rendererInterfaces[rendererID] = rendererInterface;\n }\n \n _getId(fiber: Fiber): string {\n if (typeof fiber !== 'object' || !fiber) {\n return fiber;\n }\n- if (!this.fiberToID.has(fiber)) {\n- this.fiberToID.set(fiber, guid());\n- this.idToFiber.set(\n- nullthrows(this.fiberToID.get(fiber)),\n+ if (!this._fiberToID.has(fiber)) {\n+ this._fiberToID.set(fiber, guid());\n+ this._idToFiber.set(\n+ nullthrows(this._fiberToID.get(fiber)),\n fiber\n );\n }\n- return nullthrows(this.fiberToID.get(fiber));\n+ return nullthrows(this._fiberToID.get(fiber));\n }\n \n _crawl(parent: Element, id: string): void {\n- const data: RendererData = ((this.idToRendererData.get(id): any): RendererData);\n+ const data: RendererData = ((this._idToRendererData.get(id): any): RendererData);\n if (data.type === ElementTypeOtherOrUnknown) {\n data.children.forEach(childFiber => {\n if (childFiber !== null) {\n@@ -62,8 +76,28 @@ export default class Agent extends EventEmitter {\n }\n }\n \n+ _crawlPendingRoots(): void {\n+console.log('_crawlPendingRoots', this._pendingRoots)\n+ this._pendingRoots.forEach(id => this._crawlRoot(id));\n+ this._pendingRoots.clear();\n+ this._lastCrawlTime = performance.now();\n+ }\n+\n+ _crawlRoot(id: string): void {\n+ const data = ((this._idToRendererData.get(id): any): RendererData);\n+\n+ \/\/ TODO: Can we use the effects list on update for a faster path?\n+ this._createOrUpdateElement(id, data);\n+\n+ if (!this._roots.has(id)) {\n+ this._roots.add(id);\n+ debug('emit(\"root\")', id);\n+ this.emit('root', id);\n+ }\n+ }\n+\n _createOrUpdateElement(id: string, data: RendererData): void {\n- const prevElement: ?Element = this.idToElement.get(id);\n+ const prevElement: ?Element = this._idToElement.get(id);\n const nextElement: Element = {\n id,\n key: data.key,\n@@ -72,7 +106,7 @@ export default class Agent extends EventEmitter {\n type: data.type,\n };\n \n- this.idToElement.set(id, nextElement);\n+ this._idToElement.set(id, nextElement);\n \n data.children.forEach(childFiber => {\n if (childFiber !== null) {\n@@ -81,57 +115,66 @@ export default class Agent extends EventEmitter {\n });\n \n if (prevElement == null) {\n-console.log('%cAgent%c emit(\"mount\")', 'color: blue; font-weight: bold;', 'font-weight: bold;', id, nextElement)\n+ debug('emit(\"mount\")', id, nextElement)\n this.emit('mount', nextElement);\n } else if (!areElementsEqual(prevElement, nextElement)) {\n-console.log('%cAgent%c emit(\"update\")', 'color: blue; font-weight: bold;', 'font-weight: bold;', id, nextElement)\n+ debug('emit(\"update\")', id, nextElement);\n this.emit('update', nextElement);\n }\n }\n \n+ _maybeCrawlRoot = () => {\n+ this._pendingRootTimeoutID = null;\n+ if (!this._isRenderInProgress) {\n+ this._crawlPendingRoots();\n+ }\n+ };\n+\n onHookMount = ({data, fiber, renderer}: {data: RendererData, fiber: Fiber, renderer: RendererID}) => {\n const id = this._getId(fiber);\n \n- this.idToRendererData.set(id, data);\n- this.idToRendererID.set(id, renderer);\n+ this._idToRendererData.set(id, data);\n+ this._idToRendererID.set(id, renderer);\n };\n \n onHookRootCommitted = ({data, fiber, renderer}: {data: RendererData, fiber: Fiber, renderer: RendererID}) => {\n const id = this._getId(fiber);\n-console.log('%cAgent%c onHookRootCommitted()', 'color: blue; font-weight: bold;', 'font-weight: bold;', id);\n-\n- this._createOrUpdateElement(id, data);\n \n- if (!this.roots.has(id)) {\n- this.roots.add(id);\n+ this._isRenderInProgress = false;\n+ this._pendingRoots.add(id);\n \n- this.emit('root', id);\n+ const delta = performance.now() - this._lastCrawlTime;\n+ if (delta >= THROTTLE_BY_MS) {\n+ this._crawlPendingRoots();\n+ } else if (this._pendingRootTimeoutID === null) {\n+ this._pendingRootTimeoutID = setTimeout(this._maybeCrawlRoot, THROTTLE_BY_MS - delta);\n }\n };\n \n onHookUnmount = ({fiber}: {fiber: Fiber}) => {\n const id = this._getId(fiber);\n \n- if (this.roots.has(id)) {\n- this.roots.delete(id);\n+ if (this._roots.has(id)) {\n+ this._roots.delete(id);\n this.emit('rootUnmounted', id);\n }\n \n- if (this.idToElement.has(id)) {\n- this.idToElement.delete(id);\n-console.log('%cAgent%c emit(\"unmount\")', 'color: blue; font-weight: bold;', 'font-weight: bold;', id)\n+ if (this._idToElement.has(id)) {\n+ this._idToElement.delete(id);\n+ debug('emit(\"unmount\")', id);\n this.emit('unmount', id);\n }\n \n- this.fiberToID.delete(fiber);\n- this.idToRendererData.delete(id);\n- this.idToRendererID.delete(id);\n+ this._fiberToID.delete(fiber);\n+ this._idToRendererData.delete(id);\n+ this._idToRendererID.delete(id);\n };\n \n onHookUpdate = ({data, fiber}: {data: RendererData, fiber: Fiber}) => {\n const id = this._getId(fiber);\n \n- this.idToRendererData.set(id, data);\n+ this._isRenderInProgress = true;\n+ this._idToRendererData.set(id, data);\n };\n }\n \ndiff --git a\/src\/devtools\/store.js b\/src\/devtools\/store.js\nindex 265e90f3db..b97394a3ab 100644\n--- a\/src\/devtools\/store.js\n+++ b\/src\/devtools\/store.js\n@@ -5,6 +5,10 @@ import EventEmitter from 'events';\n import type { Element } from '.\/types';\n import type { Bridge } from '..\/types';\n \n+const debug = (methodName, ...args) => {\n+ \/\/console.log(`%cAgent %c${methodName}`, 'color: red; font-weight: bold;', 'font-weight: bold;', ...args);\n+};\n+\n \/**\n * The store is the single source of truth for updates from the backend.\n * ContextProviders can subscribe to the Store for specific things they want to provide.\n@@ -34,7 +38,7 @@ class Store extends EventEmitter {\n \n onBridgeMount = (element: Element) => {\n const {id} = element;\n- console.log('%cStore%c onBridgeMount()', 'color: red; font-weight: bold;', 'font-weight: bold;', element);\n+ debug('onBridgeMount()', element);\n this._idToElement.set(id, element);\n \n element.children.forEach(childID => {\n@@ -45,7 +49,7 @@ class Store extends EventEmitter {\n };\n \n onBridgeRoot = (id: string) => {\n- console.log('%cStore%c onBridgeRoot()', 'color: red; font-weight: bold;', 'font-weight: bold;', id);\n+ debug('onBridgeRoot()', id);\n if (!this.roots.has(id)) {\n this.roots.add(id);\n this.emit('roots');\n@@ -53,7 +57,7 @@ class Store extends EventEmitter {\n };\n \n onBridgeUnmounted = (id: string) => {\n- console.log('%cStore%c onBridgeUnmounted()', 'color: red; font-weight: bold;', 'font-weight: bold;', id);\n+ debug('onBridgeUnmounted()', id);\n this._idToElement.delete(id);\n \n if (this._idToParentID.has(id)) {\n@@ -68,7 +72,7 @@ class Store extends EventEmitter {\n \n onBridgeUpdated = (element: Element) => {\n const {id} = element;\n- console.log('%cStore%c onBridgeUpdated()', 'color: red; font-weight: bold;', 'font-weight: bold;', element);\n+ debug('onBridgeUpdated()', element);\n this._idToElement.set(id, element);\n \n this.emit(id);\n","files":[{"status":"M","path":"shells\/dev\/app\/ElementTypes\/index.js"},{"status":"M","path":"src\/backend\/agent.js"},{"status":"M","path":"src\/devtools\/store.js"}],"body":""}

dillon1000/react

Files changed