@paulirish/trace_engine 0.0.58 → 0.0.60
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/.tmp/tsbuildinfo/analyze-trace.d.mts +2 -3
- package/.tmp/tsbuildinfo/analyze-trace.d.mts.map +1 -1
- package/.tmp/tsbuildinfo/tsconfig.tsbuildinfo +1 -1
- package/LICENSE +1 -1
- package/README.md +28 -1
- package/analyze-trace.mjs +5 -3
- package/core/platform/ArrayUtilities.d.ts +1 -0
- package/core/platform/ArrayUtilities.js +2 -2
- package/core/platform/ArrayUtilities.js.map +1 -1
- package/core/platform/Brand.js +1 -1
- package/core/platform/Brand.js.map +1 -1
- package/core/platform/Constructor.js +1 -1
- package/core/platform/Constructor.js.map +1 -1
- package/core/platform/DOMUtilities.js +1 -1
- package/core/platform/DOMUtilities.js.map +1 -1
- package/core/platform/DateUtilities.js +1 -1
- package/core/platform/DateUtilities.js.map +1 -1
- package/core/platform/DevToolsPath.js +1 -1
- package/core/platform/DevToolsPath.js.map +1 -1
- package/core/platform/KeyboardUtilities.js +1 -1
- package/core/platform/KeyboardUtilities.js.map +1 -1
- package/core/platform/MapUtilities.js +1 -1
- package/core/platform/MapUtilities.js.map +1 -1
- package/core/platform/MimeType.js +1 -1
- package/core/platform/MimeType.js.map +1 -1
- package/core/platform/NumberUtilities.js +1 -1
- package/core/platform/NumberUtilities.js.map +1 -1
- package/core/platform/StringUtilities.d.ts +2 -1
- package/core/platform/StringUtilities.js +34 -32
- package/core/platform/StringUtilities.js.map +1 -1
- package/core/platform/Timing.js +1 -1
- package/core/platform/Timing.js.map +1 -1
- package/core/platform/TypedArrayUtilities.js +1 -1
- package/core/platform/TypedArrayUtilities.js.map +1 -1
- package/core/platform/TypescriptUtilities.js +1 -1
- package/core/platform/TypescriptUtilities.js.map +1 -1
- package/core/platform/UIString.js +1 -1
- package/core/platform/UIString.js.map +1 -1
- package/core/platform/UserVisibleError.js +1 -1
- package/core/platform/UserVisibleError.js.map +1 -1
- package/core/platform/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/core/platform/platform-tsconfig.json +6 -2
- package/core/platform/platform.js +3 -29
- package/core/platform/platform.js.map +1 -1
- package/generated/protocol.d.ts +224 -14
- package/generated/protocol.js +1 -1
- package/locales/af.json +0 -9
- package/locales/am.json +0 -9
- package/locales/ar.json +0 -9
- package/locales/as.json +0 -9
- package/locales/az.json +0 -9
- package/locales/be.json +0 -9
- package/locales/bg.json +0 -9
- package/locales/bn.json +1 -10
- package/locales/bs.json +0 -9
- package/locales/ca.json +0 -9
- package/locales/cs.json +0 -9
- package/locales/cy.json +0 -9
- package/locales/da.json +0 -9
- package/locales/de.json +0 -9
- package/locales/el.json +0 -9
- package/locales/en-GB.json +0 -9
- package/locales/en-US.json +8 -8
- package/locales/en-XL.json +8 -8
- package/locales/es-419.json +0 -9
- package/locales/es.json +0 -9
- package/locales/et.json +0 -9
- package/locales/eu.json +0 -9
- package/locales/fa.json +0 -9
- package/locales/fi.json +0 -9
- package/locales/fil.json +0 -9
- package/locales/fr-CA.json +0 -9
- package/locales/fr.json +0 -9
- package/locales/gl.json +0 -9
- package/locales/gu.json +0 -9
- package/locales/he.json +0 -9
- package/locales/hi.json +0 -9
- package/locales/hr.json +4 -13
- package/locales/hu.json +0 -9
- package/locales/hy.json +0 -9
- package/locales/id.json +0 -9
- package/locales/is.json +0 -9
- package/locales/it.json +0 -9
- package/locales/ja.json +0 -9
- package/locales/ka.json +0 -9
- package/locales/kk.json +0 -9
- package/locales/km.json +0 -9
- package/locales/kn.json +0 -9
- package/locales/ko.json +0 -9
- package/locales/ky.json +0 -9
- package/locales/lo.json +0 -9
- package/locales/lt.json +0 -9
- package/locales/lv.json +0 -9
- package/locales/mk.json +0 -9
- package/locales/ml.json +0 -9
- package/locales/mn.json +0 -9
- package/locales/mr.json +0 -9
- package/locales/ms.json +0 -9
- package/locales/my.json +1 -10
- package/locales/ne.json +22 -31
- package/locales/nl.json +0 -9
- package/locales/no.json +0 -9
- package/locales/or.json +0 -9
- package/locales/pa.json +0 -9
- package/locales/pl.json +0 -9
- package/locales/pt-PT.json +0 -9
- package/locales/pt.json +0 -9
- package/locales/ro.json +0 -9
- package/locales/ru.json +0 -9
- package/locales/si.json +1 -10
- package/locales/sk.json +0 -9
- package/locales/sl.json +0 -9
- package/locales/sq.json +0 -9
- package/locales/sr-Latn.json +0 -9
- package/locales/sr.json +0 -9
- package/locales/sv.json +0 -9
- package/locales/sw.json +0 -9
- package/locales/ta.json +0 -9
- package/locales/te.json +0 -9
- package/locales/th.json +0 -9
- package/locales/tr.json +0 -9
- package/locales/uk.json +0 -9
- package/locales/ur.json +0 -9
- package/locales/uz.json +0 -9
- package/locales/vi.json +0 -9
- package/locales/zh-HK.json +0 -9
- package/locales/zh-TW.json +0 -9
- package/locales/zh.json +0 -9
- package/locales/zu.json +0 -9
- package/models/cpu_profile/CPUProfileDataModel.d.ts +1 -0
- package/models/cpu_profile/CPUProfileDataModel.js +1 -1
- package/models/cpu_profile/CPUProfileDataModel.js.map +1 -1
- package/models/cpu_profile/ProfileTreeModel.d.ts +1 -1
- package/models/cpu_profile/ProfileTreeModel.js +1 -1
- package/models/cpu_profile/ProfileTreeModel.js.map +1 -1
- package/models/cpu_profile/cpu_profile-tsconfig.json +6 -2
- package/models/cpu_profile/cpu_profile.js +1 -1
- package/models/cpu_profile/cpu_profile.js.map +1 -1
- package/models/cpu_profile/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/EntityMapper.d.ts +33 -0
- package/models/trace/EntityMapper.js +123 -0
- package/models/trace/EntityMapper.js.map +1 -0
- package/models/trace/EventsSerializer.d.ts +11 -0
- package/models/trace/EventsSerializer.js +82 -0
- package/models/trace/EventsSerializer.js.map +1 -0
- package/models/trace/LanternComputationData.d.ts +3 -3
- package/models/trace/LanternComputationData.js +12 -10
- package/models/trace/LanternComputationData.js.map +1 -1
- package/models/trace/ModelImpl.d.ts +7 -14
- package/models/trace/ModelImpl.js +25 -52
- package/models/trace/ModelImpl.js.map +1 -1
- package/models/trace/Name.d.ts +12 -0
- package/models/trace/Name.js +115 -0
- package/models/trace/Name.js.map +1 -0
- package/models/trace/Processor.d.ts +1 -1
- package/models/trace/Processor.js +42 -61
- package/models/trace/Processor.js.map +1 -1
- package/models/trace/Styles.d.ts +50 -0
- package/models/trace/Styles.js +816 -0
- package/models/trace/Styles.js.map +1 -0
- package/models/trace/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/extras/FilmStrip.d.ts +1 -1
- package/models/trace/extras/FilmStrip.js +7 -7
- package/models/trace/extras/FilmStrip.js.map +1 -1
- package/models/trace/extras/MainThreadActivity.js +1 -1
- package/models/trace/extras/MainThreadActivity.js.map +1 -1
- package/models/trace/extras/ScriptDuplication.js +1 -1
- package/models/trace/extras/ScriptDuplication.js.map +1 -1
- package/models/trace/extras/StackTraceForEvent.d.ts +2 -2
- package/models/trace/extras/StackTraceForEvent.js +21 -21
- package/models/trace/extras/StackTraceForEvent.js.map +1 -1
- package/models/trace/extras/ThirdParties.d.ts +2 -2
- package/models/trace/extras/ThirdParties.js +17 -17
- package/models/trace/extras/ThirdParties.js.map +1 -1
- package/models/trace/extras/TraceFilter.d.ts +1 -1
- package/models/trace/extras/TraceFilter.js +1 -1
- package/models/trace/extras/TraceFilter.js.map +1 -1
- package/models/trace/extras/TraceTree.d.ts +1 -0
- package/models/trace/extras/TraceTree.js +2 -2
- package/models/trace/extras/TraceTree.js.map +1 -1
- package/models/trace/extras/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/extras/extras-tsconfig.json +6 -2
- package/models/trace/extras/extras.js.map +1 -1
- package/models/trace/handlers/AnimationFramesHandler.js +11 -11
- package/models/trace/handlers/AnimationFramesHandler.js.map +1 -1
- package/models/trace/handlers/AnimationHandler.js +5 -5
- package/models/trace/handlers/AnimationHandler.js.map +1 -1
- package/models/trace/handlers/AsyncJSCallsHandler.d.ts +3 -3
- package/models/trace/handlers/AsyncJSCallsHandler.js +9 -9
- package/models/trace/handlers/AsyncJSCallsHandler.js.map +1 -1
- package/models/trace/handlers/AuctionWorkletsHandler.js +12 -12
- package/models/trace/handlers/AuctionWorkletsHandler.js.map +1 -1
- package/models/trace/handlers/DOMStatsHandler.js +3 -3
- package/models/trace/handlers/DOMStatsHandler.js.map +1 -1
- package/models/trace/handlers/ExtensionTraceDataHandler.d.ts +15 -2
- package/models/trace/handlers/ExtensionTraceDataHandler.js +53 -64
- package/models/trace/handlers/ExtensionTraceDataHandler.js.map +1 -1
- package/models/trace/handlers/FlowsHandler.js +11 -11
- package/models/trace/handlers/FlowsHandler.js.map +1 -1
- package/models/trace/handlers/FramesHandler.d.ts +7 -0
- package/models/trace/handlers/FramesHandler.js +12 -10
- package/models/trace/handlers/FramesHandler.js.map +1 -1
- package/models/trace/handlers/GPUHandler.js +3 -3
- package/models/trace/handlers/GPUHandler.js.map +1 -1
- package/models/trace/handlers/ImagePaintingHandler.js +13 -13
- package/models/trace/handlers/ImagePaintingHandler.js.map +1 -1
- package/models/trace/handlers/InitiatorsHandler.js +32 -41
- package/models/trace/handlers/InitiatorsHandler.js.map +1 -1
- package/models/trace/handlers/InvalidationsHandler.js +63 -44
- package/models/trace/handlers/InvalidationsHandler.js.map +1 -1
- package/models/trace/handlers/LargestImagePaintHandler.js +5 -4
- package/models/trace/handlers/LargestImagePaintHandler.js.map +1 -1
- package/models/trace/handlers/LargestTextPaintHandler.js +3 -3
- package/models/trace/handlers/LargestTextPaintHandler.js.map +1 -1
- package/models/trace/handlers/LayerTreeHandler.js +11 -11
- package/models/trace/handlers/LayerTreeHandler.js.map +1 -1
- package/models/trace/handlers/LayoutShiftsHandler.d.ts +17 -4
- package/models/trace/handlers/LayoutShiftsHandler.js +47 -40
- package/models/trace/handlers/LayoutShiftsHandler.js.map +1 -1
- package/models/trace/handlers/MemoryHandler.js +3 -3
- package/models/trace/handlers/MemoryHandler.js.map +1 -1
- package/models/trace/handlers/MetaHandler.d.ts +22 -1
- package/models/trace/handlers/MetaHandler.js +30 -29
- package/models/trace/handlers/MetaHandler.js.map +1 -1
- package/models/trace/handlers/ModelHandlers.js +1 -1
- package/models/trace/handlers/ModelHandlers.js.map +1 -1
- package/models/trace/handlers/NetworkRequestsHandler.d.ts +10 -0
- package/models/trace/handlers/NetworkRequestsHandler.js +44 -25
- package/models/trace/handlers/NetworkRequestsHandler.js.map +1 -1
- package/models/trace/handlers/PageFramesHandler.js +3 -3
- package/models/trace/handlers/PageFramesHandler.js.map +1 -1
- package/models/trace/handlers/PageLoadMetricsHandler.js +5 -5
- package/models/trace/handlers/PageLoadMetricsHandler.js.map +1 -1
- package/models/trace/handlers/RendererHandler.d.ts +1 -1
- package/models/trace/handlers/RendererHandler.js +22 -22
- package/models/trace/handlers/RendererHandler.js.map +1 -1
- package/models/trace/handlers/SamplesHandler.d.ts +2 -2
- package/models/trace/handlers/SamplesHandler.js +7 -9
- package/models/trace/handlers/SamplesHandler.js.map +1 -1
- package/models/trace/handlers/ScreenshotsHandler.js +9 -10
- package/models/trace/handlers/ScreenshotsHandler.js.map +1 -1
- package/models/trace/handlers/ScriptsHandler.js +9 -8
- package/models/trace/handlers/ScriptsHandler.js.map +1 -1
- package/models/trace/handlers/SelectorStatsHandler.d.ts +2 -2
- package/models/trace/handlers/SelectorStatsHandler.js +13 -13
- package/models/trace/handlers/SelectorStatsHandler.js.map +1 -1
- package/models/trace/handlers/Threads.d.ts +2 -2
- package/models/trace/handlers/Threads.js +9 -9
- package/models/trace/handlers/Threads.js.map +1 -1
- package/models/trace/handlers/UserInteractionsHandler.d.ts +10 -3
- package/models/trace/handlers/UserInteractionsHandler.js +104 -84
- package/models/trace/handlers/UserInteractionsHandler.js.map +1 -1
- package/models/trace/handlers/UserTimingsHandler.d.ts +21 -0
- package/models/trace/handlers/UserTimingsHandler.js +67 -39
- package/models/trace/handlers/UserTimingsHandler.js.map +1 -1
- package/models/trace/handlers/WarningsHandler.js +14 -14
- package/models/trace/handlers/WarningsHandler.js.map +1 -1
- package/models/trace/handlers/WorkersHandler.js +7 -7
- package/models/trace/handlers/WorkersHandler.js.map +1 -1
- package/models/trace/handlers/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/handlers/handlers-tsconfig.json +6 -2
- package/models/trace/handlers/handlers.js +1 -1
- package/models/trace/handlers/handlers.js.map +1 -1
- package/models/trace/handlers/helpers.d.ts +3 -2
- package/models/trace/handlers/helpers.js +10 -10
- package/models/trace/handlers/helpers.js.map +1 -1
- package/models/trace/handlers/types.d.ts +25 -2
- package/models/trace/handlers/types.js.map +1 -1
- package/models/trace/helpers/Extensions.js +8 -8
- package/models/trace/helpers/Extensions.js.map +1 -1
- package/models/trace/helpers/Network.js.map +1 -1
- package/models/trace/helpers/SamplesIntegrator.js +11 -9
- package/models/trace/helpers/SamplesIntegrator.js.map +1 -1
- package/models/trace/helpers/SyntheticEvents.js +1 -1
- package/models/trace/helpers/SyntheticEvents.js.map +1 -1
- package/models/trace/helpers/Timing.d.ts +4 -0
- package/models/trace/helpers/Timing.js +6 -4
- package/models/trace/helpers/Timing.js.map +1 -1
- package/models/trace/helpers/Trace.d.ts +21 -23
- package/models/trace/helpers/Trace.js +188 -67
- package/models/trace/helpers/Trace.js.map +1 -1
- package/models/trace/helpers/TreeHelpers.js +1 -1
- package/models/trace/helpers/TreeHelpers.js.map +1 -1
- package/models/trace/helpers/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/helpers/helpers-tsconfig.json +6 -2
- package/models/trace/helpers/helpers.js +1 -1
- package/models/trace/helpers/helpers.js.map +1 -1
- package/models/trace/insights/CLSCulprits.d.ts +2 -2
- package/models/trace/insights/CLSCulprits.js +14 -14
- package/models/trace/insights/CLSCulprits.js.map +1 -1
- package/models/trace/insights/Cache.d.ts +2 -1
- package/models/trace/insights/Cache.js +8 -5
- package/models/trace/insights/Cache.js.map +1 -1
- package/models/trace/insights/Common.d.ts +9 -1
- package/models/trace/insights/Common.js +33 -1
- package/models/trace/insights/Common.js.map +1 -1
- package/models/trace/insights/DOMSize.d.ts +3 -2
- package/models/trace/insights/DOMSize.js +10 -7
- package/models/trace/insights/DOMSize.js.map +1 -1
- package/models/trace/insights/DocumentLatency.d.ts +2 -2
- package/models/trace/insights/DocumentLatency.js +18 -17
- package/models/trace/insights/DocumentLatency.js.map +1 -1
- package/models/trace/insights/DuplicatedJavaScript.d.ts +2 -2
- package/models/trace/insights/DuplicatedJavaScript.js +5 -5
- package/models/trace/insights/DuplicatedJavaScript.js.map +1 -1
- package/models/trace/insights/FontDisplay.d.ts +2 -1
- package/models/trace/insights/FontDisplay.js +7 -4
- package/models/trace/insights/FontDisplay.js.map +1 -1
- package/models/trace/insights/ForcedReflow.d.ts +2 -1
- package/models/trace/insights/ForcedReflow.js +6 -3
- package/models/trace/insights/ForcedReflow.js.map +1 -1
- package/models/trace/insights/INPBreakdown.d.ts +3 -3
- package/models/trace/insights/INPBreakdown.js +16 -5
- package/models/trace/insights/INPBreakdown.js.map +1 -1
- package/models/trace/insights/ImageDelivery.d.ts +2 -2
- package/models/trace/insights/ImageDelivery.js +13 -13
- package/models/trace/insights/ImageDelivery.js.map +1 -1
- package/models/trace/insights/LCPBreakdown.d.ts +3 -2
- package/models/trace/insights/LCPBreakdown.js +21 -15
- package/models/trace/insights/LCPBreakdown.js.map +1 -1
- package/models/trace/insights/LCPDiscovery.d.ts +2 -2
- package/models/trace/insights/LCPDiscovery.js +9 -11
- package/models/trace/insights/LCPDiscovery.js.map +1 -1
- package/models/trace/insights/LegacyJavaScript.d.ts +1 -1
- package/models/trace/insights/LegacyJavaScript.js +5 -4
- package/models/trace/insights/LegacyJavaScript.js.map +1 -1
- package/models/trace/insights/Models.js +1 -1
- package/models/trace/insights/Models.js.map +1 -1
- package/models/trace/insights/ModernHTTP.d.ts +2 -2
- package/models/trace/insights/ModernHTTP.js +6 -6
- package/models/trace/insights/ModernHTTP.js.map +1 -1
- package/models/trace/insights/NetworkDependencyTree.d.ts +6 -3
- package/models/trace/insights/NetworkDependencyTree.js +19 -16
- package/models/trace/insights/NetworkDependencyTree.js.map +1 -1
- package/models/trace/insights/RenderBlocking.d.ts +2 -2
- package/models/trace/insights/RenderBlocking.js +11 -11
- package/models/trace/insights/RenderBlocking.js.map +1 -1
- package/models/trace/insights/SlowCSSSelector.d.ts +3 -2
- package/models/trace/insights/SlowCSSSelector.js +9 -6
- package/models/trace/insights/SlowCSSSelector.js.map +1 -1
- package/models/trace/insights/Statistics.js +1 -1
- package/models/trace/insights/Statistics.js.map +1 -1
- package/models/trace/insights/ThirdParties.d.ts +2 -1
- package/models/trace/insights/ThirdParties.js +8 -5
- package/models/trace/insights/ThirdParties.js.map +1 -1
- package/models/trace/insights/Viewport.d.ts +2 -1
- package/models/trace/insights/Viewport.js +8 -5
- package/models/trace/insights/Viewport.js.map +1 -1
- package/models/trace/insights/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/insights/insights-tsconfig.json +6 -2
- package/models/trace/insights/insights.d.ts +2 -0
- package/models/trace/insights/insights.js +3 -1
- package/models/trace/insights/insights.js.map +1 -1
- package/models/trace/insights/types.d.ts +4 -1
- package/models/trace/insights/types.js +2 -1
- package/models/trace/insights/types.js.map +1 -1
- package/models/trace/lantern/core/LanternError.js +1 -1
- package/models/trace/lantern/core/LanternError.js.map +1 -1
- package/models/trace/lantern/core/NetworkAnalyzer.js +1 -1
- package/models/trace/lantern/core/NetworkAnalyzer.js.map +1 -1
- package/models/trace/lantern/core/core-tsconfig.json +6 -2
- package/models/trace/lantern/core/core.js +1 -1
- package/models/trace/lantern/core/core.js.map +1 -1
- package/models/trace/lantern/core/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/lantern/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/lantern/graph/BaseNode.js +1 -1
- package/models/trace/lantern/graph/BaseNode.js.map +1 -1
- package/models/trace/lantern/graph/CPUNode.js +1 -1
- package/models/trace/lantern/graph/CPUNode.js.map +1 -1
- package/models/trace/lantern/graph/NetworkNode.js +1 -1
- package/models/trace/lantern/graph/NetworkNode.js.map +1 -1
- package/models/trace/lantern/graph/PageDependencyGraph.js +1 -1
- package/models/trace/lantern/graph/PageDependencyGraph.js.map +1 -1
- package/models/trace/lantern/graph/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/lantern/graph/graph-tsconfig.json +6 -2
- package/models/trace/lantern/graph/graph.js +1 -1
- package/models/trace/lantern/graph/graph.js.map +1 -1
- package/models/trace/lantern/lantern-tsconfig.json +6 -2
- package/models/trace/lantern/lantern.js +1 -1
- package/models/trace/lantern/lantern.js.map +1 -1
- package/models/trace/lantern/metrics/FirstContentfulPaint.js +1 -1
- package/models/trace/lantern/metrics/FirstContentfulPaint.js.map +1 -1
- package/models/trace/lantern/metrics/Interactive.js +1 -1
- package/models/trace/lantern/metrics/Interactive.js.map +1 -1
- package/models/trace/lantern/metrics/LargestContentfulPaint.js +1 -1
- package/models/trace/lantern/metrics/LargestContentfulPaint.js.map +1 -1
- package/models/trace/lantern/metrics/MaxPotentialFID.js +1 -1
- package/models/trace/lantern/metrics/MaxPotentialFID.js.map +1 -1
- package/models/trace/lantern/metrics/Metric.js +1 -1
- package/models/trace/lantern/metrics/Metric.js.map +1 -1
- package/models/trace/lantern/metrics/SpeedIndex.js +1 -1
- package/models/trace/lantern/metrics/SpeedIndex.js.map +1 -1
- package/models/trace/lantern/metrics/TBTUtils.js +1 -1
- package/models/trace/lantern/metrics/TBTUtils.js.map +1 -1
- package/models/trace/lantern/metrics/TotalBlockingTime.js +1 -1
- package/models/trace/lantern/metrics/TotalBlockingTime.js.map +1 -1
- package/models/trace/lantern/metrics/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/lantern/metrics/metrics-tsconfig.json +6 -2
- package/models/trace/lantern/metrics/metrics.js +1 -1
- package/models/trace/lantern/metrics/metrics.js.map +1 -1
- package/models/trace/lantern/simulation/ConnectionPool.js +1 -1
- package/models/trace/lantern/simulation/ConnectionPool.js.map +1 -1
- package/models/trace/lantern/simulation/Constants.js +1 -1
- package/models/trace/lantern/simulation/Constants.js.map +1 -1
- package/models/trace/lantern/simulation/DNSCache.js +1 -1
- package/models/trace/lantern/simulation/DNSCache.js.map +1 -1
- package/models/trace/lantern/simulation/SimulationTimingMap.js +1 -1
- package/models/trace/lantern/simulation/SimulationTimingMap.js.map +1 -1
- package/models/trace/lantern/simulation/Simulator.js +1 -1
- package/models/trace/lantern/simulation/Simulator.js.map +1 -1
- package/models/trace/lantern/simulation/TCPConnection.js +1 -1
- package/models/trace/lantern/simulation/TCPConnection.js.map +1 -1
- package/models/trace/lantern/simulation/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/lantern/simulation/simulation-tsconfig.json +6 -2
- package/models/trace/lantern/simulation/simulation.js +1 -1
- package/models/trace/lantern/simulation/simulation.js.map +1 -1
- package/models/trace/lantern/types/Lantern.js +1 -1
- package/models/trace/lantern/types/Lantern.js.map +1 -1
- package/models/trace/lantern/types/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/lantern/types/types-tsconfig.json +6 -2
- package/models/trace/lantern/types/types.js +1 -1
- package/models/trace/lantern/types/types.js.map +1 -1
- package/models/trace/trace-tsconfig.json +10 -2
- package/models/trace/trace.d.ts +5 -1
- package/models/trace/trace.js +6 -2
- package/models/trace/trace.js.map +1 -1
- package/models/trace/types/Configuration.d.ts +11 -0
- package/models/trace/types/Configuration.js +1 -1
- package/models/trace/types/Configuration.js.map +1 -1
- package/models/trace/types/Extensions.d.ts +25 -13
- package/models/trace/types/Extensions.js +6 -3
- package/models/trace/types/Extensions.js.map +1 -1
- package/models/trace/types/File.d.ts +13 -2
- package/models/trace/types/File.js +1 -1
- package/models/trace/types/File.js.map +1 -1
- package/models/trace/types/Overlays.d.ts +5 -4
- package/models/trace/types/Overlays.js +1 -1
- package/models/trace/types/Overlays.js.map +1 -1
- package/models/trace/types/Timing.d.ts +1 -0
- package/models/trace/types/Timing.js +1 -1
- package/models/trace/types/Timing.js.map +1 -1
- package/models/trace/types/TraceEvents.d.ts +81 -61
- package/models/trace/types/TraceEvents.js +42 -29
- package/models/trace/types/TraceEvents.js.map +1 -1
- package/models/trace/types/devtools_entrypoint-bundle-typescript-tsconfig.json +6 -2
- package/models/trace/types/types-tsconfig.json +6 -2
- package/models/trace/types/types.js +1 -1
- package/models/trace/types/types.js.map +1 -1
- package/package.json +1 -1
- package/test/test-trace-engine.mjs +4 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Copyright 2024 The Chromium Authors
|
|
1
|
+
// Copyright 2024 The Chromium Authors
|
|
2
2
|
// Use of this source code is governed by a BSD-style license that can be
|
|
3
3
|
// found in the LICENSE file.
|
|
4
4
|
// import * as i18n from '../../../core/i18n/i18n.js';
|
|
@@ -79,12 +79,15 @@ function finalize(partialModel) {
|
|
|
79
79
|
relatedEvents,
|
|
80
80
|
};
|
|
81
81
|
}
|
|
82
|
-
export function
|
|
82
|
+
export function isDomSizeInsight(model) {
|
|
83
|
+
return model.insightKey === InsightKeys.DOM_SIZE;
|
|
84
|
+
}
|
|
85
|
+
export function generateInsight(data, context) {
|
|
83
86
|
const isWithinContext = (event) => Helpers.Timing.eventIsInBounds(event, context.bounds);
|
|
84
87
|
const mainTid = context.navigation?.tid;
|
|
85
88
|
const largeLayoutUpdates = [];
|
|
86
89
|
const largeStyleRecalcs = [];
|
|
87
|
-
const threads = Handlers.Threads.threadsInRenderer(
|
|
90
|
+
const threads = Handlers.Threads.threadsInRenderer(data.Renderer, data.AuctionWorklets);
|
|
88
91
|
for (const thread of threads) {
|
|
89
92
|
if (thread.type !== Handlers.Threads.ThreadType.MAIN_THREAD) {
|
|
90
93
|
continue;
|
|
@@ -99,11 +102,11 @@ export function generateInsight(parsedTrace, context) {
|
|
|
99
102
|
else if (thread.tid !== mainTid) {
|
|
100
103
|
continue;
|
|
101
104
|
}
|
|
102
|
-
const rendererThread =
|
|
105
|
+
const rendererThread = data.Renderer.processes.get(thread.pid)?.threads.get(thread.tid);
|
|
103
106
|
if (!rendererThread) {
|
|
104
107
|
continue;
|
|
105
108
|
}
|
|
106
|
-
const { entries, layoutEvents,
|
|
109
|
+
const { entries, layoutEvents, recalcStyleEvents } = rendererThread;
|
|
107
110
|
if (!entries.length) {
|
|
108
111
|
continue;
|
|
109
112
|
}
|
|
@@ -122,7 +125,7 @@ export function generateInsight(parsedTrace, context) {
|
|
|
122
125
|
largeLayoutUpdates.push(event);
|
|
123
126
|
}
|
|
124
127
|
}
|
|
125
|
-
for (const event of
|
|
128
|
+
for (const event of recalcStyleEvents) {
|
|
126
129
|
if (event.dur < DOM_SIZE_DURATION_THRESHOLD || !isWithinContext(event)) {
|
|
127
130
|
continue;
|
|
128
131
|
}
|
|
@@ -146,7 +149,7 @@ export function generateInsight(parsedTrace, context) {
|
|
|
146
149
|
return { label, duration, size, event };
|
|
147
150
|
}),
|
|
148
151
|
].sort((a, b) => b.duration - a.duration).slice(0, 5);
|
|
149
|
-
const domStatsEvents =
|
|
152
|
+
const domStatsEvents = data.DOMStats.domStatsByFrameId.get(context.frameId)?.filter(isWithinContext) ?? [];
|
|
150
153
|
let maxDOMStats;
|
|
151
154
|
for (const domStats of domStatsEvents) {
|
|
152
155
|
// While recording a cross-origin navigation, there can be overlapping dom stats from before & after
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DOMSize.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DOMSize.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Common from '../../../core/common/common.js';\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n InsightCategory,\n InsightKeys,\n type InsightModel,\n type InsightSetContext,\n type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n /**\n * @description Title of an insight that recommends reducing the size of the DOM tree as a means to improve page responsiveness. \"DOM\" is an acronym and should not be translated.\n */\n title: 'Optimize DOM size',\n /**\n * @description Description of an insight that recommends reducing the size of the DOM tree as a means to improve page responsiveness. \"DOM\" is an acronym and should not be translated. \"layout reflows\" are when the browser will recompute the layout of content on the page.\n */\n description:\n 'A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).',\n /**\n * @description Header for a column containing the names of statistics as opposed to the actual statistic values.\n */\n statistic: 'Statistic',\n /**\n * @description Header for a column containing the value of a statistic.\n */\n value: 'Value',\n /**\n * @description Header for a column containing the page element related to a statistic.\n */\n element: 'Element',\n /**\n * @description Label for a value representing the total number of elements on the page.\n */\n totalElements: 'Total elements',\n /**\n * @description Label for a value representing the maximum depth of the Document Object Model (DOM). \"DOM\" is a acronym and should not be translated.\n */\n maxDOMDepth: 'DOM depth',\n /**\n * @description Label for a value representing the maximum number of child elements of any parent element on the page.\n */\n maxChildren: 'Most children',\n /**\n * @description Text for a section.\n */\n topUpdatesDescription:\n 'These are the largest layout and style recalculation events. Their performance impact may be reduced by making the DOM simpler.',\n /**\n * @description Label used for a time duration.\n */\n duration: 'Duration',\n /**\n * @description Message displayed in a table detailing how big a layout (rendering) is.\n * @example {134} PH1\n */\n largeLayout: 'Layout ({PH1} objects)',\n /**\n * @description Message displayed in a table detailing how big a style recalculation (rendering) is.\n * @example {134} PH1\n */\n largeStyleRecalc: 'Style recalculation ({PH1} elements)',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DOMSize.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nconst DOM_SIZE_DURATION_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(40));\n\n// These thresholds were selected to maximize the number of long (>40ms) events above\n// the threshold while maximizing the number of short (<40ms) events below the threshold.\n// See go/rpp-dom-size-thresholds for the analysis that produced these thresholds.\nconst LAYOUT_OBJECTS_THRESHOLD = 100;\nconst STYLE_RECALC_ELEMENTS_THRESHOLD = 300;\n\nexport type DOMSizeInsightModel = InsightModel<typeof UIStrings, {\n largeLayoutUpdates: Types.Events.Layout[],\n largeStyleRecalcs: Types.Events.UpdateLayoutTree[],\n largeUpdates: Array<\n {label: Common.UIString.LocalizedString, duration: Types.Timing.Milli, size: number, event: Types.Events.Event}>,\n maxDOMStats?: Types.Events.DOMStats,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<DOMSizeInsightModel>): DOMSizeInsightModel {\n const relatedEvents = [...partialModel.largeLayoutUpdates, ...partialModel.largeStyleRecalcs];\n return {\n insightKey: InsightKeys.DOM_SIZE,\n strings: UIStrings,\n title: i18nString(UIStrings.title),\n description: i18nString(UIStrings.description),\n category: InsightCategory.INP,\n state: relatedEvents.length > 0 ? 'informative' : 'pass',\n ...partialModel,\n relatedEvents,\n };\n}\n\nexport function generateInsight(\n parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DOMSizeInsightModel {\n const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);\n\n const mainTid = context.navigation?.tid;\n\n const largeLayoutUpdates: Types.Events.Layout[] = [];\n const largeStyleRecalcs: Types.Events.UpdateLayoutTree[] = [];\n\n const threads = Handlers.Threads.threadsInRenderer(parsedTrace.Renderer, parsedTrace.AuctionWorklets);\n for (const thread of threads) {\n if (thread.type !== Handlers.Threads.ThreadType.MAIN_THREAD) {\n continue;\n }\n\n if (mainTid === undefined) {\n // We won't have a specific thread ID to reference if the context does not have a navigation.\n // In this case, we'll just filter out any OOPIFs threads.\n if (!thread.processIsOnMainFrame) {\n continue;\n }\n } else if (thread.tid !== mainTid) {\n continue;\n }\n\n const rendererThread = parsedTrace.Renderer.processes.get(thread.pid)?.threads.get(thread.tid);\n if (!rendererThread) {\n continue;\n }\n\n const {entries, layoutEvents, updateLayoutTreeEvents} = rendererThread;\n if (!entries.length) {\n continue;\n }\n\n const first = entries[0];\n const last = entries[entries.length - 1];\n const timeRange =\n Helpers.Timing.traceWindowFromMicroSeconds(first.ts, Types.Timing.Micro(last.ts + (last.dur ?? 0)));\n if (!Helpers.Timing.boundsIncludeTimeRange({timeRange, bounds: context.bounds})) {\n continue;\n }\n\n for (const event of layoutEvents) {\n if (event.dur < DOM_SIZE_DURATION_THRESHOLD || !isWithinContext(event)) {\n continue;\n }\n\n const {dirtyObjects} = event.args.beginData;\n if (dirtyObjects > LAYOUT_OBJECTS_THRESHOLD) {\n largeLayoutUpdates.push(event);\n }\n }\n\n for (const event of updateLayoutTreeEvents) {\n if (event.dur < DOM_SIZE_DURATION_THRESHOLD || !isWithinContext(event)) {\n continue;\n }\n\n const {elementCount} = event.args;\n if (elementCount > STYLE_RECALC_ELEMENTS_THRESHOLD) {\n largeStyleRecalcs.push(event);\n }\n }\n }\n\n const largeUpdates: DOMSizeInsightModel['largeUpdates'] = [\n ...largeLayoutUpdates.map(event => {\n const duration = (event.dur / 1000) as Types.Timing.Milli;\n const size = event.args.beginData.dirtyObjects;\n const label = i18nString(UIStrings.largeLayout, {PH1: size});\n return {label, duration, size, event};\n }),\n ...largeStyleRecalcs.map(event => {\n const duration = (event.dur / 1000) as Types.Timing.Milli;\n const size = event.args.elementCount;\n const label = i18nString(UIStrings.largeStyleRecalc, {PH1: size});\n return {label, duration, size, event};\n }),\n ].sort((a, b) => b.duration - a.duration).slice(0, 5);\n\n const domStatsEvents = parsedTrace.DOMStats.domStatsByFrameId.get(context.frameId)?.filter(isWithinContext) ?? [];\n let maxDOMStats: Types.Events.DOMStats|undefined;\n for (const domStats of domStatsEvents) {\n // While recording a cross-origin navigation, there can be overlapping dom stats from before & after\n // the navigation which share a frameId. In this case we should also ensure the pid matches up with\n // the navigation we care about (i.e. from after the navigation event).\n const navigationPid = context.navigation?.pid;\n if (navigationPid && domStats.pid !== navigationPid) {\n continue;\n }\n\n if (!maxDOMStats || domStats.args.data.totalElements > maxDOMStats.args.data.totalElements) {\n maxDOMStats = domStats;\n }\n }\n\n return finalize({\n largeLayoutUpdates,\n largeStyleRecalcs,\n largeUpdates,\n maxDOMStats,\n });\n}\n\nexport function createOverlays(model: DOMSizeInsightModel): Types.Overlays.Overlay[] {\n const entries = [...model.largeStyleRecalcs, ...model.largeLayoutUpdates];\n return entries.map(entry => ({\n type: 'ENTRY_OUTLINE',\n entry,\n outlineReason: 'ERROR',\n }));\n}\n"]}
|
|
1
|
+
{"version":3,"file":"DOMSize.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DOMSize.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,yEAAyE;AACzE,6BAA6B;AAG7B,OAAO,KAAK,IAAI,MAAM,4BAA4B,CAAC;AACnD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,OAAO,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EACL,eAAe,EACf,WAAW,GAIZ,MAAM,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,mBAAmB;IAC1B;;OAEG;IACH,WAAW,EACP,6QAA6Q;IACjR;;OAEG;IACH,SAAS,EAAE,WAAW;IACtB;;OAEG;IACH,KAAK,EAAE,OAAO;IACd;;OAEG;IACH,OAAO,EAAE,SAAS;IAClB;;OAEG;IACH,aAAa,EAAE,gBAAgB;IAC/B;;OAEG;IACH,WAAW,EAAE,WAAW;IACxB;;OAEG;IACH,WAAW,EAAE,eAAe;IAC5B;;OAEG;IACH,qBAAqB,EACjB,iIAAiI;IACrI;;OAEG;IACH,QAAQ,EAAE,UAAU;IACpB;;;OAGG;IACH,WAAW,EAAE,wBAAwB;IACrC;;;OAGG;IACH,gBAAgB,EAAE,sCAAsC;CAChD,CAAC;AAEX,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,kCAAkC,EAAE,SAAS,CAAC,CAAC;AACxF,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAE7E,MAAM,2BAA2B,GAAG,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;AAExF,qFAAqF;AACrF,yFAAyF;AACzF,kFAAkF;AAClF,MAAM,wBAAwB,GAAG,GAAG,CAAC;AACrC,MAAM,+BAA+B,GAAG,GAAG,CAAC;AAU5C,SAAS,QAAQ,CAAC,YAAsD;IACtE,MAAM,aAAa,GAAG,CAAC,GAAG,YAAY,CAAC,kBAAkB,EAAE,GAAG,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC9F,OAAO;QACL,UAAU,EAAE,WAAW,CAAC,QAAQ;QAChC,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,CAAC;QAClC,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC;QAC9C,QAAQ,EAAE,eAAe,CAAC,GAAG;QAC7B,KAAK,EAAE,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;QACxD,GAAG,YAAY;QACf,aAAa;KACd,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAmB;IAClD,OAAO,KAAK,CAAC,UAAU,KAAK,WAAW,CAAC,QAAQ,CAAC;AACnD,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAgC,EAAE,OAA0B;IAC1F,MAAM,eAAe,GAAG,CAAC,KAAyB,EAAW,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAEtH,MAAM,OAAO,GAAG,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC;IAExC,MAAM,kBAAkB,GAA0B,EAAE,CAAC;IACrD,MAAM,iBAAiB,GAA+B,EAAE,CAAC;IAEzD,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACxF,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;YAC5D,SAAS;QACX,CAAC;QAED,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YAC1B,6FAA6F;YAC7F,0DAA0D;YAC1D,IAAI,CAAC,MAAM,CAAC,oBAAoB,EAAE,CAAC;gBACjC,SAAS;YACX,CAAC;QACH,CAAC;aAAM,IAAI,MAAM,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAClC,SAAS;QACX,CAAC;QAED,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACxF,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,SAAS;QACX,CAAC;QAED,MAAM,EAAC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAC,GAAG,cAAc,CAAC;QAClE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YACpB,SAAS;QACX,CAAC;QAED,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QACzB,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACzC,MAAM,SAAS,GACX,OAAO,CAAC,MAAM,CAAC,2BAA2B,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACxG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAC,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAC,CAAC,EAAE,CAAC;YAChF,SAAS;QACX,CAAC;QAED,KAAK,MAAM,KAAK,IAAI,YAAY,EAAE,CAAC;YACjC,IAAI,KAAK,CAAC,GAAG,GAAG,2BAA2B,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;gBACvE,SAAS;YACX,CAAC;YAED,MAAM,EAAC,YAAY,EAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;YAC5C,IAAI,YAAY,GAAG,wBAAwB,EAAE,CAAC;gBAC5C,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACjC,CAAC;QACH,CAAC;QAED,KAAK,MAAM,KAAK,IAAI,iBAAiB,EAAE,CAAC;YACtC,IAAI,KAAK,CAAC,GAAG,GAAG,2BAA2B,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;gBACvE,SAAS;YACX,CAAC;YAED,MAAM,EAAC,YAAY,EAAC,GAAG,KAAK,CAAC,IAAI,CAAC;YAClC,IAAI,YAAY,GAAG,+BAA+B,EAAE,CAAC;gBACnD,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM,YAAY,GAAwC;QACxD,GAAG,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAChC,MAAM,QAAQ,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAuB,CAAC;YAC1D,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;YAC/C,MAAM,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,WAAW,EAAE,EAAC,GAAG,EAAE,IAAI,EAAC,CAAC,CAAC;YAC7D,OAAO,EAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,CAAC;QACxC,CAAC,CAAC;QACF,GAAG,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAC/B,MAAM,QAAQ,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAuB,CAAC;YAC1D,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;YACrC,MAAM,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAC,GAAG,EAAE,IAAI,EAAC,CAAC,CAAC;YAClE,OAAO,EAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,CAAC;QACxC,CAAC,CAAC;KACH,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAEtD,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC3G,IAAI,WAA4C,CAAC;IACjD,KAAK,MAAM,QAAQ,IAAI,cAAc,EAAE,CAAC;QACtC,oGAAoG;QACpG,mGAAmG;QACnG,uEAAuE;QACvE,MAAM,aAAa,GAAG,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC;QAC9C,IAAI,aAAa,IAAI,QAAQ,CAAC,GAAG,KAAK,aAAa,EAAE,CAAC;YACpD,SAAS;QACX,CAAC;QAED,IAAI,CAAC,WAAW,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YAC3F,WAAW,GAAG,QAAQ,CAAC;QACzB,CAAC;IACH,CAAC;IAED,OAAO,QAAQ,CAAC;QACd,kBAAkB;QAClB,iBAAiB;QACjB,YAAY;QACZ,WAAW;KACZ,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,OAAO,GAAG,CAAC,GAAG,KAAK,CAAC,iBAAiB,EAAE,GAAG,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAC1E,OAAO,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACR,IAAI,EAAE,eAAe;QACrB,KAAK;QACL,aAAa,EAAE,OAAO;KACvB,CAAC,CAAC,CAAC;AACzB,CAAC","sourcesContent":["// Copyright 2024 The Chromium Authors\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport type * as Common from '../../../core/common/common.js';\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n InsightCategory,\n InsightKeys,\n type InsightModel,\n type InsightSetContext,\n type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n /**\n * @description Title of an insight that recommends reducing the size of the DOM tree as a means to improve page responsiveness. \"DOM\" is an acronym and should not be translated.\n */\n title: 'Optimize DOM size',\n /**\n * @description Description of an insight that recommends reducing the size of the DOM tree as a means to improve page responsiveness. \"DOM\" is an acronym and should not be translated. \"layout reflows\" are when the browser will recompute the layout of content on the page.\n */\n description:\n 'A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).',\n /**\n * @description Header for a column containing the names of statistics as opposed to the actual statistic values.\n */\n statistic: 'Statistic',\n /**\n * @description Header for a column containing the value of a statistic.\n */\n value: 'Value',\n /**\n * @description Header for a column containing the page element related to a statistic.\n */\n element: 'Element',\n /**\n * @description Label for a value representing the total number of elements on the page.\n */\n totalElements: 'Total elements',\n /**\n * @description Label for a value representing the maximum depth of the Document Object Model (DOM). \"DOM\" is a acronym and should not be translated.\n */\n maxDOMDepth: 'DOM depth',\n /**\n * @description Label for a value representing the maximum number of child elements of any parent element on the page.\n */\n maxChildren: 'Most children',\n /**\n * @description Text for a section.\n */\n topUpdatesDescription:\n 'These are the largest layout and style recalculation events. Their performance impact may be reduced by making the DOM simpler.',\n /**\n * @description Label used for a time duration.\n */\n duration: 'Duration',\n /**\n * @description Message displayed in a table detailing how big a layout (rendering) is.\n * @example {134} PH1\n */\n largeLayout: 'Layout ({PH1} objects)',\n /**\n * @description Message displayed in a table detailing how big a style recalculation (rendering) is.\n * @example {134} PH1\n */\n largeStyleRecalc: 'Style recalculation ({PH1} elements)',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DOMSize.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nconst DOM_SIZE_DURATION_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(40));\n\n// These thresholds were selected to maximize the number of long (>40ms) events above\n// the threshold while maximizing the number of short (<40ms) events below the threshold.\n// See go/rpp-dom-size-thresholds for the analysis that produced these thresholds.\nconst LAYOUT_OBJECTS_THRESHOLD = 100;\nconst STYLE_RECALC_ELEMENTS_THRESHOLD = 300;\n\nexport type DOMSizeInsightModel = InsightModel<typeof UIStrings, {\n largeLayoutUpdates: Types.Events.Layout[],\n largeStyleRecalcs: Types.Events.RecalcStyle[],\n largeUpdates: Array<\n {label: Common.UIString.LocalizedString, duration: Types.Timing.Milli, size: number, event: Types.Events.Event}>,\n maxDOMStats?: Types.Events.DOMStats,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<DOMSizeInsightModel>): DOMSizeInsightModel {\n const relatedEvents = [...partialModel.largeLayoutUpdates, ...partialModel.largeStyleRecalcs];\n return {\n insightKey: InsightKeys.DOM_SIZE,\n strings: UIStrings,\n title: i18nString(UIStrings.title),\n description: i18nString(UIStrings.description),\n category: InsightCategory.INP,\n state: relatedEvents.length > 0 ? 'informative' : 'pass',\n ...partialModel,\n relatedEvents,\n };\n}\n\nexport function isDomSizeInsight(model: InsightModel): model is DOMSizeInsightModel {\n return model.insightKey === InsightKeys.DOM_SIZE;\n}\n\nexport function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): DOMSizeInsightModel {\n const isWithinContext = (event: Types.Events.Event): boolean => Helpers.Timing.eventIsInBounds(event, context.bounds);\n\n const mainTid = context.navigation?.tid;\n\n const largeLayoutUpdates: Types.Events.Layout[] = [];\n const largeStyleRecalcs: Types.Events.RecalcStyle[] = [];\n\n const threads = Handlers.Threads.threadsInRenderer(data.Renderer, data.AuctionWorklets);\n for (const thread of threads) {\n if (thread.type !== Handlers.Threads.ThreadType.MAIN_THREAD) {\n continue;\n }\n\n if (mainTid === undefined) {\n // We won't have a specific thread ID to reference if the context does not have a navigation.\n // In this case, we'll just filter out any OOPIFs threads.\n if (!thread.processIsOnMainFrame) {\n continue;\n }\n } else if (thread.tid !== mainTid) {\n continue;\n }\n\n const rendererThread = data.Renderer.processes.get(thread.pid)?.threads.get(thread.tid);\n if (!rendererThread) {\n continue;\n }\n\n const {entries, layoutEvents, recalcStyleEvents} = rendererThread;\n if (!entries.length) {\n continue;\n }\n\n const first = entries[0];\n const last = entries[entries.length - 1];\n const timeRange =\n Helpers.Timing.traceWindowFromMicroSeconds(first.ts, Types.Timing.Micro(last.ts + (last.dur ?? 0)));\n if (!Helpers.Timing.boundsIncludeTimeRange({timeRange, bounds: context.bounds})) {\n continue;\n }\n\n for (const event of layoutEvents) {\n if (event.dur < DOM_SIZE_DURATION_THRESHOLD || !isWithinContext(event)) {\n continue;\n }\n\n const {dirtyObjects} = event.args.beginData;\n if (dirtyObjects > LAYOUT_OBJECTS_THRESHOLD) {\n largeLayoutUpdates.push(event);\n }\n }\n\n for (const event of recalcStyleEvents) {\n if (event.dur < DOM_SIZE_DURATION_THRESHOLD || !isWithinContext(event)) {\n continue;\n }\n\n const {elementCount} = event.args;\n if (elementCount > STYLE_RECALC_ELEMENTS_THRESHOLD) {\n largeStyleRecalcs.push(event);\n }\n }\n }\n\n const largeUpdates: DOMSizeInsightModel['largeUpdates'] = [\n ...largeLayoutUpdates.map(event => {\n const duration = (event.dur / 1000) as Types.Timing.Milli;\n const size = event.args.beginData.dirtyObjects;\n const label = i18nString(UIStrings.largeLayout, {PH1: size});\n return {label, duration, size, event};\n }),\n ...largeStyleRecalcs.map(event => {\n const duration = (event.dur / 1000) as Types.Timing.Milli;\n const size = event.args.elementCount;\n const label = i18nString(UIStrings.largeStyleRecalc, {PH1: size});\n return {label, duration, size, event};\n }),\n ].sort((a, b) => b.duration - a.duration).slice(0, 5);\n\n const domStatsEvents = data.DOMStats.domStatsByFrameId.get(context.frameId)?.filter(isWithinContext) ?? [];\n let maxDOMStats: Types.Events.DOMStats|undefined;\n for (const domStats of domStatsEvents) {\n // While recording a cross-origin navigation, there can be overlapping dom stats from before & after\n // the navigation which share a frameId. In this case we should also ensure the pid matches up with\n // the navigation we care about (i.e. from after the navigation event).\n const navigationPid = context.navigation?.pid;\n if (navigationPid && domStats.pid !== navigationPid) {\n continue;\n }\n\n if (!maxDOMStats || domStats.args.data.totalElements > maxDOMStats.args.data.totalElements) {\n maxDOMStats = domStats;\n }\n }\n\n return finalize({\n largeLayoutUpdates,\n largeStyleRecalcs,\n largeUpdates,\n maxDOMStats,\n });\n}\n\nexport function createOverlays(model: DOMSizeInsightModel): Types.Overlays.Overlay[] {\n const entries = [...model.largeStyleRecalcs, ...model.largeLayoutUpdates];\n return entries.map(entry => ({\n type: 'ENTRY_OUTLINE',\n entry,\n outlineReason: 'ERROR',\n }));\n}\n"]}
|
|
@@ -52,7 +52,7 @@ export declare const UIStrings: {
|
|
|
52
52
|
readonly uncompressedDownload: "Uncompressed download";
|
|
53
53
|
};
|
|
54
54
|
export declare const i18nString: (id: string, values?: Record<string, string> | undefined) => Record<string, string>;
|
|
55
|
-
export declare function
|
|
55
|
+
export declare function isDocumentLatencyInsight(x: InsightModel): x is DocumentLatencyInsightModel;
|
|
56
56
|
export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {
|
|
57
57
|
data?: {
|
|
58
58
|
serverResponseTime: Types.Timing.Milli;
|
|
@@ -62,5 +62,5 @@ export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {
|
|
|
62
62
|
documentRequest?: Types.Events.SyntheticNetworkRequest;
|
|
63
63
|
};
|
|
64
64
|
}>;
|
|
65
|
-
export declare function generateInsight(
|
|
65
|
+
export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): DocumentLatencyInsightModel;
|
|
66
66
|
export declare function createOverlays(model: DocumentLatencyInsightModel): Types.Overlays.Overlay[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Copyright 2024 The Chromium Authors
|
|
1
|
+
// Copyright 2024 The Chromium Authors
|
|
2
2
|
// Use of this source code is governed by a BSD-style license that can be
|
|
3
3
|
// found in the LICENSE file.
|
|
4
4
|
// import * as i18n from '../../../core/i18n/i18n.js';
|
|
@@ -64,23 +64,23 @@ const TOO_SLOW_THRESHOLD_MS = 600;
|
|
|
64
64
|
const TARGET_MS = 100;
|
|
65
65
|
// Threshold for compression savings.
|
|
66
66
|
const IGNORE_THRESHOLD_IN_BYTES = 1400;
|
|
67
|
-
export function
|
|
67
|
+
export function isDocumentLatencyInsight(x) {
|
|
68
68
|
return x.insightKey === 'DocumentLatency';
|
|
69
69
|
}
|
|
70
|
-
function getServerResponseTime(request
|
|
71
|
-
//
|
|
72
|
-
//
|
|
73
|
-
//
|
|
74
|
-
//
|
|
75
|
-
const
|
|
76
|
-
if (
|
|
77
|
-
return
|
|
70
|
+
function getServerResponseTime(request) {
|
|
71
|
+
// For technical reasons, Lightrider does not have `sendEnd` timing values. The
|
|
72
|
+
// closest we can get to the server response time is from a header that Lightrider
|
|
73
|
+
// sets.
|
|
74
|
+
// @ts-expect-error
|
|
75
|
+
const isLightrider = globalThis.isLightrider;
|
|
76
|
+
if (isLightrider) {
|
|
77
|
+
return request.args.data.lrServerResponseTime ?? null;
|
|
78
78
|
}
|
|
79
79
|
const timing = request.args.data.timing;
|
|
80
80
|
if (!timing) {
|
|
81
81
|
return null;
|
|
82
82
|
}
|
|
83
|
-
const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.
|
|
83
|
+
const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.serverResponseTime);
|
|
84
84
|
return Math.round(ms);
|
|
85
85
|
}
|
|
86
86
|
function getCompressionSavings(request) {
|
|
@@ -153,15 +153,16 @@ function finalize(partialModel) {
|
|
|
153
153
|
...partialModel,
|
|
154
154
|
};
|
|
155
155
|
}
|
|
156
|
-
export function generateInsight(
|
|
156
|
+
export function generateInsight(data, context) {
|
|
157
157
|
if (!context.navigation) {
|
|
158
158
|
return finalize({});
|
|
159
159
|
}
|
|
160
|
-
const
|
|
160
|
+
const millisToString = context.options.insightTimeFormatters?.milli ?? (bytes => ({__i18nMillis: bytes}));
|
|
161
|
+
const documentRequest = data.NetworkRequests.byId.get(context.navigationId);
|
|
161
162
|
if (!documentRequest) {
|
|
162
163
|
return finalize({ warnings: [InsightWarning.NO_DOCUMENT_REQUEST] });
|
|
163
164
|
}
|
|
164
|
-
const serverResponseTime = getServerResponseTime(documentRequest
|
|
165
|
+
const serverResponseTime = getServerResponseTime(documentRequest);
|
|
165
166
|
if (serverResponseTime === null) {
|
|
166
167
|
throw new Error('missing document request timing');
|
|
167
168
|
}
|
|
@@ -191,14 +192,14 @@ export function generateInsight(parsedTrace, context) {
|
|
|
191
192
|
noRedirects: {
|
|
192
193
|
label: noRedirects ? i18nString(UIStrings.passingRedirects) : i18nString(UIStrings.failedRedirects, {
|
|
193
194
|
PH1: documentRequest.args.data.redirects.length,
|
|
194
|
-
PH2: (
|
|
195
|
+
PH2: millisToString(redirectDuration),
|
|
195
196
|
}),
|
|
196
197
|
value: noRedirects
|
|
197
198
|
},
|
|
198
199
|
serverResponseIsFast: {
|
|
199
200
|
label: serverResponseIsFast ?
|
|
200
|
-
i18nString(UIStrings.passingServerResponseTime, { PH1: (
|
|
201
|
-
i18nString(UIStrings.failedServerResponseTime, { PH1: (
|
|
201
|
+
i18nString(UIStrings.passingServerResponseTime, { PH1: millisToString(serverResponseTime) }) :
|
|
202
|
+
i18nString(UIStrings.failedServerResponseTime, { PH1: millisToString(serverResponseTime) }),
|
|
202
203
|
value: serverResponseIsFast
|
|
203
204
|
},
|
|
204
205
|
usesCompression: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocumentLatency.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DocumentLatency.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {isRequestCompressed} from './Common.js';\nimport {\n type Checklist,\n InsightCategory,\n InsightKeys,\n type InsightModel,\n type InsightSetContext,\n InsightWarning,\n type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n /**\n * @description Title of an insight that provides a breakdown for how long it took to download the main document.\n */\n title: 'Document request latency',\n /**\n * @description Description of an insight that provides a breakdown for how long it took to download the main document.\n */\n description:\n 'Your first network request is the most important. Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',\n /**\n * @description Text to tell the user that the document request does not have redirects.\n */\n passingRedirects: 'Avoids redirects',\n /**\n * @description Text to tell the user that the document request had redirects.\n * @example {3} PH1\n * @example {1000 ms} PH2\n */\n failedRedirects: 'Had redirects ({PH1} redirects, +{PH2})',\n /**\n * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.\n * @example {600 ms} PH1\n */\n passingServerResponseTime: 'Server responds quickly (observed {PH1})',\n /**\n * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.\n * @example {601 ms} PH1\n */\n failedServerResponseTime: 'Server responded slowly (observed {PH1})',\n /**\n * @description Text to tell the user that text compression (like gzip) was applied.\n */\n passingTextCompression: 'Applies text compression',\n /**\n * @description Text to tell the user that text compression (like gzip) was not applied.\n */\n failedTextCompression: 'No compression applied',\n /**\n * @description Text for a label describing a network request event as having redirects.\n */\n redirectsLabel: 'Redirects',\n /**\n * @description Text for a label describing a network request event as taking too long to start delivery by the server.\n */\n serverResponseTimeLabel: 'Server response time',\n /**\n * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.\n */\n uncompressedDownload: 'Uncompressed download',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\n// Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.\n// We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.\nconst TOO_SLOW_THRESHOLD_MS = 600;\nconst TARGET_MS = 100;\n\n// Threshold for compression savings.\nconst IGNORE_THRESHOLD_IN_BYTES = 1400;\n\nexport function isDocumentLatency(x: InsightModel): x is DocumentLatencyInsightModel {\n return x.insightKey === 'DocumentLatency';\n}\n\nexport type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {\n data?: {\n serverResponseTime: Types.Timing.Milli,\n redirectDuration: Types.Timing.Milli,\n uncompressedResponseBytes: number,\n checklist: Checklist<'noRedirects'|'serverResponseIsFast'|'usesCompression'>,\n documentRequest?: Types.Events.SyntheticNetworkRequest,\n },\n}>;\n\nfunction getServerResponseTime(\n request: Types.Events.SyntheticNetworkRequest, context: InsightSetContext): Types.Timing.Milli|null {\n // Prefer the value as given by the Lantern provider.\n // For PSI, Lighthouse uses this to set a better value for the server response\n // time. For technical reasons, in Lightrider we do not have `sendEnd` timing\n // values. See Lighthouse's `asLanternNetworkRequest` function for more.\n const lanternRequest = context.navigation && context.lantern?.requests.find(r => r.rawRequest === request);\n if (lanternRequest?.serverResponseTime !== undefined) {\n return lanternRequest.serverResponseTime as Types.Timing.Milli;\n }\n\n const timing = request.args.data.timing;\n if (!timing) {\n return null;\n }\n\n const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.waiting);\n return Math.round(ms) as Types.Timing.Milli;\n}\n\nfunction getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): number {\n const isCompressed = isRequestCompressed(request);\n if (isCompressed) {\n return 0;\n }\n\n // We don't know how many bytes this asset used on the network, but we can guess it was\n // roughly the size of the content gzipped.\n // See https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer for specific CSS/Script examples\n // See https://discuss.httparchive.org/t/file-size-and-compression-savings/145 for fallback multipliers\n // See https://letstalkaboutwebperf.com/en/gzip-brotli-server-config/ for MIME types to compress\n const originalSize = request.args.data.decodedBodyLength;\n let estimatedSavings = 0;\n switch (request.args.data.mimeType) {\n case 'text/css':\n // Stylesheets tend to compress extremely well.\n estimatedSavings = Math.round(originalSize * 0.8);\n break;\n case 'text/html':\n case 'text/javascript':\n // Scripts and HTML compress fairly well too.\n estimatedSavings = Math.round(originalSize * 0.67);\n break;\n case 'text/plain':\n case 'text/xml':\n case 'text/x-component':\n case 'application/javascript':\n case 'application/json':\n case 'application/manifest+json':\n case 'application/vnd.api+json':\n case 'application/xml':\n case 'application/xhtml+xml':\n case 'application/rss+xml':\n case 'application/atom+xml':\n case 'application/vnd.ms-fontobject':\n case 'application/x-font-ttf':\n case 'application/x-font-opentype':\n case 'application/x-font-truetype':\n case 'image/svg+xml':\n case 'image/x-icon':\n case 'image/vnd.microsoft.icon':\n case 'font/ttf':\n case 'font/eot':\n case 'font/otf':\n case 'font/opentype':\n // Use the average savings in HTTPArchive.\n estimatedSavings = Math.round(originalSize * 0.5);\n break;\n default: // Any other MIME types are likely already compressed.\n }\n // Check if the estimated savings are greater than the byte ignore threshold.\n // Note that the estimated gzip savings are always more than 10%, so there is\n // no percent threshold.\n return estimatedSavings < IGNORE_THRESHOLD_IN_BYTES ? 0 : estimatedSavings;\n}\n\nfunction finalize(partialModel: PartialInsightModel<DocumentLatencyInsightModel>): DocumentLatencyInsightModel {\n let hasFailure = false;\n if (partialModel.data) {\n hasFailure = !partialModel.data.checklist.usesCompression.value ||\n !partialModel.data.checklist.serverResponseIsFast.value || !partialModel.data.checklist.noRedirects.value;\n }\n\n return {\n insightKey: InsightKeys.DOCUMENT_LATENCY,\n strings: UIStrings,\n title: i18nString(UIStrings.title),\n description: i18nString(UIStrings.description),\n category: InsightCategory.ALL,\n state: hasFailure ? 'fail' : 'pass',\n ...partialModel,\n };\n}\n\nexport function generateInsight(\n parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): DocumentLatencyInsightModel {\n if (!context.navigation) {\n return finalize({});\n }\n\n const documentRequest = parsedTrace.NetworkRequests.byId.get(context.navigationId);\n if (!documentRequest) {\n return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n }\n\n const serverResponseTime = getServerResponseTime(documentRequest, context);\n if (serverResponseTime === null) {\n throw new Error('missing document request timing');\n }\n\n const serverResponseTooSlow = serverResponseTime > TOO_SLOW_THRESHOLD_MS;\n\n let overallSavingsMs = 0;\n if (serverResponseTime > TOO_SLOW_THRESHOLD_MS) {\n overallSavingsMs = Math.max(serverResponseTime - TARGET_MS, 0);\n }\n\n const redirectDuration = Math.round(documentRequest.args.data.syntheticData.redirectionDuration / 1000);\n overallSavingsMs += redirectDuration;\n\n const metricSavings = {\n FCP: overallSavingsMs as Types.Timing.Milli,\n LCP: overallSavingsMs as Types.Timing.Milli,\n };\n\n const uncompressedResponseBytes = getCompressionSavings(documentRequest);\n\n const noRedirects = redirectDuration === 0;\n const serverResponseIsFast = !serverResponseTooSlow;\n const usesCompression = uncompressedResponseBytes === 0;\n\n return finalize({\n relatedEvents: [documentRequest],\n data: {\n serverResponseTime,\n redirectDuration: Types.Timing.Milli(redirectDuration),\n uncompressedResponseBytes,\n documentRequest,\n checklist: {\n noRedirects: {\n label: noRedirects ? i18nString(UIStrings.passingRedirects) : i18nString(UIStrings.failedRedirects, {\n PH1: documentRequest.args.data.redirects.length,\n PH2: i18n.TimeUtilities.millisToString(redirectDuration),\n }),\n value: noRedirects\n },\n serverResponseIsFast: {\n label: serverResponseIsFast ?\n i18nString(\n UIStrings.passingServerResponseTime, {PH1: i18n.TimeUtilities.millisToString(serverResponseTime)}) :\n i18nString(\n UIStrings.failedServerResponseTime, {PH1: i18n.TimeUtilities.millisToString(serverResponseTime)}),\n value: serverResponseIsFast\n },\n usesCompression: {\n label: usesCompression ? i18nString(UIStrings.passingTextCompression) :\n i18nString(UIStrings.failedTextCompression),\n value: usesCompression\n },\n },\n },\n metricSavings,\n wastedBytes: uncompressedResponseBytes,\n });\n}\n\nexport function createOverlays(model: DocumentLatencyInsightModel): Types.Overlays.Overlay[] {\n if (!model.data?.documentRequest) {\n return [];\n }\n\n const overlays: Types.Overlays.Overlay[] = [];\n const event = model.data.documentRequest;\n const redirectDurationMicro = Helpers.Timing.milliToMicro(model.data.redirectDuration);\n\n const sections = [];\n if (model.data.redirectDuration) {\n const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n event.ts,\n (event.ts + redirectDurationMicro) as Types.Timing.Micro,\n );\n sections.push({bounds, label: i18nString(UIStrings.redirectsLabel), showDuration: true});\n overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});\n }\n if (!model.data.checklist.serverResponseIsFast.value) {\n const serverResponseTimeMicro = Helpers.Timing.milliToMicro(model.data.serverResponseTime);\n // NOTE: NetworkRequestHandlers never makes a synthetic network request event if `timing` is missing.\n const sendEnd = event.args.data.timing?.sendEnd ?? Types.Timing.Milli(0);\n const sendEndMicro = Helpers.Timing.milliToMicro(sendEnd);\n const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n sendEndMicro,\n (sendEndMicro + serverResponseTimeMicro) as Types.Timing.Micro,\n );\n sections.push({bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true});\n }\n if (model.data.uncompressedResponseBytes) {\n const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n event.args.data.syntheticData.downloadStart,\n (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download) as Types.Timing.Micro,\n );\n sections.push({bounds, label: i18nString(UIStrings.uncompressedDownload), showDuration: true});\n overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});\n }\n\n if (sections.length) {\n overlays.push({\n type: 'TIMESPAN_BREAKDOWN',\n sections,\n entry: model.data.documentRequest,\n // Always render below because the document request is guaranteed to be\n // the first request in the network track.\n renderLocation: 'BELOW_EVENT',\n });\n }\n overlays.push({\n type: 'ENTRY_SELECTED',\n entry: model.data.documentRequest,\n });\n\n return overlays;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"DocumentLatency.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DocumentLatency.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {isRequestCompressed} from './Common.js';\nimport {\n type Checklist,\n InsightCategory,\n InsightKeys,\n type InsightModel,\n type InsightSetContext,\n InsightWarning,\n type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n /**\n * @description Title of an insight that provides a breakdown for how long it took to download the main document.\n */\n title: 'Document request latency',\n /**\n * @description Description of an insight that provides a breakdown for how long it took to download the main document.\n */\n description:\n 'Your first network request is the most important. Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',\n /**\n * @description Text to tell the user that the document request does not have redirects.\n */\n passingRedirects: 'Avoids redirects',\n /**\n * @description Text to tell the user that the document request had redirects.\n * @example {3} PH1\n * @example {1000 ms} PH2\n */\n failedRedirects: 'Had redirects ({PH1} redirects, +{PH2})',\n /**\n * @description Text to tell the user that the time starting the document request to when the server started responding is acceptable.\n * @example {600 ms} PH1\n */\n passingServerResponseTime: 'Server responds quickly (observed {PH1})',\n /**\n * @description Text to tell the user that the time starting the document request to when the server started responding is not acceptable.\n * @example {601 ms} PH1\n */\n failedServerResponseTime: 'Server responded slowly (observed {PH1})',\n /**\n * @description Text to tell the user that text compression (like gzip) was applied.\n */\n passingTextCompression: 'Applies text compression',\n /**\n * @description Text to tell the user that text compression (like gzip) was not applied.\n */\n failedTextCompression: 'No compression applied',\n /**\n * @description Text for a label describing a network request event as having redirects.\n */\n redirectsLabel: 'Redirects',\n /**\n * @description Text for a label describing a network request event as taking too long to start delivery by the server.\n */\n serverResponseTimeLabel: 'Server response time',\n /**\n * @description Text for a label describing a network request event as taking longer to download because it wasn't compressed.\n */\n uncompressedDownload: 'Uncompressed download',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DocumentLatency.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\n// Due to the way that DevTools throttling works we cannot see if server response took less than ~570ms.\n// We set our failure threshold to 600ms to avoid those false positives but we want devs to shoot for 100ms.\nconst TOO_SLOW_THRESHOLD_MS = 600;\nconst TARGET_MS = 100;\n\n// Threshold for compression savings.\nconst IGNORE_THRESHOLD_IN_BYTES = 1400;\n\nexport function isDocumentLatencyInsight(x: InsightModel): x is DocumentLatencyInsightModel {\n return x.insightKey === 'DocumentLatency';\n}\n\nexport type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {\n data?: {\n serverResponseTime: Types.Timing.Milli,\n redirectDuration: Types.Timing.Milli,\n uncompressedResponseBytes: number,\n checklist: Checklist<'noRedirects'|'serverResponseIsFast'|'usesCompression'>,\n documentRequest?: Types.Events.SyntheticNetworkRequest,\n },\n}>;\n\nfunction getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.Milli|null {\n // For technical reasons, Lightrider does not have `sendEnd` timing values. The\n // closest we can get to the server response time is from a header that Lightrider\n // sets.\n // @ts-expect-error\n const isLightrider = globalThis.isLightrider;\n if (isLightrider) {\n return request.args.data.lrServerResponseTime ?? null;\n }\n\n const timing = request.args.data.timing;\n if (!timing) {\n return null;\n }\n\n const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.serverResponseTime);\n return Math.round(ms) as Types.Timing.Milli;\n}\n\nfunction getCompressionSavings(request: Types.Events.SyntheticNetworkRequest): number {\n const isCompressed = isRequestCompressed(request);\n if (isCompressed) {\n return 0;\n }\n\n // We don't know how many bytes this asset used on the network, but we can guess it was\n // roughly the size of the content gzipped.\n // See https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer for specific CSS/Script examples\n // See https://discuss.httparchive.org/t/file-size-and-compression-savings/145 for fallback multipliers\n // See https://letstalkaboutwebperf.com/en/gzip-brotli-server-config/ for MIME types to compress\n const originalSize = request.args.data.decodedBodyLength;\n let estimatedSavings = 0;\n switch (request.args.data.mimeType) {\n case 'text/css':\n // Stylesheets tend to compress extremely well.\n estimatedSavings = Math.round(originalSize * 0.8);\n break;\n case 'text/html':\n case 'text/javascript':\n // Scripts and HTML compress fairly well too.\n estimatedSavings = Math.round(originalSize * 0.67);\n break;\n case 'text/plain':\n case 'text/xml':\n case 'text/x-component':\n case 'application/javascript':\n case 'application/json':\n case 'application/manifest+json':\n case 'application/vnd.api+json':\n case 'application/xml':\n case 'application/xhtml+xml':\n case 'application/rss+xml':\n case 'application/atom+xml':\n case 'application/vnd.ms-fontobject':\n case 'application/x-font-ttf':\n case 'application/x-font-opentype':\n case 'application/x-font-truetype':\n case 'image/svg+xml':\n case 'image/x-icon':\n case 'image/vnd.microsoft.icon':\n case 'font/ttf':\n case 'font/eot':\n case 'font/otf':\n case 'font/opentype':\n // Use the average savings in HTTPArchive.\n estimatedSavings = Math.round(originalSize * 0.5);\n break;\n default: // Any other MIME types are likely already compressed.\n }\n // Check if the estimated savings are greater than the byte ignore threshold.\n // Note that the estimated gzip savings are always more than 10%, so there is\n // no percent threshold.\n return estimatedSavings < IGNORE_THRESHOLD_IN_BYTES ? 0 : estimatedSavings;\n}\n\nfunction finalize(partialModel: PartialInsightModel<DocumentLatencyInsightModel>): DocumentLatencyInsightModel {\n let hasFailure = false;\n if (partialModel.data) {\n hasFailure = !partialModel.data.checklist.usesCompression.value ||\n !partialModel.data.checklist.serverResponseIsFast.value || !partialModel.data.checklist.noRedirects.value;\n }\n\n return {\n insightKey: InsightKeys.DOCUMENT_LATENCY,\n strings: UIStrings,\n title: i18nString(UIStrings.title),\n description: i18nString(UIStrings.description),\n category: InsightCategory.ALL,\n state: hasFailure ? 'fail' : 'pass',\n ...partialModel,\n };\n}\n\nexport function generateInsight(\n data: Handlers.Types.HandlerData, context: InsightSetContext): DocumentLatencyInsightModel {\n if (!context.navigation) {\n return finalize({});\n }\n\n const millisToString = context.options.insightTimeFormatters?.milli ?? i18n.TimeUtilities.millisToString;\n\n const documentRequest = data.NetworkRequests.byId.get(context.navigationId);\n if (!documentRequest) {\n return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});\n }\n\n const serverResponseTime = getServerResponseTime(documentRequest);\n if (serverResponseTime === null) {\n throw new Error('missing document request timing');\n }\n\n const serverResponseTooSlow = serverResponseTime > TOO_SLOW_THRESHOLD_MS;\n\n let overallSavingsMs = 0;\n if (serverResponseTime > TOO_SLOW_THRESHOLD_MS) {\n overallSavingsMs = Math.max(serverResponseTime - TARGET_MS, 0);\n }\n\n const redirectDuration =\n Math.round(documentRequest.args.data.syntheticData.redirectionDuration / 1000) as Types.Timing.Milli;\n overallSavingsMs += redirectDuration;\n\n const metricSavings = {\n FCP: overallSavingsMs as Types.Timing.Milli,\n LCP: overallSavingsMs as Types.Timing.Milli,\n };\n\n const uncompressedResponseBytes = getCompressionSavings(documentRequest);\n\n const noRedirects = redirectDuration === 0;\n const serverResponseIsFast = !serverResponseTooSlow;\n const usesCompression = uncompressedResponseBytes === 0;\n\n return finalize({\n relatedEvents: [documentRequest],\n data: {\n serverResponseTime,\n redirectDuration: Types.Timing.Milli(redirectDuration),\n uncompressedResponseBytes,\n documentRequest,\n checklist: {\n noRedirects: {\n label: noRedirects ? i18nString(UIStrings.passingRedirects) : i18nString(UIStrings.failedRedirects, {\n PH1: documentRequest.args.data.redirects.length,\n PH2: millisToString(redirectDuration),\n }),\n value: noRedirects\n },\n serverResponseIsFast: {\n label: serverResponseIsFast ?\n i18nString(UIStrings.passingServerResponseTime, {PH1: millisToString(serverResponseTime)}) :\n i18nString(UIStrings.failedServerResponseTime, {PH1: millisToString(serverResponseTime)}),\n value: serverResponseIsFast\n },\n usesCompression: {\n label: usesCompression ? i18nString(UIStrings.passingTextCompression) :\n i18nString(UIStrings.failedTextCompression),\n value: usesCompression\n },\n },\n },\n metricSavings,\n wastedBytes: uncompressedResponseBytes,\n });\n}\n\nexport function createOverlays(model: DocumentLatencyInsightModel): Types.Overlays.Overlay[] {\n if (!model.data?.documentRequest) {\n return [];\n }\n\n const overlays: Types.Overlays.Overlay[] = [];\n const event = model.data.documentRequest;\n const redirectDurationMicro = Helpers.Timing.milliToMicro(model.data.redirectDuration);\n\n const sections = [];\n if (model.data.redirectDuration) {\n const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n event.ts,\n (event.ts + redirectDurationMicro) as Types.Timing.Micro,\n );\n sections.push({bounds, label: i18nString(UIStrings.redirectsLabel), showDuration: true});\n overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});\n }\n if (!model.data.checklist.serverResponseIsFast.value) {\n const serverResponseTimeMicro = Helpers.Timing.milliToMicro(model.data.serverResponseTime);\n // NOTE: NetworkRequestHandlers never makes a synthetic network request event if `timing` is missing.\n const sendEnd = event.args.data.timing?.sendEnd ?? Types.Timing.Milli(0);\n const sendEndMicro = Helpers.Timing.milliToMicro(sendEnd);\n const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n sendEndMicro,\n (sendEndMicro + serverResponseTimeMicro) as Types.Timing.Micro,\n );\n sections.push({bounds, label: i18nString(UIStrings.serverResponseTimeLabel), showDuration: true});\n }\n if (model.data.uncompressedResponseBytes) {\n const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n event.args.data.syntheticData.downloadStart,\n (event.args.data.syntheticData.downloadStart + event.args.data.syntheticData.download) as Types.Timing.Micro,\n );\n sections.push({bounds, label: i18nString(UIStrings.uncompressedDownload), showDuration: true});\n overlays.push({type: 'CANDY_STRIPED_TIME_RANGE', bounds, entry: event});\n }\n\n if (sections.length) {\n overlays.push({\n type: 'TIMESPAN_BREAKDOWN',\n sections,\n entry: model.data.documentRequest,\n // Always render below because the document request is guaranteed to be\n // the first request in the network track.\n renderLocation: 'BELOW_EVENT',\n });\n }\n overlays.push({\n type: 'ENTRY_SELECTED',\n entry: model.data.documentRequest,\n });\n\n return overlays;\n}\n"]}
|
|
@@ -24,6 +24,6 @@ export type DuplicatedJavaScriptInsightModel = InsightModel<typeof UIStrings, {
|
|
|
24
24
|
scripts: Handlers.ModelHandlers.Scripts.Script[];
|
|
25
25
|
mainDocumentUrl: string;
|
|
26
26
|
}>;
|
|
27
|
-
export declare function
|
|
28
|
-
export declare function generateInsight(
|
|
27
|
+
export declare function isDuplicatedJavaScriptInsight(model: InsightModel): model is DuplicatedJavaScriptInsightModel;
|
|
28
|
+
export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): DuplicatedJavaScriptInsightModel;
|
|
29
29
|
export declare function createOverlays(model: DuplicatedJavaScriptInsightModel): Types.Overlays.Overlay[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Copyright 2025 The Chromium Authors
|
|
1
|
+
// Copyright 2025 The Chromium Authors
|
|
2
2
|
// Use of this source code is governed by a BSD-style license that can be
|
|
3
3
|
// found in the LICENSE file.
|
|
4
4
|
// import * as i18n from '../../../core/i18n/i18n.js';
|
|
@@ -35,11 +35,11 @@ function finalize(partialModel) {
|
|
|
35
35
|
...partialModel,
|
|
36
36
|
};
|
|
37
37
|
}
|
|
38
|
-
export function
|
|
38
|
+
export function isDuplicatedJavaScriptInsight(model) {
|
|
39
39
|
return model.insightKey === InsightKeys.DUPLICATE_JAVASCRIPT;
|
|
40
40
|
}
|
|
41
|
-
export function generateInsight(
|
|
42
|
-
const scripts =
|
|
41
|
+
export function generateInsight(data, context) {
|
|
42
|
+
const scripts = data.Scripts.scripts.filter(script => {
|
|
43
43
|
if (script.frame !== context.frameId) {
|
|
44
44
|
return false;
|
|
45
45
|
}
|
|
@@ -73,7 +73,7 @@ export function generateInsight(parsedTrace, context) {
|
|
|
73
73
|
duplicationGroupedByNodeModules,
|
|
74
74
|
scriptsWithDuplication: [...new Set(scriptsWithDuplication)],
|
|
75
75
|
scripts,
|
|
76
|
-
mainDocumentUrl: context.navigation?.args.data?.url ??
|
|
76
|
+
mainDocumentUrl: context.navigation?.args.data?.url ?? data.Meta.mainFrameURL,
|
|
77
77
|
metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),
|
|
78
78
|
wastedBytes: wastedBytesByRequestId.values().reduce((acc, cur) => acc + cur, 0),
|
|
79
79
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DuplicatedJavaScript.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DuplicatedJavaScript.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"DuplicatedJavaScript.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/DuplicatedJavaScript.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2025 The Chromium Authors\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Extras from '../extras/extras.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport type * as Types from '../types/types.js';\n\nimport {estimateCompressionRatioForScript, metricSavingsForWastedBytes} from './Common.js';\nimport {\n InsightCategory,\n InsightKeys,\n type InsightModel,\n type InsightSetContext,\n type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n /**\n * @description Title of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.\n */\n title: 'Duplicated JavaScript',\n /**\n * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.\n */\n description:\n 'Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.',\n /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */\n columnSource: 'Source',\n /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */\n columnDuplicatedBytes: 'Duplicated bytes',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicatedJavaScript.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type DuplicatedJavaScriptInsightModel = InsightModel<typeof UIStrings, {\n duplication: Extras.ScriptDuplication.ScriptDuplication,\n duplicationGroupedByNodeModules: Extras.ScriptDuplication.ScriptDuplication,\n scriptsWithDuplication: Handlers.ModelHandlers.Scripts.Script[],\n scripts: Handlers.ModelHandlers.Scripts.Script[],\n mainDocumentUrl: string,\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<DuplicatedJavaScriptInsightModel>):\n DuplicatedJavaScriptInsightModel {\n const requests = partialModel.scriptsWithDuplication.map(script => script.request).filter(e => !!e);\n\n return {\n insightKey: InsightKeys.DUPLICATE_JAVASCRIPT,\n strings: UIStrings,\n title: i18nString(UIStrings.title),\n description: i18nString(UIStrings.description),\n category: InsightCategory.LCP,\n state: Boolean(partialModel.duplication.values().next().value) ? 'fail' : 'pass',\n relatedEvents: [...new Set(requests)],\n ...partialModel,\n };\n}\n\nexport function isDuplicatedJavaScriptInsight(model: InsightModel): model is DuplicatedJavaScriptInsightModel {\n return model.insightKey === InsightKeys.DUPLICATE_JAVASCRIPT;\n}\n\nexport function generateInsight(\n data: Handlers.Types.HandlerData, context: InsightSetContext): DuplicatedJavaScriptInsightModel {\n const scripts = data.Scripts.scripts.filter(script => {\n if (script.frame !== context.frameId) {\n return false;\n }\n\n if (script.url?.startsWith('chrome-extension://')) {\n return false;\n }\n\n return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts);\n });\n\n const compressionRatios = new Map<string, number>();\n for (const script of scripts) {\n if (script.request) {\n compressionRatios.set(script.request.args.data.requestId, estimateCompressionRatioForScript(script));\n }\n }\n\n const {duplication, duplicationGroupedByNodeModules} =\n Extras.ScriptDuplication.computeScriptDuplication({scripts}, compressionRatios);\n const scriptsWithDuplication = [...duplication.values().flatMap(data => data.duplicates.map(d => d.script))];\n\n const wastedBytesByRequestId = new Map<string, number>();\n for (const {duplicates} of duplication.values()) {\n for (let i = 1; i < duplicates.length; i++) {\n const sourceData = duplicates[i];\n if (!sourceData.script.request) {\n continue;\n }\n\n const transferSize = sourceData.attributedSize;\n const requestId = sourceData.script.request.args.data.requestId;\n wastedBytesByRequestId.set(requestId, (wastedBytesByRequestId.get(requestId) || 0) + transferSize);\n }\n }\n\n return finalize({\n duplication,\n duplicationGroupedByNodeModules,\n scriptsWithDuplication: [...new Set(scriptsWithDuplication)],\n scripts,\n mainDocumentUrl: context.navigation?.args.data?.url ?? data.Meta.mainFrameURL,\n metricSavings: metricSavingsForWastedBytes(wastedBytesByRequestId, context),\n wastedBytes: wastedBytesByRequestId.values().reduce((acc, cur) => acc + cur, 0),\n });\n}\n\nexport function createOverlays(model: DuplicatedJavaScriptInsightModel): Types.Overlays.Overlay[] {\n return model.scriptsWithDuplication.map(script => script.request).filter(e => !!e).map(request => {\n return {\n type: 'ENTRY_OUTLINE',\n entry: request,\n outlineReason: 'ERROR',\n };\n });\n}\n"]}
|
|
@@ -24,5 +24,6 @@ export interface RemoteFont {
|
|
|
24
24
|
export type FontDisplayInsightModel = InsightModel<typeof UIStrings, {
|
|
25
25
|
fonts: RemoteFont[];
|
|
26
26
|
}>;
|
|
27
|
-
export declare function
|
|
27
|
+
export declare function isFontDisplayInsight(model: InsightModel): model is FontDisplayInsightModel;
|
|
28
|
+
export declare function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): FontDisplayInsightModel;
|
|
28
29
|
export declare function createOverlays(model: FontDisplayInsightModel): Types.Overlays.Overlay[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Copyright 2024 The Chromium Authors
|
|
1
|
+
// Copyright 2024 The Chromium Authors
|
|
2
2
|
// Use of this source code is governed by a BSD-style license that can be
|
|
3
3
|
// found in the LICENSE file.
|
|
4
4
|
// import * as i18n from '../../../core/i18n/i18n.js';
|
|
@@ -31,15 +31,18 @@ function finalize(partialModel) {
|
|
|
31
31
|
...partialModel,
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
|
-
export function
|
|
34
|
+
export function isFontDisplayInsight(model) {
|
|
35
|
+
return model.insightKey === InsightKeys.FONT_DISPLAY;
|
|
36
|
+
}
|
|
37
|
+
export function generateInsight(data, context) {
|
|
35
38
|
const fonts = [];
|
|
36
|
-
for (const remoteFont of
|
|
39
|
+
for (const remoteFont of data.LayoutShifts.remoteFonts) {
|
|
37
40
|
const event = remoteFont.beginRemoteFontLoadEvent;
|
|
38
41
|
if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {
|
|
39
42
|
continue;
|
|
40
43
|
}
|
|
41
44
|
const requestId = `${event.pid}.${event.args.id}`;
|
|
42
|
-
const request =
|
|
45
|
+
const request = data.NetworkRequests.byId.get(requestId);
|
|
43
46
|
if (!request) {
|
|
44
47
|
continue;
|
|
45
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FontDisplay.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/FontDisplay.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"FontDisplay.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/FontDisplay.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Platform from '../../../core/platform/platform.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n InsightCategory,\n InsightKeys,\n type InsightModel,\n type InsightSetContext,\n type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */\n title: 'Font display',\n /**\n * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.\n */\n description:\n 'Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',\n /** Column for a font loaded by the page to render text. */\n fontColumn: 'Font',\n /** Column for the amount of time wasted. */\n wastedTimeColumn: 'Wasted time',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport interface RemoteFont {\n name?: string;\n request: Types.Events.SyntheticNetworkRequest;\n display: string;\n wastedTime: Types.Timing.Milli;\n}\n\nexport type FontDisplayInsightModel = InsightModel<typeof UIStrings, {\n fonts: RemoteFont[],\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<FontDisplayInsightModel>): FontDisplayInsightModel {\n return {\n insightKey: InsightKeys.FONT_DISPLAY,\n strings: UIStrings,\n title: i18nString(UIStrings.title),\n description: i18nString(UIStrings.description),\n category: InsightCategory.INP,\n state: partialModel.fonts.find(font => font.wastedTime > 0) ? 'fail' : 'pass',\n ...partialModel,\n };\n}\n\nexport function isFontDisplayInsight(model: InsightModel): model is FontDisplayInsightModel {\n return model.insightKey === InsightKeys.FONT_DISPLAY;\n}\n\nexport function generateInsight(data: Handlers.Types.HandlerData, context: InsightSetContext): FontDisplayInsightModel {\n const fonts: RemoteFont[] = [];\n for (const remoteFont of data.LayoutShifts.remoteFonts) {\n const event = remoteFont.beginRemoteFontLoadEvent;\n if (!Helpers.Timing.eventIsInBounds(event, context.bounds)) {\n continue;\n }\n\n const requestId = `${event.pid}.${event.args.id}`;\n const request = data.NetworkRequests.byId.get(requestId);\n if (!request) {\n continue;\n }\n\n if (!/^(block|fallback|auto)$/.test(remoteFont.display)) {\n continue;\n }\n\n const wastedTimeMicro =\n Types.Timing.Micro(request.args.data.syntheticData.finishTime - request.args.data.syntheticData.sendStartTime);\n // TODO(crbug.com/352244504): should really end at the time of the next Commit trace event.\n let wastedTime =\n Platform.NumberUtilities.floor(Helpers.Timing.microToMilli(wastedTimeMicro), 1 / 5) as Types.Timing.Milli;\n if (wastedTime === 0) {\n continue;\n }\n\n // All browsers wait for no more than 3s.\n wastedTime = Math.min(wastedTime, 3000) as Types.Timing.Milli;\n\n fonts.push({\n name: remoteFont.name,\n request,\n display: remoteFont.display,\n wastedTime,\n });\n }\n\n fonts.sort((a, b) => b.wastedTime - a.wastedTime);\n\n const savings = Math.max(...fonts.map(f => f.wastedTime)) as Types.Timing.Milli;\n\n return finalize({\n relatedEvents: fonts.map(f => f.request),\n fonts,\n metricSavings: {FCP: savings},\n });\n}\n\nexport function createOverlays(model: FontDisplayInsightModel): Types.Overlays.Overlay[] {\n return model.fonts.map(font => ({\n type: 'ENTRY_OUTLINE',\n entry: font.request,\n outlineReason: font.wastedTime ? 'ERROR' : 'INFO',\n }));\n}\n"]}
|
|
@@ -51,6 +51,7 @@ export interface ForcedReflowAggregatedData {
|
|
|
51
51
|
totalReflowTime: number;
|
|
52
52
|
topLevelFunctionCallEvents: Types.Events.Event[];
|
|
53
53
|
}
|
|
54
|
-
export declare function
|
|
54
|
+
export declare function isForcedReflowInsight(model: InsightModel): model is ForcedReflowInsightModel;
|
|
55
|
+
export declare function generateInsight(traceParsedData: Handlers.Types.HandlerData, context: InsightSetContext): ForcedReflowInsightModel;
|
|
55
56
|
export declare function createOverlays(model: ForcedReflowInsightModel): Types.Overlays.Overlay[];
|
|
56
57
|
export declare function createOverlayForEvents(events: Types.Events.Event[], outlineReason?: 'ERROR' | 'INFO'): Types.Overlays.Overlay[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Copyright 2024 The Chromium Authors
|
|
1
|
+
// Copyright 2024 The Chromium Authors
|
|
2
2
|
// Use of this source code is governed by a BSD-style license that can be
|
|
3
3
|
// found in the LICENSE file.
|
|
4
4
|
// import * as i18n from '../../../core/i18n/i18n.js';
|
|
@@ -107,8 +107,11 @@ function finalize(partialModel) {
|
|
|
107
107
|
}
|
|
108
108
|
function getBottomCallFrameForEvent(event, traceParsedData) {
|
|
109
109
|
const profileStackTrace = Extras.StackTraceForEvent.get(event, traceParsedData);
|
|
110
|
-
const
|
|
111
|
-
return profileStackTrace?.callFrames[0] ??
|
|
110
|
+
const eventTopCallFrame = Helpers.Trace.getStackTraceTopCallFrameInEventPayload(event);
|
|
111
|
+
return profileStackTrace?.callFrames[0] ?? eventTopCallFrame ?? null;
|
|
112
|
+
}
|
|
113
|
+
export function isForcedReflowInsight(model) {
|
|
114
|
+
return model.insightKey === InsightKeys.FORCED_REFLOW;
|
|
112
115
|
}
|
|
113
116
|
export function generateInsight(traceParsedData, context) {
|
|
114
117
|
const isWithinContext = (event) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ForcedReflow.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/ForcedReflow.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Platform from '../../../core/platform/platform.js';\nimport type * as Protocol from '../../../generated/protocol.js';\nimport * as Extras from '../extras/extras.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n InsightCategory,\n InsightKeys,\n type InsightModel,\n type InsightSetContext,\n type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n /**\n * @description Title of an insight that provides details about Forced reflow.\n */\n title: 'Forced reflow',\n /**\n * @description Text to describe the forced reflow.\n */\n description:\n 'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and possible mitigations.',\n /**\n * @description Title of a list to provide related stack trace data\n */\n relatedStackTrace: 'Stack trace',\n /**\n * @description Text to describe the top time-consuming function call\n */\n topTimeConsumingFunctionCall: 'Top function call',\n /**\n * @description Text to describe the total reflow time\n */\n totalReflowTime: 'Total reflow time',\n /**\n * @description Text to describe CPU processor tasks that could not be attributed to any specific source code.\n */\n unattributed: '[unattributed]',\n /**\n * @description Text for the name of anonymous functions\n */\n anonymous: '(anonymous)',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/ForcedReflow.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {\n topLevelFunctionCallData: ForcedReflowAggregatedData | undefined,\n aggregatedBottomUpData: BottomUpCallStack[],\n}>;\n\nexport interface BottomUpCallStack {\n /**\n * `null` indicates that this data is for unattributed force reflows.\n */\n bottomUpData: Types.Events.CallFrame|Protocol.Runtime.CallFrame|null;\n totalTime: number;\n relatedEvents: Types.Events.Event[];\n}\n\nexport interface ForcedReflowAggregatedData {\n topLevelFunctionCall: Types.Events.CallFrame|Protocol.Runtime.CallFrame;\n totalReflowTime: number;\n topLevelFunctionCallEvents: Types.Events.Event[];\n}\n\nfunction getCallFrameId(callFrame: Types.Events.CallFrame|Protocol.Runtime.CallFrame): string {\n return callFrame.scriptId + ':' + callFrame.lineNumber + ':' + callFrame.columnNumber;\n}\n\nfunction getLargestTopLevelFunctionData(\n forcedReflowEvents: Types.Events.Event[], traceParsedData: Handlers.Types.ParsedTrace): ForcedReflowAggregatedData|\n undefined {\n const entryToNodeMap = traceParsedData.Renderer.entryToNode;\n const dataByTopLevelFunction = new Map<string, ForcedReflowAggregatedData>();\n if (forcedReflowEvents.length === 0) {\n return;\n }\n\n for (const event of forcedReflowEvents) {\n // Gather the stack traces by searching in the tree\n const traceNode = entryToNodeMap.get(event);\n if (!traceNode) {\n continue;\n }\n\n let node = traceNode.parent;\n let topLevelFunctionCall;\n let topLevelFunctionCallEvent: Types.Events.Event|undefined;\n while (node) {\n const eventData = node.entry;\n if (Types.Events.isProfileCall(eventData)) {\n topLevelFunctionCall = eventData.callFrame;\n topLevelFunctionCallEvent = eventData;\n } else {\n // We have finished searching bottom up data\n if (Types.Events.isFunctionCall(eventData) && eventData.args.data &&\n Types.Events.objectIsCallFrame(eventData.args.data)) {\n topLevelFunctionCall = eventData.args.data;\n topLevelFunctionCallEvent = eventData;\n }\n break;\n }\n node = node.parent;\n }\n\n if (!topLevelFunctionCall || !topLevelFunctionCallEvent) {\n continue;\n }\n\n const aggregatedDataId = getCallFrameId(topLevelFunctionCall);\n const aggregatedData =\n Platform.MapUtilities.getWithDefault(dataByTopLevelFunction, aggregatedDataId, () => ({\n topLevelFunctionCall,\n totalReflowTime: 0,\n topLevelFunctionCallEvents: [],\n }));\n aggregatedData.totalReflowTime += (event.dur ?? 0);\n aggregatedData.topLevelFunctionCallEvents.push(topLevelFunctionCallEvent);\n }\n\n let topTimeConsumingData: ForcedReflowAggregatedData|undefined = undefined;\n dataByTopLevelFunction.forEach(data => {\n if (!topTimeConsumingData || data.totalReflowTime > topTimeConsumingData.totalReflowTime) {\n topTimeConsumingData = data;\n }\n });\n\n return topTimeConsumingData;\n}\n\nfunction finalize(partialModel: PartialInsightModel<ForcedReflowInsightModel>): ForcedReflowInsightModel {\n return {\n insightKey: InsightKeys.FORCED_REFLOW,\n strings: UIStrings,\n title: i18nString(UIStrings.title),\n description: i18nString(UIStrings.description),\n category: InsightCategory.ALL,\n state: partialModel.aggregatedBottomUpData.length !== 0 ? 'fail' : 'pass',\n ...partialModel,\n };\n}\n\nfunction getBottomCallFrameForEvent(event: Types.Events.Event, traceParsedData: Handlers.Types.ParsedTrace):\n Types.Events.CallFrame|Protocol.Runtime.CallFrame|null {\n const profileStackTrace = Extras.StackTraceForEvent.get(event, traceParsedData);\n const eventStackTrace = Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event);\n\n return profileStackTrace?.callFrames[0] ?? eventStackTrace?.[0] ?? null;\n}\n\nexport function generateInsight(\n traceParsedData: Handlers.Types.ParsedTrace, context: InsightSetContext): ForcedReflowInsightModel {\n const isWithinContext = (event: Types.Events.Event): boolean => {\n const frameId = Helpers.Trace.frameIDForEvent(event);\n if (frameId !== context.frameId) {\n return false;\n }\n\n return Helpers.Timing.eventIsInBounds(event, context.bounds);\n };\n\n const bottomUpDataMap = new Map<string, BottomUpCallStack>();\n const events = traceParsedData.Warnings.perWarning.get('FORCED_REFLOW')?.filter(isWithinContext) ?? [];\n for (const event of events) {\n const bottomCallFrame = getBottomCallFrameForEvent(event, traceParsedData);\n const bottomCallId = bottomCallFrame ? getCallFrameId(bottomCallFrame) : 'UNATTRIBUTED';\n const bottomUpData =\n Platform.MapUtilities.getWithDefault(bottomUpDataMap, bottomCallId, () => ({\n bottomUpData: bottomCallFrame,\n totalTime: 0,\n relatedEvents: [],\n }));\n bottomUpData.totalTime += event.dur ?? 0;\n bottomUpData.relatedEvents.push(event);\n }\n\n const topLevelFunctionCallData = getLargestTopLevelFunctionData(events, traceParsedData);\n\n return finalize({\n relatedEvents: events,\n topLevelFunctionCallData,\n aggregatedBottomUpData: [...bottomUpDataMap.values()],\n });\n}\n\nexport function createOverlays(model: ForcedReflowInsightModel): Types.Overlays.Overlay[] {\n if (!model.topLevelFunctionCallData) {\n return [];\n }\n\n const allBottomUpEvents = [...model.aggregatedBottomUpData.values().flatMap(data => data.relatedEvents)];\n return [\n ...createOverlayForEvents(model.topLevelFunctionCallData.topLevelFunctionCallEvents, 'INFO'),\n ...createOverlayForEvents(allBottomUpEvents),\n ];\n}\n\nexport function createOverlayForEvents(\n events: Types.Events.Event[], outlineReason: 'ERROR'|'INFO' = 'ERROR'): Types.Overlays.Overlay[] {\n return events.map(e => ({\n type: 'ENTRY_OUTLINE',\n entry: e,\n outlineReason,\n }));\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ForcedReflow.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/ForcedReflow.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Platform from '../../../core/platform/platform.js';\nimport type * as Protocol from '../../../generated/protocol.js';\nimport * as Extras from '../extras/extras.js';\nimport type * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n InsightCategory,\n InsightKeys,\n type InsightModel,\n type InsightSetContext,\n type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n /**\n * @description Title of an insight that provides details about Forced reflow.\n */\n title: 'Forced reflow',\n /**\n * @description Text to describe the forced reflow.\n */\n description:\n 'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and possible mitigations.',\n /**\n * @description Title of a list to provide related stack trace data\n */\n relatedStackTrace: 'Stack trace',\n /**\n * @description Text to describe the top time-consuming function call\n */\n topTimeConsumingFunctionCall: 'Top function call',\n /**\n * @description Text to describe the total reflow time\n */\n totalReflowTime: 'Total reflow time',\n /**\n * @description Text to describe CPU processor tasks that could not be attributed to any specific source code.\n */\n unattributed: '[unattributed]',\n /**\n * @description Text for the name of anonymous functions\n */\n anonymous: '(anonymous)',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/ForcedReflow.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type ForcedReflowInsightModel = InsightModel<typeof UIStrings, {\n topLevelFunctionCallData: ForcedReflowAggregatedData | undefined,\n aggregatedBottomUpData: BottomUpCallStack[],\n}>;\n\nexport interface BottomUpCallStack {\n /**\n * `null` indicates that this data is for unattributed force reflows.\n */\n bottomUpData: Types.Events.CallFrame|Protocol.Runtime.CallFrame|null;\n totalTime: number;\n relatedEvents: Types.Events.Event[];\n}\n\nexport interface ForcedReflowAggregatedData {\n topLevelFunctionCall: Types.Events.CallFrame|Protocol.Runtime.CallFrame;\n totalReflowTime: number;\n topLevelFunctionCallEvents: Types.Events.Event[];\n}\n\nfunction getCallFrameId(callFrame: Types.Events.CallFrame|Protocol.Runtime.CallFrame): string {\n return callFrame.scriptId + ':' + callFrame.lineNumber + ':' + callFrame.columnNumber;\n}\n\nfunction getLargestTopLevelFunctionData(\n forcedReflowEvents: Types.Events.Event[], traceParsedData: Handlers.Types.HandlerData): ForcedReflowAggregatedData|\n undefined {\n const entryToNodeMap = traceParsedData.Renderer.entryToNode;\n const dataByTopLevelFunction = new Map<string, ForcedReflowAggregatedData>();\n if (forcedReflowEvents.length === 0) {\n return;\n }\n\n for (const event of forcedReflowEvents) {\n // Gather the stack traces by searching in the tree\n const traceNode = entryToNodeMap.get(event);\n if (!traceNode) {\n continue;\n }\n\n let node = traceNode.parent;\n let topLevelFunctionCall;\n let topLevelFunctionCallEvent: Types.Events.Event|undefined;\n while (node) {\n const eventData = node.entry;\n if (Types.Events.isProfileCall(eventData)) {\n topLevelFunctionCall = eventData.callFrame;\n topLevelFunctionCallEvent = eventData;\n } else {\n // We have finished searching bottom up data\n if (Types.Events.isFunctionCall(eventData) && eventData.args.data &&\n Types.Events.objectIsCallFrame(eventData.args.data)) {\n topLevelFunctionCall = eventData.args.data;\n topLevelFunctionCallEvent = eventData;\n }\n break;\n }\n node = node.parent;\n }\n\n if (!topLevelFunctionCall || !topLevelFunctionCallEvent) {\n continue;\n }\n\n const aggregatedDataId = getCallFrameId(topLevelFunctionCall);\n const aggregatedData =\n Platform.MapUtilities.getWithDefault(dataByTopLevelFunction, aggregatedDataId, () => ({\n topLevelFunctionCall,\n totalReflowTime: 0,\n topLevelFunctionCallEvents: [],\n }));\n aggregatedData.totalReflowTime += (event.dur ?? 0);\n aggregatedData.topLevelFunctionCallEvents.push(topLevelFunctionCallEvent);\n }\n\n let topTimeConsumingData: ForcedReflowAggregatedData|undefined = undefined;\n dataByTopLevelFunction.forEach(data => {\n if (!topTimeConsumingData || data.totalReflowTime > topTimeConsumingData.totalReflowTime) {\n topTimeConsumingData = data;\n }\n });\n\n return topTimeConsumingData;\n}\n\nfunction finalize(partialModel: PartialInsightModel<ForcedReflowInsightModel>): ForcedReflowInsightModel {\n return {\n insightKey: InsightKeys.FORCED_REFLOW,\n strings: UIStrings,\n title: i18nString(UIStrings.title),\n description: i18nString(UIStrings.description),\n category: InsightCategory.ALL,\n state: partialModel.aggregatedBottomUpData.length !== 0 ? 'fail' : 'pass',\n ...partialModel,\n };\n}\n\nfunction getBottomCallFrameForEvent(event: Types.Events.Event, traceParsedData: Handlers.Types.HandlerData):\n Types.Events.CallFrame|Protocol.Runtime.CallFrame|null {\n const profileStackTrace = Extras.StackTraceForEvent.get(event, traceParsedData);\n const eventTopCallFrame = Helpers.Trace.getStackTraceTopCallFrameInEventPayload(event);\n\n return profileStackTrace?.callFrames[0] ?? eventTopCallFrame ?? null;\n}\n\nexport function isForcedReflowInsight(model: InsightModel): model is ForcedReflowInsightModel {\n return model.insightKey === InsightKeys.FORCED_REFLOW;\n}\n\nexport function generateInsight(\n traceParsedData: Handlers.Types.HandlerData, context: InsightSetContext): ForcedReflowInsightModel {\n const isWithinContext = (event: Types.Events.Event): boolean => {\n const frameId = Helpers.Trace.frameIDForEvent(event);\n if (frameId !== context.frameId) {\n return false;\n }\n\n return Helpers.Timing.eventIsInBounds(event, context.bounds);\n };\n\n const bottomUpDataMap = new Map<string, BottomUpCallStack>();\n const events = traceParsedData.Warnings.perWarning.get('FORCED_REFLOW')?.filter(isWithinContext) ?? [];\n for (const event of events) {\n const bottomCallFrame = getBottomCallFrameForEvent(event, traceParsedData);\n const bottomCallId = bottomCallFrame ? getCallFrameId(bottomCallFrame) : 'UNATTRIBUTED';\n const bottomUpData =\n Platform.MapUtilities.getWithDefault(bottomUpDataMap, bottomCallId, () => ({\n bottomUpData: bottomCallFrame,\n totalTime: 0,\n relatedEvents: [],\n }));\n bottomUpData.totalTime += event.dur ?? 0;\n bottomUpData.relatedEvents.push(event);\n }\n\n const topLevelFunctionCallData = getLargestTopLevelFunctionData(events, traceParsedData);\n\n return finalize({\n relatedEvents: events,\n topLevelFunctionCallData,\n aggregatedBottomUpData: [...bottomUpDataMap.values()],\n });\n}\n\nexport function createOverlays(model: ForcedReflowInsightModel): Types.Overlays.Overlay[] {\n if (!model.topLevelFunctionCallData) {\n return [];\n }\n\n const allBottomUpEvents = [...model.aggregatedBottomUpData.values().flatMap(data => data.relatedEvents)];\n return [\n ...createOverlayForEvents(model.topLevelFunctionCallData.topLevelFunctionCallEvents, 'INFO'),\n ...createOverlayForEvents(allBottomUpEvents),\n ];\n}\n\nexport function createOverlayForEvents(\n events: Types.Events.Event[], outlineReason: 'ERROR'|'INFO' = 'ERROR'): Types.Overlays.Overlay[] {\n return events.map(e => ({\n type: 'ENTRY_OUTLINE',\n entry: e,\n outlineReason,\n }));\n}\n"]}
|