[LayoutShift] Cache results of getNode

Follow-up to:
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5384002

Lighthouse issue:
GoogleChrome/lighthouse#15869

Bug: None
Change-Id: I61bfd87e85955421d667a01c38212d64d5cc7e77
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5405255
Reviewed-by: Paul Irish <paulirish@chromium.org>
Reviewed-by: Connor Clark <cjamcl@chromium.org>
Commit-Queue: Adam Raine <asraine@chromium.org>

front_end/models/trace/root-causes/LayoutShift.ts

@@ -87,6 +87,7 @@ function networkRequestIsRenderBlockingInFrame(
 export class LayoutShiftRootCauses {
   #protocolInterface: RootCauseProtocolInterface;
   #rootCauseCacheMap = new Map<Types.TraceEvents.TraceEventLayoutShift, LayoutShiftRootCausesData>();
+  #nodeDetailsCache = new Map<Protocol.DOM.NodeId, Protocol.DOM.Node|null>();
 
   constructor(protocolInterface: RootCauseProtocolInterface) {
     this.#protocolInterface = protocolInterface;
@@ -296,7 +297,7 @@ export class LayoutShiftRootCauses {
       return null;
     }
 
-    const layoutInvalidationNode = await this.#protocolInterface.getNode(layoutInvalidationNodeId);
+    const layoutInvalidationNode = await this.getNodeDetails(layoutInvalidationNodeId);
     if (!layoutInvalidationNode) {
       return null;
     }
@@ -328,7 +329,7 @@ export class LayoutShiftRootCauses {
       return null;
     }
 
-    const layoutInvalidationNode = await this.#protocolInterface.getNode(layoutInvalidationNodeId);
+    const layoutInvalidationNode = await this.getNodeDetails(layoutInvalidationNodeId);
     if (!layoutInvalidationNode) {
       return null;
     }
@@ -340,6 +341,18 @@ export class LayoutShiftRootCauses {
     return {iframe};
   }
 
+  async getNodeDetails(nodeId: Protocol.DOM.NodeId): Promise<Protocol.DOM.Node|null> {
+    let nodeDetails = this.#nodeDetailsCache.get(nodeId);
+    if (nodeDetails !== undefined) {
+      return nodeDetails;
+    }
+
+    nodeDetails = await this.#protocolInterface.getNode(nodeId);
+    this.#nodeDetailsCache.set(nodeId, nodeDetails);
+
+    return nodeDetails;
+  }
+
   /**
    * Given a layout invalidation event and a sorted array, returns the subset of requests that arrived within a
    * 500ms window before the layout invalidation.