lighthouse 12.0.0-dev.20240602 → 12.0.0-dev.20240604
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/audits/byte-efficiency/byte-efficiency-audit.js +1 -1
- package/core/audits/byte-efficiency/offscreen-images.js +1 -1
- package/core/audits/byte-efficiency/render-blocking-resources.js +6 -6
- package/core/audits/dobetterweb/uses-http2.js +3 -3
- package/core/audits/prioritize-lcp-image.js +2 -2
- package/core/audits/redirects.js +1 -1
- package/core/audits/third-party-facades.js +1 -1
- package/core/audits/third-party-summary.js +1 -1
- package/core/audits/uses-rel-preconnect.js +2 -2
- package/core/audits/uses-rel-preload.js +9 -9
- package/core/computed/critical-request-chains.js +3 -3
- package/core/computed/metrics/lantern-metric.d.ts +18 -0
- package/core/computed/metrics/lantern-metric.js +34 -2
- package/core/computed/navigation-insights.d.ts +2 -0
- package/core/computed/page-dependency-graph.d.ts +3 -1
- package/core/computed/page-dependency-graph.js +11 -4
- package/core/computed/trace-engine-result.d.ts +1 -0
- package/core/computed/trace-engine-result.js +1 -0
- package/core/lib/lantern/metric.js +3 -3
- package/core/lib/lantern/metrics/first-contentful-paint.js +1 -1
- package/core/lib/lantern/metrics/interactive.js +4 -4
- package/core/lib/lantern/metrics/largest-contentful-paint.js +2 -2
- package/core/lib/lantern/network-node.d.ts +2 -2
- package/core/lib/lantern/network-node.js +3 -4
- package/core/lib/lantern/page-dependency-graph.d.ts +62 -6
- package/core/lib/lantern/page-dependency-graph.js +473 -30
- package/core/lib/lantern/simulator/connection-pool.d.ts +10 -10
- package/core/lib/lantern/simulator/connection-pool.js +22 -22
- package/core/lib/lantern/simulator/dns-cache.d.ts +1 -1
- package/core/lib/lantern/simulator/dns-cache.js +1 -1
- package/core/lib/lantern/simulator/network-analyzer.d.ts +12 -12
- package/core/lib/lantern/simulator/network-analyzer.js +53 -53
- package/core/lib/lantern/simulator/simulator.d.ts +5 -5
- package/core/lib/lantern/simulator/simulator.js +18 -18
- package/core/lib/lantern/types/lantern.d.ts +12 -8
- package/core/lib/lantern-trace-saver.js +1 -1
- package/core/lib/network-request.d.ts +21 -0
- package/core/lib/network-request.js +5 -2
- package/package.json +6 -4
- package/tsconfig.json +1 -0
- package/types/artifacts.d.ts +16 -0
|
@@ -10,6 +10,7 @@ import {NetworkNode} from './network-node.js';
|
|
|
10
10
|
import {CPUNode} from './cpu-node.js';
|
|
11
11
|
import {TraceProcessor} from '../tracehouse/trace-processor.js';
|
|
12
12
|
import {NetworkAnalyzer} from './simulator/network-analyzer.js';
|
|
13
|
+
import {RESOURCE_TYPES} from '../network-request.js';
|
|
13
14
|
|
|
14
15
|
/** @typedef {import('./base-node.js').Node} Node */
|
|
15
16
|
/** @typedef {Omit<LH.Artifacts['URL'], 'finalDisplayedUrl'>} URLArtifact */
|
|
@@ -31,19 +32,19 @@ const IGNORED_MIME_TYPES_REGEX = /^video/;
|
|
|
31
32
|
|
|
32
33
|
class PageDependencyGraph {
|
|
33
34
|
/**
|
|
34
|
-
* @param {Lantern.NetworkRequest}
|
|
35
|
+
* @param {Lantern.NetworkRequest} request
|
|
35
36
|
* @return {Array<string>}
|
|
36
37
|
*/
|
|
37
|
-
static getNetworkInitiators(
|
|
38
|
-
if (!
|
|
39
|
-
if (
|
|
40
|
-
if (
|
|
38
|
+
static getNetworkInitiators(request) {
|
|
39
|
+
if (!request.initiator) return [];
|
|
40
|
+
if (request.initiator.url) return [request.initiator.url];
|
|
41
|
+
if (request.initiator.type === 'script') {
|
|
41
42
|
// Script initiators have the stack of callFrames from all functions that led to this request.
|
|
42
43
|
// If async stacks are enabled, then the stack will also have the parent functions that asynchronously
|
|
43
44
|
// led to this request chained in the `parent` property.
|
|
44
45
|
/** @type {Set<string>} */
|
|
45
46
|
const scriptURLs = new Set();
|
|
46
|
-
let stack =
|
|
47
|
+
let stack = request.initiator.stack;
|
|
47
48
|
while (stack) {
|
|
48
49
|
const callFrames = stack.callFrames || [];
|
|
49
50
|
for (const frame of callFrames) {
|
|
@@ -60,10 +61,10 @@ class PageDependencyGraph {
|
|
|
60
61
|
}
|
|
61
62
|
|
|
62
63
|
/**
|
|
63
|
-
* @param {Array<Lantern.NetworkRequest>}
|
|
64
|
+
* @param {Array<Lantern.NetworkRequest>} networkRequests
|
|
64
65
|
* @return {NetworkNodeOutput}
|
|
65
66
|
*/
|
|
66
|
-
static getNetworkNodeOutput(
|
|
67
|
+
static getNetworkNodeOutput(networkRequests) {
|
|
67
68
|
/** @type {Array<NetworkNode>} */
|
|
68
69
|
const nodes = [];
|
|
69
70
|
/** @type {Map<string, NetworkNode>} */
|
|
@@ -73,35 +74,35 @@ class PageDependencyGraph {
|
|
|
73
74
|
/** @type {Map<string, NetworkNode|null>} */
|
|
74
75
|
const frameIdToNodeMap = new Map();
|
|
75
76
|
|
|
76
|
-
|
|
77
|
-
if (IGNORED_MIME_TYPES_REGEX.test(
|
|
78
|
-
if (
|
|
77
|
+
networkRequests.forEach(request => {
|
|
78
|
+
if (IGNORED_MIME_TYPES_REGEX.test(request.mimeType)) return;
|
|
79
|
+
if (request.fromWorker) return;
|
|
79
80
|
|
|
80
|
-
// Network
|
|
81
|
-
// Suffix all subsequent
|
|
81
|
+
// Network requestIds can be duplicated for an unknown reason
|
|
82
|
+
// Suffix all subsequent requests with `:duplicate` until it's unique
|
|
82
83
|
// NOTE: This should never happen with modern NetworkRequest library, but old fixtures
|
|
83
84
|
// might still have this issue.
|
|
84
|
-
while (idToNodeMap.has(
|
|
85
|
-
|
|
85
|
+
while (idToNodeMap.has(request.requestId)) {
|
|
86
|
+
request.requestId += ':duplicate';
|
|
86
87
|
}
|
|
87
88
|
|
|
88
|
-
const node = new NetworkNode(
|
|
89
|
+
const node = new NetworkNode(request);
|
|
89
90
|
nodes.push(node);
|
|
90
91
|
|
|
91
|
-
const urlList = urlToNodeMap.get(
|
|
92
|
+
const urlList = urlToNodeMap.get(request.url) || [];
|
|
92
93
|
urlList.push(node);
|
|
93
94
|
|
|
94
|
-
idToNodeMap.set(
|
|
95
|
-
urlToNodeMap.set(
|
|
95
|
+
idToNodeMap.set(request.requestId, node);
|
|
96
|
+
urlToNodeMap.set(request.url, urlList);
|
|
96
97
|
|
|
97
98
|
// If the request was for the root document of an iframe, save an entry in our
|
|
98
99
|
// map so we can link up the task `args.data.frame` dependencies later in graph creation.
|
|
99
|
-
if (
|
|
100
|
-
|
|
101
|
-
|
|
100
|
+
if (request.frameId &&
|
|
101
|
+
request.resourceType === NetworkRequestTypes.Document &&
|
|
102
|
+
request.documentURL === request.url) {
|
|
102
103
|
// If there's ever any ambiguity, permanently set the value to `false` to avoid loops in the graph.
|
|
103
|
-
const value = frameIdToNodeMap.has(
|
|
104
|
-
frameIdToNodeMap.set(
|
|
104
|
+
const value = frameIdToNodeMap.has(request.frameId) ? null : node;
|
|
105
|
+
frameIdToNodeMap.set(request.frameId, value);
|
|
105
106
|
}
|
|
106
107
|
});
|
|
107
108
|
|
|
@@ -404,26 +405,128 @@ class PageDependencyGraph {
|
|
|
404
405
|
}
|
|
405
406
|
}
|
|
406
407
|
|
|
408
|
+
/**
|
|
409
|
+
* TODO(15841): remove when CDT backend is gone. until then, this is a useful debugging tool
|
|
410
|
+
* to find delta between using CDP or the trace to create the network requests.
|
|
411
|
+
*
|
|
412
|
+
* When a test fails using the trace backend, I enabled this debug method and copied the network
|
|
413
|
+
* requests when CDP was used, then when trace is used, and diff'd them. This method helped
|
|
414
|
+
* remove non-logical differences from the comparison (order of properties, slight rounding
|
|
415
|
+
* discrepancies, removing object cycles, etc).
|
|
416
|
+
*
|
|
417
|
+
* When using for a unit test, make sure to do `.only` so you are getting what you expect.
|
|
418
|
+
* @param {Lantern.NetworkRequest[]} lanternRequests
|
|
419
|
+
* @return {never}
|
|
420
|
+
*/
|
|
421
|
+
static _debugNormalizeRequests(lanternRequests) {
|
|
422
|
+
for (const request of lanternRequests) {
|
|
423
|
+
request.rendererStartTime = Math.round(request.rendererStartTime * 1000) / 1000;
|
|
424
|
+
request.networkRequestTime = Math.round(request.networkRequestTime * 1000) / 1000;
|
|
425
|
+
request.responseHeadersEndTime = Math.round(request.responseHeadersEndTime * 1000) / 1000;
|
|
426
|
+
request.networkEndTime = Math.round(request.networkEndTime * 1000) / 1000;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
for (const r of lanternRequests) {
|
|
430
|
+
delete r.rawRequest;
|
|
431
|
+
if (r.initiatorRequest) {
|
|
432
|
+
// @ts-expect-error
|
|
433
|
+
r.initiatorRequest = {id: r.initiatorRequest.requestId};
|
|
434
|
+
}
|
|
435
|
+
if (r.redirectDestination) {
|
|
436
|
+
// @ts-expect-error
|
|
437
|
+
r.redirectDestination = {id: r.redirectDestination.requestId};
|
|
438
|
+
}
|
|
439
|
+
if (r.redirectSource) {
|
|
440
|
+
// @ts-expect-error
|
|
441
|
+
r.redirectSource = {id: r.redirectSource.requestId};
|
|
442
|
+
}
|
|
443
|
+
if (r.redirects) {
|
|
444
|
+
// @ts-expect-error
|
|
445
|
+
r.redirects = r.redirects.map(r2 => r2.requestId);
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
/** @type {Lantern.NetworkRequest[]} */
|
|
449
|
+
const requests = lanternRequests.map(r => ({
|
|
450
|
+
requestId: r.requestId,
|
|
451
|
+
connectionId: r.connectionId,
|
|
452
|
+
connectionReused: r.connectionReused,
|
|
453
|
+
url: r.url,
|
|
454
|
+
protocol: r.protocol,
|
|
455
|
+
parsedURL: r.parsedURL,
|
|
456
|
+
documentURL: r.documentURL,
|
|
457
|
+
rendererStartTime: r.rendererStartTime,
|
|
458
|
+
networkRequestTime: r.networkRequestTime,
|
|
459
|
+
responseHeadersEndTime: r.responseHeadersEndTime,
|
|
460
|
+
networkEndTime: r.networkEndTime,
|
|
461
|
+
transferSize: r.transferSize,
|
|
462
|
+
resourceSize: r.resourceSize,
|
|
463
|
+
fromDiskCache: r.fromDiskCache,
|
|
464
|
+
fromMemoryCache: r.fromMemoryCache,
|
|
465
|
+
finished: r.finished,
|
|
466
|
+
statusCode: r.statusCode,
|
|
467
|
+
redirectSource: r.redirectSource,
|
|
468
|
+
redirectDestination: r.redirectDestination,
|
|
469
|
+
redirects: r.redirects,
|
|
470
|
+
failed: r.failed,
|
|
471
|
+
initiator: r.initiator,
|
|
472
|
+
timing: r.timing ? {
|
|
473
|
+
requestTime: r.timing.requestTime,
|
|
474
|
+
proxyStart: r.timing.proxyStart,
|
|
475
|
+
proxyEnd: r.timing.proxyEnd,
|
|
476
|
+
dnsStart: r.timing.dnsStart,
|
|
477
|
+
dnsEnd: r.timing.dnsEnd,
|
|
478
|
+
connectStart: r.timing.connectStart,
|
|
479
|
+
connectEnd: r.timing.connectEnd,
|
|
480
|
+
sslStart: r.timing.sslStart,
|
|
481
|
+
sslEnd: r.timing.sslEnd,
|
|
482
|
+
workerStart: r.timing.workerStart,
|
|
483
|
+
workerReady: r.timing.workerReady,
|
|
484
|
+
workerFetchStart: r.timing.workerFetchStart,
|
|
485
|
+
workerRespondWithSettled: r.timing.workerRespondWithSettled,
|
|
486
|
+
sendStart: r.timing.sendStart,
|
|
487
|
+
sendEnd: r.timing.sendEnd,
|
|
488
|
+
pushStart: r.timing.pushStart,
|
|
489
|
+
pushEnd: r.timing.pushEnd,
|
|
490
|
+
receiveHeadersStart: r.timing.receiveHeadersStart,
|
|
491
|
+
receiveHeadersEnd: r.timing.receiveHeadersEnd,
|
|
492
|
+
} : r.timing,
|
|
493
|
+
resourceType: r.resourceType,
|
|
494
|
+
mimeType: r.mimeType,
|
|
495
|
+
priority: r.priority,
|
|
496
|
+
initiatorRequest: r.initiatorRequest,
|
|
497
|
+
frameId: r.frameId,
|
|
498
|
+
fromWorker: r.fromWorker,
|
|
499
|
+
isLinkPreload: r.isLinkPreload,
|
|
500
|
+
serverResponseTime: r.serverResponseTime,
|
|
501
|
+
})).filter(r => !r.fromWorker);
|
|
502
|
+
// eslint-disable-next-line no-unused-vars
|
|
503
|
+
const debug = requests;
|
|
504
|
+
// Set breakpoint here.
|
|
505
|
+
// Copy `debug` and compare with https://www.diffchecker.com/text-compare/
|
|
506
|
+
process.exit(1);
|
|
507
|
+
}
|
|
508
|
+
|
|
407
509
|
/**
|
|
408
510
|
* @param {LH.TraceEvent[]} mainThreadEvents
|
|
409
|
-
* @param {
|
|
511
|
+
* @param {Lantern.NetworkRequest[]} networkRequests
|
|
410
512
|
* @param {URLArtifact} URL
|
|
411
513
|
* @return {Node}
|
|
412
514
|
*/
|
|
413
|
-
static createGraph(mainThreadEvents,
|
|
414
|
-
|
|
515
|
+
static createGraph(mainThreadEvents, networkRequests, URL) {
|
|
516
|
+
// This is for debugging trace/devtoolslog network records.
|
|
517
|
+
// const debug = PageDependencyGraph._debugNormalizeRequests(networkRequests);
|
|
518
|
+
const networkNodeOutput = PageDependencyGraph.getNetworkNodeOutput(networkRequests);
|
|
415
519
|
const cpuNodes = PageDependencyGraph.getCPUNodes(mainThreadEvents);
|
|
416
520
|
const {requestedUrl, mainDocumentUrl} = URL;
|
|
417
521
|
if (!requestedUrl) throw new Error('requestedUrl is required to get the root request');
|
|
418
522
|
if (!mainDocumentUrl) throw new Error('mainDocumentUrl is required to get the main resource');
|
|
419
523
|
|
|
420
|
-
const rootRequest = NetworkAnalyzer.findResourceForUrl(
|
|
524
|
+
const rootRequest = NetworkAnalyzer.findResourceForUrl(networkRequests, requestedUrl);
|
|
421
525
|
if (!rootRequest) throw new Error('rootRequest not found');
|
|
422
526
|
const rootNode = networkNodeOutput.idToNodeMap.get(rootRequest.requestId);
|
|
423
527
|
if (!rootNode) throw new Error('rootNode not found');
|
|
424
|
-
|
|
425
528
|
const mainDocumentRequest =
|
|
426
|
-
NetworkAnalyzer.findLastDocumentForUrl(
|
|
529
|
+
NetworkAnalyzer.findLastDocumentForUrl(networkRequests, mainDocumentUrl);
|
|
427
530
|
if (!mainDocumentRequest) throw new Error('mainDocumentRequest not found');
|
|
428
531
|
const mainDocumentNode = networkNodeOutput.idToNodeMap.get(mainDocumentRequest.requestId);
|
|
429
532
|
if (!mainDocumentNode) throw new Error('mainDocumentNode not found');
|
|
@@ -439,6 +542,346 @@ class PageDependencyGraph {
|
|
|
439
542
|
return rootNode;
|
|
440
543
|
}
|
|
441
544
|
|
|
545
|
+
/**
|
|
546
|
+
* @param {Lantern.NetworkRequest} request The request to find the initiator of
|
|
547
|
+
* @param {Map<string, Lantern.NetworkRequest[]>} requestsByURL
|
|
548
|
+
* @return {Lantern.NetworkRequest|null}
|
|
549
|
+
*/
|
|
550
|
+
static chooseInitiatorRequest(request, requestsByURL) {
|
|
551
|
+
if (request.redirectSource) {
|
|
552
|
+
return request.redirectSource;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
const initiatorURL = PageDependencyGraph.getNetworkInitiators(request)[0];
|
|
556
|
+
let candidates = requestsByURL.get(initiatorURL) || [];
|
|
557
|
+
// The (valid) initiator must come before the initiated request.
|
|
558
|
+
candidates = candidates.filter(c => {
|
|
559
|
+
return c.responseHeadersEndTime <= request.rendererStartTime &&
|
|
560
|
+
c.finished && !c.failed;
|
|
561
|
+
});
|
|
562
|
+
if (candidates.length > 1) {
|
|
563
|
+
// Disambiguate based on prefetch. Prefetch requests have type 'Other' and cannot
|
|
564
|
+
// initiate requests, so we drop them here.
|
|
565
|
+
const nonPrefetchCandidates = candidates.filter(
|
|
566
|
+
cand => cand.resourceType !== RESOURCE_TYPES.Other);
|
|
567
|
+
if (nonPrefetchCandidates.length) {
|
|
568
|
+
candidates = nonPrefetchCandidates;
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
if (candidates.length > 1) {
|
|
572
|
+
// Disambiguate based on frame. It's likely that the initiator comes from the same frame.
|
|
573
|
+
const sameFrameCandidates = candidates.filter(cand => cand.frameId === request.frameId);
|
|
574
|
+
if (sameFrameCandidates.length) {
|
|
575
|
+
candidates = sameFrameCandidates;
|
|
576
|
+
}
|
|
577
|
+
}
|
|
578
|
+
if (candidates.length > 1 && request.initiator.type === 'parser') {
|
|
579
|
+
// Filter to just Documents when initiator type is parser.
|
|
580
|
+
const documentCandidates = candidates.filter(cand =>
|
|
581
|
+
cand.resourceType === RESOURCE_TYPES.Document);
|
|
582
|
+
if (documentCandidates.length) {
|
|
583
|
+
candidates = documentCandidates;
|
|
584
|
+
}
|
|
585
|
+
}
|
|
586
|
+
if (candidates.length > 1) {
|
|
587
|
+
// If all real loads came from successful preloads (url preloaded and
|
|
588
|
+
// loads came from the cache), filter to link rel=preload request(s).
|
|
589
|
+
const linkPreloadCandidates = candidates.filter(c => c.isLinkPreload);
|
|
590
|
+
if (linkPreloadCandidates.length) {
|
|
591
|
+
const nonPreloadCandidates = candidates.filter(c => !c.isLinkPreload);
|
|
592
|
+
const allPreloaded = nonPreloadCandidates.every(c => c.fromDiskCache || c.fromMemoryCache);
|
|
593
|
+
if (nonPreloadCandidates.length && allPreloaded) {
|
|
594
|
+
candidates = linkPreloadCandidates;
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
// Only return an initiator if the result is unambiguous.
|
|
600
|
+
return candidates.length === 1 ? candidates[0] : null;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
/**
|
|
604
|
+
* Returns a map of `pid` -> `tid[]`.
|
|
605
|
+
* @param {LH.Trace} trace
|
|
606
|
+
* @return {Map<number, number[]>}
|
|
607
|
+
*/
|
|
608
|
+
static _findWorkerThreads(trace) {
|
|
609
|
+
// TODO: WorkersHandler in TraceEngine needs to be updated to also include `pid` (only had `tid`).
|
|
610
|
+
const workerThreads = new Map();
|
|
611
|
+
const workerCreationEvents = ['ServiceWorker thread', 'DedicatedWorker thread'];
|
|
612
|
+
|
|
613
|
+
for (const event of trace.traceEvents) {
|
|
614
|
+
if (event.name !== 'thread_name' || !event.args.name) {
|
|
615
|
+
continue;
|
|
616
|
+
}
|
|
617
|
+
if (!workerCreationEvents.includes(event.args.name)) {
|
|
618
|
+
continue;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
const tids = workerThreads.get(event.pid);
|
|
622
|
+
if (tids) {
|
|
623
|
+
tids.push(event.tid);
|
|
624
|
+
} else {
|
|
625
|
+
workerThreads.set(event.pid, [event.tid]);
|
|
626
|
+
}
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
return workerThreads;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
/**
|
|
633
|
+
* @param {URL|string} url
|
|
634
|
+
*/
|
|
635
|
+
static _createParsedUrl(url) {
|
|
636
|
+
if (typeof url === 'string') {
|
|
637
|
+
url = new URL(url);
|
|
638
|
+
}
|
|
639
|
+
return {
|
|
640
|
+
scheme: url.protocol.split(':')[0],
|
|
641
|
+
// Intentional, DevTools uses different terminology
|
|
642
|
+
host: url.hostname,
|
|
643
|
+
securityOrigin: url.origin,
|
|
644
|
+
};
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
/**
|
|
648
|
+
* @param {LH.Artifacts.TraceEngineResult} traceEngineResult
|
|
649
|
+
* @param {Map<number, number[]>} workerThreads
|
|
650
|
+
* @param {import('@paulirish/trace_engine/models/trace/types/TraceEvents.js').SyntheticNetworkRequest} request
|
|
651
|
+
* @return {Lantern.NetworkRequest=}
|
|
652
|
+
*/
|
|
653
|
+
static _createLanternRequest(traceEngineResult, workerThreads, request) {
|
|
654
|
+
if (request.args.data.connectionId === undefined ||
|
|
655
|
+
request.args.data.connectionReused === undefined) {
|
|
656
|
+
throw new Error('Trace is too old');
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
let url;
|
|
660
|
+
try {
|
|
661
|
+
url = new URL(request.args.data.url);
|
|
662
|
+
} catch (e) {
|
|
663
|
+
return;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
const timing = request.args.data.timing ? {
|
|
667
|
+
// These two timings are not included in the trace.
|
|
668
|
+
workerFetchStart: -1,
|
|
669
|
+
workerRespondWithSettled: -1,
|
|
670
|
+
...request.args.data.timing,
|
|
671
|
+
} : undefined;
|
|
672
|
+
|
|
673
|
+
const networkRequestTime = timing ?
|
|
674
|
+
timing.requestTime * 1000 :
|
|
675
|
+
request.args.data.syntheticData.downloadStart / 1000;
|
|
676
|
+
|
|
677
|
+
let fromWorker = false;
|
|
678
|
+
const tids = workerThreads.get(request.pid);
|
|
679
|
+
if (tids?.includes(request.tid)) {
|
|
680
|
+
fromWorker = true;
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
// TraceEngine collects worker thread ids in a different manner than `workerThreads` does.
|
|
684
|
+
// AFAIK these should be equivalent, but in case they are not let's also check this for now.
|
|
685
|
+
if (traceEngineResult.data.Workers.workerIdByThread.has(request.tid)) {
|
|
686
|
+
fromWorker = true;
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
// `initiator` in the trace does not contain the stack trace for JS-initiated
|
|
690
|
+
// requests. Instead, that is stored in the `stackTrace` property of the SyntheticNetworkRequest.
|
|
691
|
+
// There are some minor differences in the fields, accounted for here.
|
|
692
|
+
// Most importantly, there seems to be fewer frames in the trace than the equivalent
|
|
693
|
+
// events over the CDP. This results in less accuracy in determining the initiator request,
|
|
694
|
+
// which means less edges in the graph, which mean worse results.
|
|
695
|
+
// TODO: Should fix in Chromium.
|
|
696
|
+
/** @type {Lantern.NetworkRequest['initiator']} */
|
|
697
|
+
const initiator = request.args.data.initiator ?? {type: 'other'};
|
|
698
|
+
if (request.args.data.stackTrace) {
|
|
699
|
+
const callFrames = request.args.data.stackTrace.map(f => {
|
|
700
|
+
return {
|
|
701
|
+
scriptId: String(f.scriptId),
|
|
702
|
+
url: f.url,
|
|
703
|
+
lineNumber: f.lineNumber - 1,
|
|
704
|
+
columnNumber: f.columnNumber - 1,
|
|
705
|
+
functionName: f.functionName,
|
|
706
|
+
};
|
|
707
|
+
});
|
|
708
|
+
initiator.stack = {callFrames};
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
let resourceType = request.args.data.resourceType;
|
|
712
|
+
if (request.args.data.initiator?.fetchType === 'xmlhttprequest') {
|
|
713
|
+
// @ts-expect-error yes XHR is a valid ResourceType. TypeScript const enums are so unhelpful.
|
|
714
|
+
resourceType = 'XHR';
|
|
715
|
+
} else if (request.args.data.initiator?.fetchType === 'fetch') {
|
|
716
|
+
// @ts-expect-error yes Fetch is a valid ResourceType. TypeScript const enums are so unhelpful.
|
|
717
|
+
resourceType = 'Fetch';
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
// TODO: set decodedBodyLength for data urls in Trace Engine.
|
|
721
|
+
let resourceSize = request.args.data.decodedBodyLength ?? 0;
|
|
722
|
+
if (url.protocol === 'data:' && resourceSize === 0) {
|
|
723
|
+
const needle = 'base64,';
|
|
724
|
+
const index = url.pathname.indexOf(needle);
|
|
725
|
+
if (index !== -1) {
|
|
726
|
+
resourceSize = atob(url.pathname.substring(index + needle.length)).length;
|
|
727
|
+
}
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
return {
|
|
731
|
+
rawRequest: request,
|
|
732
|
+
requestId: request.args.data.requestId,
|
|
733
|
+
connectionId: request.args.data.connectionId,
|
|
734
|
+
connectionReused: request.args.data.connectionReused,
|
|
735
|
+
url: request.args.data.url,
|
|
736
|
+
protocol: request.args.data.protocol,
|
|
737
|
+
parsedURL: this._createParsedUrl(url),
|
|
738
|
+
documentURL: request.args.data.requestingFrameUrl,
|
|
739
|
+
rendererStartTime: request.ts / 1000,
|
|
740
|
+
networkRequestTime,
|
|
741
|
+
responseHeadersEndTime: request.args.data.syntheticData.downloadStart / 1000,
|
|
742
|
+
networkEndTime: request.args.data.syntheticData.finishTime / 1000,
|
|
743
|
+
transferSize: request.args.data.encodedDataLength,
|
|
744
|
+
resourceSize,
|
|
745
|
+
fromDiskCache: request.args.data.syntheticData.isDiskCached,
|
|
746
|
+
fromMemoryCache: request.args.data.syntheticData.isMemoryCached,
|
|
747
|
+
isLinkPreload: request.args.data.isLinkPreload,
|
|
748
|
+
finished: request.args.data.finished,
|
|
749
|
+
failed: request.args.data.failed,
|
|
750
|
+
statusCode: request.args.data.statusCode,
|
|
751
|
+
initiator,
|
|
752
|
+
timing,
|
|
753
|
+
resourceType,
|
|
754
|
+
mimeType: request.args.data.mimeType,
|
|
755
|
+
priority: request.args.data.priority,
|
|
756
|
+
frameId: request.args.data.frame,
|
|
757
|
+
fromWorker,
|
|
758
|
+
// Set later.
|
|
759
|
+
redirects: undefined,
|
|
760
|
+
redirectSource: undefined,
|
|
761
|
+
redirectDestination: undefined,
|
|
762
|
+
initiatorRequest: undefined,
|
|
763
|
+
};
|
|
764
|
+
}
|
|
765
|
+
|
|
766
|
+
/**
|
|
767
|
+
*
|
|
768
|
+
* @param {Lantern.NetworkRequest[]} lanternRequests
|
|
769
|
+
*/
|
|
770
|
+
static _linkInitiators(lanternRequests) {
|
|
771
|
+
/** @type {Map<string, Lantern.NetworkRequest[]>} */
|
|
772
|
+
const requestsByURL = new Map();
|
|
773
|
+
for (const request of lanternRequests) {
|
|
774
|
+
const requests = requestsByURL.get(request.url) || [];
|
|
775
|
+
requests.push(request);
|
|
776
|
+
requestsByURL.set(request.url, requests);
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
for (const request of lanternRequests) {
|
|
780
|
+
const initiatorRequest = PageDependencyGraph.chooseInitiatorRequest(request, requestsByURL);
|
|
781
|
+
if (initiatorRequest) {
|
|
782
|
+
request.initiatorRequest = initiatorRequest;
|
|
783
|
+
}
|
|
784
|
+
}
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
/**
|
|
788
|
+
* @param {LH.TraceEvent[]} mainThreadEvents
|
|
789
|
+
* @param {LH.Trace} trace
|
|
790
|
+
* @param {LH.Artifacts.TraceEngineResult} traceEngineResult
|
|
791
|
+
* @param {LH.Artifacts.URL} URL
|
|
792
|
+
*/
|
|
793
|
+
static async createGraphFromTrace(mainThreadEvents, trace, traceEngineResult, URL) {
|
|
794
|
+
const workerThreads = this._findWorkerThreads(trace);
|
|
795
|
+
|
|
796
|
+
/** @type {Lantern.NetworkRequest[]} */
|
|
797
|
+
const lanternRequests = [];
|
|
798
|
+
for (const request of traceEngineResult.data.NetworkRequests.byTime) {
|
|
799
|
+
const lanternRequest = this._createLanternRequest(traceEngineResult, workerThreads, request);
|
|
800
|
+
if (lanternRequest) {
|
|
801
|
+
lanternRequests.push(lanternRequest);
|
|
802
|
+
}
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
// TraceEngine consolidates all redirects into a single request object, but lantern needs
|
|
806
|
+
// an entry for each redirected request.
|
|
807
|
+
for (const request of [...lanternRequests]) {
|
|
808
|
+
if (!request.rawRequest) continue;
|
|
809
|
+
|
|
810
|
+
const redirects = request.rawRequest.args.data.redirects;
|
|
811
|
+
if (!redirects.length) continue;
|
|
812
|
+
|
|
813
|
+
const requestChain = [];
|
|
814
|
+
for (const redirect of redirects) {
|
|
815
|
+
const redirectedRequest = structuredClone(request);
|
|
816
|
+
|
|
817
|
+
redirectedRequest.networkRequestTime = redirect.ts / 1000;
|
|
818
|
+
redirectedRequest.rendererStartTime = redirectedRequest.networkRequestTime;
|
|
819
|
+
|
|
820
|
+
redirectedRequest.networkEndTime = (redirect.ts + redirect.dur) / 1000;
|
|
821
|
+
redirectedRequest.responseHeadersEndTime = redirectedRequest.networkEndTime;
|
|
822
|
+
|
|
823
|
+
redirectedRequest.timing = {
|
|
824
|
+
requestTime: redirectedRequest.networkRequestTime / 1000,
|
|
825
|
+
receiveHeadersStart: redirectedRequest.responseHeadersEndTime,
|
|
826
|
+
receiveHeadersEnd: redirectedRequest.responseHeadersEndTime,
|
|
827
|
+
proxyStart: -1,
|
|
828
|
+
proxyEnd: -1,
|
|
829
|
+
dnsStart: -1,
|
|
830
|
+
dnsEnd: -1,
|
|
831
|
+
connectStart: -1,
|
|
832
|
+
connectEnd: -1,
|
|
833
|
+
sslStart: -1,
|
|
834
|
+
sslEnd: -1,
|
|
835
|
+
sendStart: -1,
|
|
836
|
+
sendEnd: -1,
|
|
837
|
+
workerStart: -1,
|
|
838
|
+
workerReady: -1,
|
|
839
|
+
workerFetchStart: -1,
|
|
840
|
+
workerRespondWithSettled: -1,
|
|
841
|
+
pushStart: -1,
|
|
842
|
+
pushEnd: -1,
|
|
843
|
+
};
|
|
844
|
+
|
|
845
|
+
redirectedRequest.url = redirect.url;
|
|
846
|
+
redirectedRequest.parsedURL = this._createParsedUrl(redirect.url);
|
|
847
|
+
// TODO: TraceEngine is not retaining the actual status code.
|
|
848
|
+
redirectedRequest.statusCode = 302;
|
|
849
|
+
redirectedRequest.resourceType = undefined;
|
|
850
|
+
// TODO: TraceEngine is not retaining transfer size of redirected request.
|
|
851
|
+
redirectedRequest.transferSize = 400;
|
|
852
|
+
requestChain.push(redirectedRequest);
|
|
853
|
+
lanternRequests.push(redirectedRequest);
|
|
854
|
+
}
|
|
855
|
+
requestChain.push(request);
|
|
856
|
+
|
|
857
|
+
for (let i = 0; i < requestChain.length; i++) {
|
|
858
|
+
const request = requestChain[i];
|
|
859
|
+
if (i > 0) {
|
|
860
|
+
request.redirectSource = requestChain[i - 1];
|
|
861
|
+
request.redirects = requestChain.slice(0, i);
|
|
862
|
+
}
|
|
863
|
+
if (i !== requestChain.length - 1) {
|
|
864
|
+
request.redirectDestination = requestChain[i + 1];
|
|
865
|
+
}
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
// Apply the `:redirect` requestId convention: only redirects[0].requestId is the actual
|
|
869
|
+
// requestId, all the rest have n occurences of `:redirect` as a suffix.
|
|
870
|
+
for (let i = 1; i < requestChain.length; i++) {
|
|
871
|
+
requestChain[i].requestId = `${requestChain[i - 1].requestId}:redirect`;
|
|
872
|
+
}
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
this._linkInitiators(lanternRequests);
|
|
876
|
+
|
|
877
|
+
// This would already be sorted by rendererStartTime, if not for the redirect unwrapping done
|
|
878
|
+
// above.
|
|
879
|
+
lanternRequests.sort((a, b) => a.rendererStartTime - b.rendererStartTime);
|
|
880
|
+
|
|
881
|
+
const graph = PageDependencyGraph.createGraph(mainThreadEvents, lanternRequests, URL);
|
|
882
|
+
return {graph, records: lanternRequests};
|
|
883
|
+
}
|
|
884
|
+
|
|
442
885
|
/**
|
|
443
886
|
*
|
|
444
887
|
* @param {Node} rootNode
|
|
@@ -9,7 +9,7 @@ export class ConnectionPool {
|
|
|
9
9
|
/** @type {Map<string, TcpConnection[]>} */
|
|
10
10
|
_connectionsByOrigin: Map<string, TcpConnection[]>;
|
|
11
11
|
/** @type {Map<Lantern.NetworkRequest, TcpConnection>} */
|
|
12
|
-
|
|
12
|
+
_connectionsByRequest: Map<Lantern.NetworkRequest, TcpConnection>;
|
|
13
13
|
_connectionsInUse: Set<any>;
|
|
14
14
|
_connectionReusedByRequestId: Map<string, boolean>;
|
|
15
15
|
/**
|
|
@@ -22,26 +22,26 @@ export class ConnectionPool {
|
|
|
22
22
|
*/
|
|
23
23
|
_findAvailableConnectionWithLargestCongestionWindow(connections: Array<TcpConnection>): TcpConnection | null;
|
|
24
24
|
/**
|
|
25
|
-
* This method finds an available connection to the origin specified by the network
|
|
25
|
+
* This method finds an available connection to the origin specified by the network request or null
|
|
26
26
|
* if no connection was available. If returned, connection will not be available for other network
|
|
27
27
|
* records until release is called.
|
|
28
28
|
*
|
|
29
|
-
* @param {Lantern.NetworkRequest}
|
|
29
|
+
* @param {Lantern.NetworkRequest} request
|
|
30
30
|
* @return {?TcpConnection}
|
|
31
31
|
*/
|
|
32
|
-
acquire(
|
|
32
|
+
acquire(request: Lantern.NetworkRequest): TcpConnection | null;
|
|
33
33
|
/**
|
|
34
|
-
* Return the connection currently being used to fetch a
|
|
35
|
-
* currently being used for this
|
|
34
|
+
* Return the connection currently being used to fetch a request. If no connection
|
|
35
|
+
* currently being used for this request, an error will be thrown.
|
|
36
36
|
*
|
|
37
|
-
* @param {Lantern.NetworkRequest}
|
|
37
|
+
* @param {Lantern.NetworkRequest} request
|
|
38
38
|
* @return {TcpConnection}
|
|
39
39
|
*/
|
|
40
|
-
|
|
40
|
+
acquireActiveConnectionFromRequest(request: Lantern.NetworkRequest): TcpConnection;
|
|
41
41
|
/**
|
|
42
|
-
* @param {Lantern.NetworkRequest}
|
|
42
|
+
* @param {Lantern.NetworkRequest} request
|
|
43
43
|
*/
|
|
44
|
-
release(
|
|
44
|
+
release(request: Lantern.NetworkRequest): void;
|
|
45
45
|
}
|
|
46
46
|
import * as Lantern from '../types/lantern.js';
|
|
47
47
|
import { TcpConnection } from './tcp-connection.js';
|