perf: Eliminate Path scrollTop Layout Thrashing in getTargetData (#9403)

Author: tobiu

src/main/DomEvents.mjs

@@ -284,14 +284,14 @@ class DomEvents extends Base {
         }
 
         const result = {
-            path     : path.map(e => this.getTargetData(e, event.type)),
-            target   : this.getTargetData(event.target, event.type),
+            path     : path.map(e => this.getTargetData(e, event.type, false)),
+            target   : this.getTargetData(event.target, event.type, true),
             timeStamp: event.timeStamp,
             type     : event.type,
         };
 
         if (event.relatedTarget) {
-            result.relatedTarget = this.getTargetData(event.relatedTarget, event.type)
+            result.relatedTarget = this.getTargetData(event.relatedTarget, event.type, false)
         }
 
         return result
@@ -373,31 +373,32 @@ class DomEvents extends Base {
             path = this.getSelectionPath(path, target.parentNode, eventName);
         }
 
-        path.push(this.getTargetData(target, eventName));
+        path.push(this.getTargetData(target, eventName, false));
 
         return path
     }
 
     /**
      * @param {HTMLElement} node
      * @param {String} [eventName]
+     * @param {Boolean} [isTarget=true]
      * @returns {Object}
      */
-    getTargetData(node, eventName) {
+    getTargetData(node, eventName, isTarget=true) {
         // Fast path: eliminate layout thrashing on continuous events.
         // We skip bounding rect and layout dimensions for scroll & wheel.
         let skipLayout = eventName === 'scroll' || eventName === 'wheel',
             r          = !skipLayout && node.getBoundingClientRect?.(),
-            rect       = r && this.parseDomRect(r) || {};
+            rect       = r && this.parseDomRect(r) || undefined;
 
         return {
             aria             : this.geAriaAttributes(node),
             checked          : node.checked,
             childElementCount: node.childElementCount,
-            clientHeight     : skipLayout ? 0 : node.clientHeight,
+            clientHeight     : skipLayout ? undefined : node.clientHeight,
             clientLeft       : node.clientLeft,
             clientTop        : node.clientTop,
-            clientWidth      : skipLayout ? 0 : node.clientWidth,
+            clientWidth      : skipLayout ? undefined : node.clientWidth,
             cls              : node.classList ? [...node.classList] : [],
             data             : {...node.dataset},
             draggable        : node.draggable,
@@ -407,16 +408,16 @@ class DomEvents extends Base {
             isConnected      : node.isConnected,
             isContentEditable: node.isContentEditable,
             nodeType         : node.nodeType,
-            offsetHeight     : skipLayout ? 0 : node.offsetHeight,
+            offsetHeight     : skipLayout ? undefined : node.offsetHeight,
             offsetLeft       : node.offsetLeft,
             offsetTop        : node.offsetTop,
-            offsetWidth      : skipLayout ? 0 : node.offsetWidth,
+            offsetWidth      : skipLayout ? undefined : node.offsetWidth,
             rect,
             role             : node.role,
-            scrollHeight     : skipLayout ? 0 : node.scrollHeight,
-            scrollLeft       : node.scrollLeft,
-            scrollTop        : node.scrollTop,
-            scrollWidth      : skipLayout ? 0 : node.scrollWidth,
+            scrollHeight     : skipLayout ? undefined : node.scrollHeight,
+            scrollLeft       : skipLayout && !isTarget ? undefined : node.scrollLeft,
+            scrollTop        : skipLayout && !isTarget ? undefined : node.scrollTop,
+            scrollWidth      : skipLayout ? undefined : node.scrollWidth,
             style            : node.style?.cssText,
             tabIndex         : node.getAttribute?.('tabindex') ? node.tabIndex : null,
             tagName          : node.tagName?.toLowerCase()