From 0b2e77be8cd69e05e32050ae20ffdfecf322630f Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Wed, 20 Jul 2022 16:19:27 -0700 Subject: [PATCH 1/9] misc: document where network timings come from --- lighthouse-core/lib/network-request.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/lighthouse-core/lib/network-request.js b/lighthouse-core/lib/network-request.js index 6dd6cc9d255a..d07e0fab5516 100644 --- a/lighthouse-core/lib/network-request.js +++ b/lighthouse-core/lib/network-request.js @@ -11,6 +11,26 @@ * @see https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/sdk/NetworkManager.js */ +/** + + DevTools box-whisker + + |-------[xxxxxXXXXXX]-| + (1) (2) (3) (4) + + (1) DNS, SSL, connection setup cost + CDP: left whisker edge is Network.requestWillBeSent timestamp + (2) light shaded region. browser network manager has initiated the request, hasn't recieved any bytes back yet + Note: even with early-hint response, only the "real" response is considered here + CDP: Network.responseRecieved timing.sendStart + ??? + (3) dark shaded region. browser network manager has recieved the very first header byte + CDP: Network.responseRecieved timing.recievedHeadersEnd + timings.requestStart + CDP: (right edge of box) Network.finished/Network.failed timestamp + (4) Trailing whisker: marks time when render process has used the resource. + Trace: ResourceFinished trace event finishedTime. Currently don't care about this. Technically, could be + long if main thread is busy. + */ + import URL from './url-shim.js'; // Lightrider X-Header names for timing information. @@ -321,6 +341,7 @@ class NetworkRequest { if (timing.requestTime === 0 || timing.receiveHeadersEnd === -1) return; // Take startTime and responseReceivedTime from timing data for better accuracy. // Timing's requestTime is a baseline in seconds, rest of the numbers there are ticks in millis. + // TODO: This skips the "queuing time" before the netstack has taken over ... is this a mistake? this.startTime = timing.requestTime; const headersReceivedTime = timing.requestTime + timing.receiveHeadersEnd / 1000; if (!this.responseReceivedTime || this.responseReceivedTime < 0) { From 7b912a5f9e0a954eb0fa8e9114278c2d772edfee Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Wed, 20 Jul 2022 16:23:10 -0700 Subject: [PATCH 2/9] update --- lighthouse-core/lib/network-request.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/lib/network-request.js b/lighthouse-core/lib/network-request.js index d07e0fab5516..e63c8400c752 100644 --- a/lighthouse-core/lib/network-request.js +++ b/lighthouse-core/lib/network-request.js @@ -22,9 +22,9 @@ CDP: left whisker edge is Network.requestWillBeSent timestamp (2) light shaded region. browser network manager has initiated the request, hasn't recieved any bytes back yet Note: even with early-hint response, only the "real" response is considered here - CDP: Network.responseRecieved timing.sendStart + ??? + CDP: Network.responseRecieved timings.requestStart + timing.sendStart (3) dark shaded region. browser network manager has recieved the very first header byte - CDP: Network.responseRecieved timing.recievedHeadersEnd + timings.requestStart + CDP: Network.responseRecieved timings.requestStart + timing.recievedHeadersEnd CDP: (right edge of box) Network.finished/Network.failed timestamp (4) Trailing whisker: marks time when render process has used the resource. Trace: ResourceFinished trace event finishedTime. Currently don't care about this. Technically, could be From 057d1da9c469261b4e003f59a5e077d56f5b8a10 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Wed, 20 Jul 2022 16:23:45 -0700 Subject: [PATCH 3/9] update --- lighthouse-core/lib/network-request.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-core/lib/network-request.js b/lighthouse-core/lib/network-request.js index e63c8400c752..5cbf8b1e2505 100644 --- a/lighthouse-core/lib/network-request.js +++ b/lighthouse-core/lib/network-request.js @@ -18,7 +18,7 @@ |-------[xxxxxXXXXXX]-| (1) (2) (3) (4) - (1) DNS, SSL, connection setup cost + (1) Queuing (delta between renderer knowing about request and network manager knowing about it), DNS, SSL, connection setup cost CDP: left whisker edge is Network.requestWillBeSent timestamp (2) light shaded region. browser network manager has initiated the request, hasn't recieved any bytes back yet Note: even with early-hint response, only the "real" response is considered here From 0a33be42cf984aa654dd052049a7e3d98cdbe650 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Wed, 20 Jul 2022 16:25:05 -0700 Subject: [PATCH 4/9] update --- lighthouse-core/lib/network-request.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/lighthouse-core/lib/network-request.js b/lighthouse-core/lib/network-request.js index 5cbf8b1e2505..35e7a31e8fab 100644 --- a/lighthouse-core/lib/network-request.js +++ b/lighthouse-core/lib/network-request.js @@ -9,9 +9,6 @@ * @fileoverview Fills most of the role of NetworkManager and NetworkRequest classes from DevTools. * @see https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/sdk/NetworkRequest.js * @see https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/sdk/NetworkManager.js - */ - -/** DevTools box-whisker From 02aae47e859726093bc9863fa8407c3080579fe5 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Wed, 20 Jul 2022 16:26:20 -0700 Subject: [PATCH 5/9] update --- lighthouse-core/lib/network-request.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/lib/network-request.js b/lighthouse-core/lib/network-request.js index 35e7a31e8fab..4729879a5c99 100644 --- a/lighthouse-core/lib/network-request.js +++ b/lighthouse-core/lib/network-request.js @@ -15,16 +15,24 @@ |-------[xxxxxXXXXXX]-| (1) (2) (3) (4) - (1) Queuing (delta between renderer knowing about request and network manager knowing about it), DNS, SSL, connection setup cost + (1) Queuing (delta between renderer knowing about request and network manager knowing about it), + DNS, SSL, connection setup cost + CDP: left whisker edge is Network.requestWillBeSent timestamp + (2) light shaded region. browser network manager has initiated the request, hasn't recieved any bytes back yet Note: even with early-hint response, only the "real" response is considered here + CDP: Network.responseRecieved timings.requestStart + timing.sendStart + (3) dark shaded region. browser network manager has recieved the very first header byte + CDP: Network.responseRecieved timings.requestStart + timing.recievedHeadersEnd CDP: (right edge of box) Network.finished/Network.failed timestamp + (4) Trailing whisker: marks time when render process has used the resource. - Trace: ResourceFinished trace event finishedTime. Currently don't care about this. Technically, could be + + Trace: ResourceFinished trace event finishedTime. Currently don't care about this. Could be long if main thread is busy. */ From 6f7bee2ac177013a823de8a03decc67eb1dee00f Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 19 Aug 2022 13:02:15 -0700 Subject: [PATCH 6/9] pr --- docs/Network-Timings.svg | 1 + lighthouse-core/lib/network-request.js | 28 ++++++++++++++++++-------- 2 files changed, 21 insertions(+), 8 deletions(-) create mode 100644 docs/Network-Timings.svg diff --git a/docs/Network-Timings.svg b/docs/Network-Timings.svg new file mode 100644 index 000000000000..edf61634c49c --- /dev/null +++ b/docs/Network-Timings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lighthouse-core/lib/network-request.js b/lighthouse-core/lib/network-request.js index 4729879a5c99..dbeeac09a21c 100644 --- a/lighthouse-core/lib/network-request.js +++ b/lighthouse-core/lib/network-request.js @@ -10,30 +10,42 @@ * @see https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/sdk/NetworkRequest.js * @see https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/sdk/NetworkManager.js + + A detailed overview of the Chromium networking layer can be found here: + https://github.com/GoogleChrome/lighthouse/blob/master/docs/Network-Timings.svg + + Below is a simplified model. + DevTools box-whisker |-------[xxxxxXXXXXX]-| (1) (2) (3) (4) - (1) Queuing (delta between renderer knowing about request and network manager knowing about it), - DNS, SSL, connection setup cost + (1) Covers various stages: + - Queuing (delta between renderer knowing about request and network manager knowing about it) + - DNS + - Connection setup cost (TCP, TLS, SSL, etc.) CDP: left whisker edge is Network.requestWillBeSent timestamp (2) light shaded region. browser network manager has initiated the request, hasn't recieved any bytes back yet Note: even with early-hint response, only the "real" response is considered here - CDP: Network.responseRecieved timings.requestStart + timing.sendStart + CDP: Network.requestWillBeSentExtraInfo timings.requestTime + timings.sendStart (3) dark shaded region. browser network manager has recieved the very first header byte - CDP: Network.responseRecieved timings.requestStart + timing.recievedHeadersEnd - CDP: (right edge of box) Network.finished/Network.failed timestamp + CDP: Network.requestWillBeSentExtraInfo timings.requestTime + timings.recievedHeadersEnd + CDP: (right edge of box) Network.finished/Network.failed timestamp + Trace: ResourceFinish.finishedTime + + (4) Trailing whisker: marks time when render process main thread is available to use the resource. + + Could be long if main thread is busy. - (4) Trailing whisker: marks time when render process has used the resource. + Trace: ResourceFinish.ts - Trace: ResourceFinished trace event finishedTime. Currently don't care about this. Could be - long if main thread is busy. + Currently don't use this anywhere. */ import URL from './url-shim.js'; From 9bf0683d0bdee11d0d2a6fb669ed8e2c5d8099de Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 19 Aug 2022 13:04:43 -0700 Subject: [PATCH 7/9] update --- lighthouse-core/lib/network-request.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/lighthouse-core/lib/network-request.js b/lighthouse-core/lib/network-request.js index dbeeac09a21c..137ad541e459 100644 --- a/lighthouse-core/lib/network-request.js +++ b/lighthouse-core/lib/network-request.js @@ -21,31 +21,37 @@ |-------[xxxxxXXXXXX]-| (1) (2) (3) (4) - (1) Covers various stages: + (1) leading whisker + + Covers various stages: + - Queuing (delta between renderer knowing about request and network manager knowing about it) - DNS - Connection setup cost (TCP, TLS, SSL, etc.) CDP: left whisker edge is Network.requestWillBeSent timestamp - (2) light shaded region. browser network manager has initiated the request, hasn't recieved any bytes back yet + (2) light shaded region + + browser network manager has initiated the request, hasn't recieved any bytes back yet Note: even with early-hint response, only the "real" response is considered here CDP: Network.requestWillBeSentExtraInfo timings.requestTime + timings.sendStart - (3) dark shaded region. browser network manager has recieved the very first header byte + (3) dark shaded region + + browser network manager has recieved the very first header byte CDP: Network.requestWillBeSentExtraInfo timings.requestTime + timings.recievedHeadersEnd CDP: (right edge of box) Network.finished/Network.failed timestamp Trace: ResourceFinish.finishedTime - (4) Trailing whisker: marks time when render process main thread is available to use the resource. + (4) trailing whisker - Could be long if main thread is busy. + Marks time when render process main thread is available to use the resource. Could be long + if main thread is busy. Currently don't use this anywhere. Trace: ResourceFinish.ts - - Currently don't use this anywhere. */ import URL from './url-shim.js'; From 3077f9037afa79fe9666218813562f0575990ef9 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 19 Aug 2022 13:14:44 -0700 Subject: [PATCH 8/9] typo --- core/lib/network-request.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core/lib/network-request.js b/core/lib/network-request.js index fccef72d8c99..81a13ce53a03 100644 --- a/core/lib/network-request.js +++ b/core/lib/network-request.js @@ -12,7 +12,7 @@ A detailed overview of the Chromium networking layer can be found here: - https://github.com/GoogleChrome/lighthouse/blob/master/docs/Network-Timings.svg + https://github.com/GoogleChrome/lighthouse/blob/master/docs/Network-Timing.svg Below is a simplified model. @@ -36,13 +36,13 @@ browser network manager has initiated the request, hasn't recieved any bytes back yet Note: even with early-hint response, only the "real" response is considered here - CDP: Network.requestWillBeSentExtraInfo timings.requestTime + timings.sendStart + CDP: Network.requestWillBeSentExtraInfo timing.requestTime + timing.sendStart (3) dark shaded region browser network manager has recieved the very first header byte - CDP: Network.requestWillBeSentExtraInfo timings.requestTime + timings.recievedHeadersEnd + CDP: Network.requestWillBeSentExtraInfo timing.requestTime + timing.recievedHeadersEnd CDP: (right edge of box) Network.finished/Network.failed timestamp Trace: ResourceFinish.finishedTime From d83d20148d1de718b334f7b1d654b688d4d6cc39 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Fri, 19 Aug 2022 13:45:03 -0700 Subject: [PATCH 9/9] this ck is fn raw!! --- core/lib/network-request.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/core/lib/network-request.js b/core/lib/network-request.js index 81a13ce53a03..e8c348a4ddb3 100644 --- a/core/lib/network-request.js +++ b/core/lib/network-request.js @@ -10,9 +10,8 @@ * @see https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/sdk/NetworkRequest.js * @see https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/sdk/NetworkManager.js - - A detailed overview of the Chromium networking layer can be found here: - https://github.com/GoogleChrome/lighthouse/blob/master/docs/Network-Timing.svg + A detailed overview of the Chromium networking layer can be found here: + https://raw.githubusercontent.com/GoogleChrome/lighthouse/master/docs/Network-Timing.svg Below is a simplified model.