| 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 |
|---|
Chromium Code Reviews
Issue 3009553002:
Refactor Histogram relationship diagnostics. (Closed)
