Changeset 201778 in webkit

Timestamp:

Jun 7, 2016 5:32:08 PM (8 years ago)

Author:

BJ Burg

Message:

Web Inspector: reduce timer churn when processing many DOM.attributeModified messages
​https://bugs.webkit.org/show_bug.cgi?id=158491
<rdar://problem/25561452>

Reviewed by Timothy Hatcher.

When the backend sends thousands of DOM.attributeModified events to the frontend, it
slows to a crawl. This is partly because redundant messages are being sent, and
because the frontend is taking too long to render attribute updates in the elements tab.

This patch is a first step to improve performance by reducing unnecessary work. It
coalesces all attribute state updates to only happen once per animation frame. This
reduces timer churn because we previously used a debouncing timer with interval of 0ms,
and that had to be cleared and restarted on every call. This change also eliminates
forced layouts when updating the selection highlights, since the DOM tree outline has
been reflowed by the time we start updating selections in a requestAnimationFrame callback.

There is still a lot of optimization to be done here, but this reduces the problem
considerably by keeping the event loop clear and making it obvious which selection
update operations are still too expensive.

• UserInterface/Base/Utilities.js:

Add a 'onNextFrame' proxy to Object. It works like debounce, except it coalesces calls
up until the next animation frame rather than a fixed timeout. It also does not extend
the timeout interval for each call.

• UserInterface/Views/DOMTreeUpdater.js:

(WebInspector.DOMTreeUpdater.prototype._attributesUpdated):
(WebInspector.DOMTreeUpdater.prototype._characterDataModified):
(WebInspector.DOMTreeUpdater.prototype._nodeInserted):
(WebInspector.DOMTreeUpdater.prototype._nodeRemoved):
(WebInspector.DOMTreeUpdater.prototype._updateModifiedNodes):
Update on the next frame rather than on a zero delay timeout.

• UserInterface/Views/TreeOutline.js:

(WebInspector.TreeOutline.WebInspector.TreeElement.prototype.didChange):
(WebInspector.TreeOutline.WebInspector.TreeElement.prototype._fireDidChange):
Update on the next frame rather than on a zero delay timeout.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Base/Utilities.js (modified) (1 diff)
• UserInterface/Views/DOMTreeUpdater.js (modified) (5 diffs)
• UserInterface/Views/TreeOutline.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2016-06-07  Brian Burg  <bburg@apple.com>
+
+        Web Inspector: reduce timer churn when processing many DOM.attributeModified messages
+        https://bugs.webkit.org/show_bug.cgi?id=158491
+        <rdar://problem/25561452>
+
+        Reviewed by Timothy Hatcher.
+
+        When the backend sends thousands of DOM.attributeModified events to the frontend, it
+        slows to a crawl. This is partly because redundant messages are being sent, and
+        because the frontend is taking too long to render attribute updates in the elements tab.
+
+        This patch is a first step to improve performance by reducing unnecessary work. It
+        coalesces all attribute state updates to only happen once per animation frame. This
+        reduces timer churn because we previously used a debouncing timer with interval of 0ms,
+        and that had to be cleared and restarted on every call. This change also eliminates
+        forced layouts when updating the selection highlights, since the DOM tree outline has
+        been reflowed by the time we start updating selections in a requestAnimationFrame callback.
+
+        There is still a lot of optimization to be done here, but this reduces the problem
+        considerably by keeping the event loop clear and making it obvious which selection
+        update operations are still too expensive.
+
+        * UserInterface/Base/Utilities.js:
+        Add a 'onNextFrame' proxy to Object. It works like debounce, except it coalesces calls
+        up until the next animation frame rather than a fixed timeout. It also does not extend
+        the timeout interval for each call.
+
+        * UserInterface/Views/DOMTreeUpdater.js:
+        (WebInspector.DOMTreeUpdater.prototype._attributesUpdated):
+        (WebInspector.DOMTreeUpdater.prototype._characterDataModified):
+        (WebInspector.DOMTreeUpdater.prototype._nodeInserted):
+        (WebInspector.DOMTreeUpdater.prototype._nodeRemoved):
+        (WebInspector.DOMTreeUpdater.prototype._updateModifiedNodes):
+        Update on the next frame rather than on a zero delay timeout.
+
+        * UserInterface/Views/TreeOutline.js:
+        (WebInspector.TreeOutline.WebInspector.TreeElement.prototype.didChange):
+        (WebInspector.TreeOutline.WebInspector.TreeElement.prototype._fireDidChange):
+        Update on the next frame rather than on a zero delay timeout.
+
 2016-06-07  Nikita Vasilyev  <nvasilyev@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js

@@ -1274 +1274 @@
         }
     });
+
+    const requestAnimationFrameSymbol = Symbol("peform-on-animation-frame");
+    const requestAnimationFrameProxySymbol = Symbol("perform-on-animation-frame-proxy");
+
+    Object.defineProperty(Object.prototype, "onNextFrame",
+    {
+        get: function()
+        {
+            if (!this[requestAnimationFrameProxySymbol]) {
+                this[requestAnimationFrameProxySymbol] = new Proxy(this, {
+                    get(target, property, receiver) {
+                        return (...args) => {
+                            let original = target[property];
+                            console.assert(typeof original === "function");
+
+                            if (original[requestAnimationFrameSymbol])
+                                return;
+
+                            let performWork = () => {
+                                original[requestAnimationFrameSymbol] = undefined;
+                                original.apply(target, args);
+                            };
+
+                            original[requestAnimationFrameSymbol] = requestAnimationFrame(performWork);
+                        };
+                    }
+                });
+            }
+
+            return this[requestAnimationFrameProxySymbol];
+        }
+    });
 })();
 

trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeUpdater.js

@@ -58 +58 @@
         this._recentlyModifiedNodes.push({node: event.data.node, updated: true, attribute: event.data.name});
         if (this._treeOutline._visible)
-            this.soon._updateModifiedNodes();
+            this.onNextFrame._updateModifiedNodes();
     },
 
@@ -65 +65 @@
         this._recentlyModifiedNodes.push({node: event.data.node, updated: true});
         if (this._treeOutline._visible)
-            this.soon._updateModifiedNodes();
+            this.onNextFrame._updateModifiedNodes();
     },
 
@@ -72 +72 @@
         this._recentlyModifiedNodes.push({node: event.data.node, parent: event.data.parent, inserted: true});
         if (this._treeOutline._visible)
-            this.soon._updateModifiedNodes();
+            this.onNextFrame._updateModifiedNodes();
     },
 
@@ -79 +79 @@
         this._recentlyModifiedNodes.push({node: event.data.node, parent: event.data.parent, removed: true});
         if (this._treeOutline._visible)
-            this.soon._updateModifiedNodes();
+            this.onNextFrame._updateModifiedNodes();
     },
 
@@ -91 +91 @@
     _updateModifiedNodes: function()
     {
-        this._updateModifiedNodes.cancelDebounce();
-
         let updatedParentTreeElements = [];
         for (let recentlyModifiedNode of this._recentlyModifiedNodes) {

trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js

@@ -801 +801 @@
     _fireDidChange()
     {
-        this._didChangeTimeoutIdentifier = undefined;
-
         if (this.treeOutline)
             this.treeOutline._treeElementDidChange(this);
@@ -812 +810 @@
             return;
 
-        // Prevent telling the TreeOutline multiple times in a row by delaying it with a timeout.
-        if (!this._didChangeTimeoutIdentifier)
-            this._didChangeTimeoutIdentifier = setTimeout(this._fireDidChange.bind(this), 0);
+        this.onNextFrame._fireDidChange();
     }