OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Copyright 2016 The Chromium Authors. All rights reserved. | 3 Copyright 2016 The Chromium Authors. All rights reserved. |
4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
5 found in the LICENSE file. | 5 found in the LICENSE file. |
6 --> | 6 --> |
7 | 7 |
8 <link rel="import" href="/tracing/base/category_util.html"> | 8 <link rel="import" href="/tracing/base/category_util.html"> |
9 <link rel="import" href="/tracing/base/math/statistics.html"> | 9 <link rel="import" href="/tracing/base/math/statistics.html"> |
10 <link rel="import" href="/tracing/metrics/metric_registry.html"> | 10 <link rel="import" href="/tracing/metrics/metric_registry.html"> |
(...skipping 202 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
213 const navStartToFMPRange = tr.b.math.Range.fromExplicitRange( | 213 const navStartToFMPRange = tr.b.math.Range.fromExplicitRange( |
214 navigationStart.start, fmpMarkerEvent.start); | 214 navigationStart.start, fmpMarkerEvent.start); |
215 const networkEvents = getNetworkEventsInRange( | 215 const networkEvents = getNetworkEventsInRange( |
216 rendererHelper.process, navStartToFMPRange); | 216 rendererHelper.process, navStartToFMPRange); |
217 const timeToFirstMeaningfulPaint = navStartToFMPRange.duration; | 217 const timeToFirstMeaningfulPaint = navStartToFMPRange.duration; |
218 const breakdownTree = tr.metrics.sh.generateWallClockTimeBreakdownTree( | 218 const breakdownTree = tr.metrics.sh.generateWallClockTimeBreakdownTree( |
219 rendererHelper.mainThread, networkEvents, navStartToFMPRange); | 219 rendererHelper.mainThread, networkEvents, navStartToFMPRange); |
220 const breakdownDiagnostic = createBreakdownDiagnostic(breakdownTree); | 220 const breakdownDiagnostic = createBreakdownDiagnostic(breakdownTree); |
221 samples.push({ | 221 samples.push({ |
222 value: timeToFirstMeaningfulPaint, | 222 value: timeToFirstMeaningfulPaint, |
| 223 breakdownTree, |
223 diagnostics: { | 224 diagnostics: { |
224 'Breakdown of [navStart, FMP]': breakdownDiagnostic, | 225 breakdown: breakdownDiagnostic, |
225 'Start': new RelatedEventSet(navigationStart), | 226 start: new RelatedEventSet(navigationStart), |
226 'End': new RelatedEventSet(fmpMarkerEvent), | 227 end: new RelatedEventSet(fmpMarkerEvent), |
227 'Navigation infos': new tr.v.d.GenericSet([{ | 228 infos: new tr.v.d.GenericSet([{ |
228 url, | 229 url, |
229 pid: rendererHelper.pid, | 230 pid: rendererHelper.pid, |
230 start: navigationStart.start, | 231 start: navigationStart.start, |
231 fmp: fmpMarkerEvent.start, | 232 fmp: fmpMarkerEvent.start, |
232 }]), | 233 }]), |
233 } | 234 } |
234 }); | 235 }); |
235 return {firstMeaningfulPaint: fmpMarkerEvent.start, url}; | 236 return {firstMeaningfulPaint: fmpMarkerEvent.start, url}; |
236 } | 237 } |
237 | 238 |
238 function addFirstMeaningfulPaintCpuTimeSample(samples, rendererHelper, | 239 function addFirstMeaningfulPaintCpuTimeSample(samples, rendererHelper, |
239 frameIdRef, navigationStart, fmpMarkerEvent) { | 240 frameIdRef, navigationStart, fmpMarkerEvent) { |
240 const navStartToFMPCpuRange = tr.b.math.Range.fromExplicitRange( | 241 const navStartToFMPCpuRange = tr.b.math.Range.fromExplicitRange( |
241 navigationStart.cpuStart, fmpMarkerEvent.cpuStart); | 242 navigationStart.cpuStart, fmpMarkerEvent.cpuStart); |
242 const snapshot = findFrameLoaderSnapshotAt( | 243 const snapshot = findFrameLoaderSnapshotAt( |
243 rendererHelper, frameIdRef, fmpMarkerEvent.start); | 244 rendererHelper, frameIdRef, fmpMarkerEvent.start); |
244 if (!snapshot || !snapshot.args.isLoadingMainFrame) return; | 245 if (!snapshot || !snapshot.args.isLoadingMainFrame) return; |
245 const url = snapshot.args.documentLoaderURL; | 246 const url = snapshot.args.documentLoaderURL; |
246 if (shouldIgnoreURL(url)) return; | 247 if (shouldIgnoreURL(url)) return; |
247 | 248 |
248 const mainThreadCpuTime = getMainThreadCpuTime( | 249 const mainThreadCpuTime = getMainThreadCpuTime( |
249 rendererHelper, navStartToFMPCpuRange); | 250 rendererHelper, navStartToFMPCpuRange); |
250 | 251 |
251 const breakdownTree = tr.metrics.sh.generateCpuTimeBreakdownTree( | 252 const breakdownTree = tr.metrics.sh.generateCpuTimeBreakdownTree( |
252 rendererHelper.mainThread, navStartToFMPCpuRange); | 253 rendererHelper.mainThread, navStartToFMPCpuRange); |
253 const breakdownDiagnostic = createBreakdownDiagnostic(breakdownTree); | 254 const breakdownDiagnostic = createBreakdownDiagnostic(breakdownTree); |
254 samples.push({ | 255 samples.push({ |
255 value: mainThreadCpuTime, | 256 value: mainThreadCpuTime, |
| 257 breakdownTree, |
256 diagnostics: { | 258 diagnostics: { |
257 'Breakdown of [navStart, FMP]': breakdownDiagnostic, | 259 breakdown: breakdownDiagnostic, |
258 'Start': new RelatedEventSet(navigationStart), | 260 start: new RelatedEventSet(navigationStart), |
259 'End': new RelatedEventSet(fmpMarkerEvent), | 261 end: new RelatedEventSet(fmpMarkerEvent), |
260 'Navigation infos': new tr.v.d.GenericSet([{ | 262 infos: new tr.v.d.GenericSet([{ |
261 url, | 263 url, |
262 pid: rendererHelper.pid, | 264 pid: rendererHelper.pid, |
263 start: navigationStart.start, | 265 start: navigationStart.start, |
264 fmp: fmpMarkerEvent.start, | 266 fmp: fmpMarkerEvent.start, |
265 }]), | 267 }]), |
266 } | 268 } |
267 }); | 269 }); |
268 } | 270 } |
269 | 271 |
270 function getMainThreadCpuTime(rendererHelper, rangeOfInterest) { | 272 function getMainThreadCpuTime(rendererHelper, rangeOfInterest) { |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
316 const networkEvents = getNetworkEventsInRange( | 318 const networkEvents = getNetworkEventsInRange( |
317 rendererHelper.process, navStartToFirstInteractiveRange); | 319 rendererHelper.process, navStartToFirstInteractiveRange); |
318 const breakdownTree = tr.metrics.sh.generateWallClockTimeBreakdownTree( | 320 const breakdownTree = tr.metrics.sh.generateWallClockTimeBreakdownTree( |
319 rendererHelper.mainThread, networkEvents, | 321 rendererHelper.mainThread, networkEvents, |
320 navStartToFirstInteractiveRange); | 322 navStartToFirstInteractiveRange); |
321 const breakdownDiagnostic = createBreakdownDiagnostic(breakdownTree); | 323 const breakdownDiagnostic = createBreakdownDiagnostic(breakdownTree); |
322 | 324 |
323 const timeToFirstInteractive = navStartToFirstInteractiveRange.duration; | 325 const timeToFirstInteractive = navStartToFirstInteractiveRange.duration; |
324 samples.push({ | 326 samples.push({ |
325 value: timeToFirstInteractive, | 327 value: timeToFirstInteractive, |
| 328 breakdownTree, |
326 diagnostics: { | 329 diagnostics: { |
327 'Start': new RelatedEventSet(navigationStart), | 330 start: new RelatedEventSet(navigationStart), |
328 'Last long task': new RelatedEventSet(lastLongTaskEvent), | 331 lastLongTask: new RelatedEventSet(lastLongTaskEvent), |
329 'Navigation infos': new tr.v.d.GenericSet([{ | 332 infos: new tr.v.d.GenericSet([{ |
330 url, | 333 url, |
331 pid: rendererHelper.pid, | 334 pid: rendererHelper.pid, |
332 start: navigationStartTime, | 335 start: navigationStartTime, |
333 interactive: firstInteractive, | 336 interactive: firstInteractive, |
334 }]), | 337 }]), |
335 'Breakdown of [navStart, Interactive]': breakdownDiagnostic, | 338 breakdown: breakdownDiagnostic, |
336 } | 339 } |
337 }); | 340 }); |
338 } | 341 } |
339 | 342 |
340 /** | 343 /** |
341 * Computes Time to first meaningful paint (TTFMP) & time to interactive (TTI) | 344 * Computes Time to first meaningful paint (TTFMP) & time to interactive (TTI) |
342 * for a renderer represented by |rendererHelper| and returns them as | 345 * for a renderer represented by |rendererHelper| and returns them as |
343 * histogram samples. | 346 * histogram samples. |
344 * | 347 * |
345 * First meaningful paint is the paint following the layout with the highest | 348 * First meaningful paint is the paint following the layout with the highest |
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
435 return { | 438 return { |
436 firstPaintSamples, | 439 firstPaintSamples, |
437 firstContentfulPaintSamples, | 440 firstContentfulPaintSamples, |
438 onLoadSamples, | 441 onLoadSamples, |
439 firstMeaningfulPaintSamples, | 442 firstMeaningfulPaintSamples, |
440 firstMeaningfulPaintCpuTimeSamples, | 443 firstMeaningfulPaintCpuTimeSamples, |
441 firstInteractiveSamples | 444 firstInteractiveSamples |
442 }; | 445 }; |
443 } | 446 } |
444 | 447 |
445 function addSamplesToHistogram(samples, histogram) { | 448 function addSamplesToHistogram(samples, histogram, histograms) { |
| 449 const relatedHistograms = new Map(); |
446 for (const sample of samples) { | 450 for (const sample of samples) { |
447 histogram.addSample(sample.value, sample.diagnostics); | 451 histogram.addSample(sample.value, sample.diagnostics); |
| 452 |
| 453 if (!sample.breakdownTree) continue; |
| 454 for (const [category, breakdown] of Object.entries( |
| 455 sample.breakdownTree)) { |
| 456 const relatedName = `${histogram.name}:${category}`; |
| 457 let relatedHist = relatedHistograms.get(relatedName); |
| 458 if (!relatedHist) { |
| 459 relatedHist = histograms.createHistogram( |
| 460 relatedName, histogram.unit, [], { |
| 461 binBoundaries: FIRST_PAINT_BOUNDARIES, |
| 462 summaryOptions: SUMMARY_OPTIONS, |
| 463 }); |
| 464 relatedHistograms.set(relatedName, relatedHist); |
| 465 |
| 466 let relatedNames = histogram.diagnostics.get('breakdown'); |
| 467 if (!relatedNames) { |
| 468 relatedNames = new tr.v.d.RelatedNameMap(); |
| 469 histogram.diagnostics.set('breakdown', relatedNames); |
| 470 } |
| 471 relatedNames.set(category, relatedName); |
| 472 } |
| 473 relatedHist.addSample(breakdown.total, { |
| 474 breakdown: tr.v.d.Breakdown.fromEntries( |
| 475 Object.entries(breakdown.events)), |
| 476 }); |
| 477 } |
448 } | 478 } |
449 } | 479 } |
450 | 480 |
451 function loadingMetric(histograms, model) { | 481 function loadingMetric(histograms, model) { |
452 const firstPaintHistogram = histograms.createHistogram( | 482 const firstPaintHistogram = histograms.createHistogram( |
453 'timeToFirstPaint', timeDurationInMs_smallerIsBetter, [], { | 483 'timeToFirstPaint', timeDurationInMs_smallerIsBetter, [], { |
454 binBoundaries: FIRST_PAINT_BOUNDARIES, | 484 binBoundaries: FIRST_PAINT_BOUNDARIES, |
455 description: 'time to first paint', | 485 description: 'time to first paint', |
456 summaryOptions: SUMMARY_OPTIONS, | 486 summaryOptions: SUMMARY_OPTIONS, |
457 }); | 487 }); |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
489 | 519 |
490 const chromeHelper = model.getOrCreateHelper( | 520 const chromeHelper = model.getOrCreateHelper( |
491 tr.model.helpers.ChromeModelHelper); | 521 tr.model.helpers.ChromeModelHelper); |
492 for (const pid in chromeHelper.rendererHelpers) { | 522 for (const pid in chromeHelper.rendererHelpers) { |
493 const rendererHelper = chromeHelper.rendererHelpers[pid]; | 523 const rendererHelper = chromeHelper.rendererHelpers[pid]; |
494 if (rendererHelper.isChromeTracingUI) continue; | 524 if (rendererHelper.isChromeTracingUI) continue; |
495 | 525 |
496 const samplesSet = | 526 const samplesSet = |
497 collectLoadingMetricsForRenderer(rendererHelper); | 527 collectLoadingMetricsForRenderer(rendererHelper); |
498 | 528 |
499 addSamplesToHistogram(samplesSet.firstPaintSamples, | 529 addSamplesToHistogram( |
500 firstPaintHistogram); | 530 samplesSet.firstPaintSamples, firstPaintHistogram, histograms); |
501 addSamplesToHistogram(samplesSet.firstContentfulPaintSamples, | 531 addSamplesToHistogram( |
502 firstContentfulPaintHistogram); | 532 samplesSet.firstContentfulPaintSamples, |
503 addSamplesToHistogram(samplesSet.onLoadSamples, onLoadHistogram); | 533 firstContentfulPaintHistogram, |
504 addSamplesToHistogram(samplesSet.firstMeaningfulPaintSamples, | 534 histograms); |
505 firstMeaningfulPaintHistogram); | 535 addSamplesToHistogram( |
506 addSamplesToHistogram(samplesSet.firstMeaningfulPaintCpuTimeSamples, | 536 samplesSet.onLoadSamples, onLoadHistogram, histograms); |
507 firstMeaningfulPaintCpuTimeHistogram); | 537 addSamplesToHistogram( |
508 addSamplesToHistogram(samplesSet.firstInteractiveSamples, | 538 samplesSet.firstMeaningfulPaintSamples, |
509 firstInteractiveHistogram); | 539 firstMeaningfulPaintHistogram, |
| 540 histograms); |
| 541 addSamplesToHistogram( |
| 542 samplesSet.firstMeaningfulPaintCpuTimeSamples, |
| 543 firstMeaningfulPaintCpuTimeHistogram, |
| 544 histograms); |
| 545 addSamplesToHistogram( |
| 546 samplesSet.firstInteractiveSamples, |
| 547 firstInteractiveHistogram, |
| 548 histograms); |
510 } | 549 } |
511 } | 550 } |
512 | 551 |
513 tr.metrics.MetricRegistry.register(loadingMetric); | 552 tr.metrics.MetricRegistry.register(loadingMetric); |
514 | 553 |
515 return { | 554 return { |
516 loadingMetric, | 555 loadingMetric, |
517 getNetworkEventsInRange, | 556 getNetworkEventsInRange, |
518 collectLoadingMetricsForRenderer, | 557 collectLoadingMetricsForRenderer, |
519 RESPONSIVENESS_THRESHOLD_MS, | 558 RESPONSIVENESS_THRESHOLD_MS, |
520 INTERACTIVE_WINDOW_SIZE_MS, | 559 INTERACTIVE_WINDOW_SIZE_MS, |
521 }; | 560 }; |
522 }); | 561 }); |
523 </script> | 562 </script> |
OLD | NEW |