mirror
/
sitespeed.io
mirror of https://github.com/sitespeedio/sitespeed.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

First go at displaying Long Animation Frame information (coming in next Chrome) (#4108)

This commit is contained in:
Peter Hedenskog 2024-03-13 14:11:22 +01:00 committed by GitHub
parent b447cb6465
commit bde5bebca9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 58 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/plugins/html/templates/url/metrics/index.pug
View File

@ -10,6 +10,7 @@ if browsertime
- const custom = medianRun ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1].custom : pageInfo.data.browsertime.run.custom
- const cdp = medianRun ? pageInfo.data.browsertime.pageSummary.cdp[medianRun.runIndex - 1] : pageInfo.data.browsertime.run.cdp
- const renderBlocking = medianRun ? pageInfo.data.browsertime.pageSummary.renderBlocking[medianRun.runIndex - 1] : pageInfo.data.browsertime.run.renderBlocking
- const loaf = medianRun ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1].pageinfo.loaf : pageInfo.data.browsertime.run.pageinfo.loaf
small
| |
@ -27,6 +28,9 @@ if browsertime
if timings.interactionToNextPaint
a(href='#interactionToNextPaint') Interaction To Next Paint
|  | 
if loaf
a(href='#longAnimationFrames') Long Aninimation Frames
|  | 
if timings.elementTimings && Object.keys(timings.elementTimings).length > 0
a(href='#elementTimings') Element Timings
|  | 
@ -271,6 +275,7 @@ if browsertime
include ./firstInput.pug
include ./layoutShift.pug
include ./inp.pug
include ./loaf.pug
include ./elementTimings.pug
include ./serverTimings.pug

53
lib/plugins/html/templates/url/metrics/loaf.pug Normal file
View File

@ -0,0 +1,53 @@
if loaf
a#longAnimationFrames
h3 Long Animation Frames
p Read more about the Long Animation Frames API here
a(href='https://developer.chrome.com/docs/web-platform/long-animation-frames') here.
p The top 10 longest animation frames entries
each oneLoaf in loaf
table
tr
th Blocking duration
th Work duration
th Render duration
th PreLayout Duration
th Style And Layout Duration
tr
td #{h.time.ms(h.decimals(oneLoaf.blockingDuration))}
td #{h.time.ms(h.decimals(oneLoaf.workDuration))}
td #{h.time.ms(h.decimals(oneLoaf.renderDuration))}
td #{h.time.ms(h.decimals(oneLoaf.preLayoutDuration))}
td #{h.time.ms(h.decimals(oneLoaf.styleAndLayoutDuration))}
if oneLoaf.scripts.length > 0
each theScript in oneLoaf.scripts
if theScript.sourceURL !== ''
tr
td.url.assetsurl(colspan=5)
a(href=theScript.sourceURL)= theScript.sourceURL
tr
td(colspan=5)
if theScript.forcedStyleAndLayoutDuration !== 0
p Forced Style And Layout Duration: #{h.time.ms(h.decimals(theScript.forcedStyleAndLayoutDuration))}
p
b Invoker:
| #{theScript.invoker}
br
b Invoker Type:
| #{theScript.invokerType}
br
if theScript.sourceFunctionName
b Source Function Name:
| #{theScript.sourceFunctionName}
br
if theScript.windowAttribution
b Window attribution:
| #{theScript.windowAttribution}
br
if theScript.sourceCharPosition
b Source char position:
| #{theScript.sourceCharPosition}
else
tr
td(colspan=5) No availible script information.