feat: Editorial review: Long animation frames API docs

[chrisdavidmills]

Description

#32937 contains the engineering technical review for my work on Long Animation Frames API docs, which has been completed and approved. Thank you to @tunetheweb and @noamr for your thorough and detailed review work.

This is a new PR based on the same branch, which is intended to contain the editorial review for the same work.

---

Background information

The Long Animation Frames API was released in Chrome 123. This PR adds docs for this API.

Specifically, it:

• Adds a guide to using the API
• Adds reference docs for the PerformanceLongAnimationFrameTiming interface.
• Adds reference docs for the PerformanceScriptTiming interface.
• Adds entries to existing docs that require them, such as https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/entryType
• Updates GroupData.json so that the relevant new items appear in the Performance API sidebar

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs (24 pages)

• /en-US/docs/Glossary/Long_task
• /en-US/docs/Web/API/PerformanceEntry/entryType
• /en-US/docs/Web/API/PerformanceEntry
• /en-US/docs/Web/API/PerformanceLongAnimationFrameTiming/blockingDuration
• /en-US/docs/Web/API/PerformanceLongAnimationFrameTiming/firstUIEventTimestamp
• /en-US/docs/Web/API/PerformanceLongAnimationFrameTiming/renderStart
• /en-US/docs/Web/API/PerformanceLongAnimationFrameTiming/scripts
• /en-US/docs/Web/API/PerformanceLongAnimationFrameTiming/styleAndLayoutStart
• /en-US/docs/Web/API/PerformanceLongAnimationFrameTiming/toJSON
• /en-US/docs/Web/API/PerformanceLongAnimationFrameTiming
• /en-US/docs/Web/API/PerformanceScriptTiming/executionStart
• /en-US/docs/Web/API/PerformanceScriptTiming/forcedStyleAndLayoutDuration
• /en-US/docs/Web/API/PerformanceScriptTiming/invokerType
• /en-US/docs/Web/API/PerformanceScriptTiming/invoker
• /en-US/docs/Web/API/PerformanceScriptTiming/pauseDuration
• /en-US/docs/Web/API/PerformanceScriptTiming/sourceCharPosition
• /en-US/docs/Web/API/PerformanceScriptTiming/sourceFunctionName
• /en-US/docs/Web/API/PerformanceScriptTiming/sourceURL
• /en-US/docs/Web/API/PerformanceScriptTiming/toJSON
• /en-US/docs/Web/API/PerformanceScriptTiming/windowAttribution
• /en-US/docs/Web/API/PerformanceScriptTiming/window
• /en-US/docs/Web/API/PerformanceScriptTiming
• /en-US/docs/Web/API/Performance_API/Long_animation_frame_timing
• /en-US/docs/Web/API/Performance_API

Flaws (1)

Note! 23 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/PerformanceScriptTiming/sourceFunctionName
Title: PerformanceScriptTiming: sourceFunctionName property
Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: api.PerformanceScriptTiming.sourceFunctionName

External URLs (10)

URL: /en-US/docs/Web/API/PerformanceScriptTiming
Title: PerformanceScriptTiming

• https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/PerformanceScriptTiming/forcedStyleAndLayoutDuration
Title: PerformanceScriptTiming: forcedStyleAndLayoutDuration property

• https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Performance_API/Long_animation_frame_timing
Title: Long animation frame timing

• https://github.com/w3c/long-animation-frames (1 time) (Note! This may be a new URL 👀)
• https://w3c.github.io/long-animation-frames/ (1 time) (Note! This may be a new URL 👀)
• https://w3c.github.io/longtasks/ (1 time) (Note! This may be a new URL 👀)
• https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing (1 time) (Note! This may be a new URL 👀)
• https://web.dev/articles/inp (1 time) (Note! This may be a new URL 👀)
• https://web.dev/articles/optimize-long-tasks (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/PerformanceLongAnimationFrameTiming/blockingDuration
Title: PerformanceLongAnimationFrameTiming: blockingDuration property

• https://web.dev/articles/optimize-long-tasks (1 time) (Note! This may be a new URL 👀)
• https://web.dev/articles/tbt (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-04-19 14:49:13)

[skyclouds2001]

typo - readonly => read-only

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[dipikabh]

I've looked at all the pages now except https://pr33039.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/Performance_API/Long_animation_frame_timing. I'll be able to get to it tomorrow.

[dipikabh]

I think I've looked at all the pages in this PR now.

[dipikabh]

Suggested change

	You can test whether the Long Animation Frames API is supported using {{domxref("PerformanceObserver.supportedEntryTypes")}}:
	You can test whether the Long Animation Frames API is supported using {{domxref("PerformanceObserver.supportedEntryTypes_static")}}:

[chrisdavidmills]

I don't think this change is needed. The macro is already clever enough to resolve to the correct URL, and if you explicitly add this, it appears in the link text, which is not what we want (it's not part of the actual property name).

[dipikabh]

Yeah, the flaw does say it will redirect:

Explanation: /en-US/docs/Web/API/PerformanceObserver/supportedEntryTypes redirects to /en-US/docs/Web/API/PerformanceObserver/supportedEntryTypes_static

It also says that the flaw is fixable.

If you want, it could be updated to:

{{domxref("PerformanceObserver.supportedEntryTypes_static", "PerformanceObserver.supportedEntryTypes")}}

...the way it's been done on getEntriesByType.

[dipikabh]

Should this be a guide page-type? Elsewhere, we've used web-api-overview on API landing pages

[chrisdavidmills]

lol, yup! That was a copy-paste error. Fixed now.

[dipikabh]

Yeah, the flaw does say it will redirect:

Explanation: /en-US/docs/Web/API/PerformanceObserver/supportedEntryTypes redirects to /en-US/docs/Web/API/PerformanceObserver/supportedEntryTypes_static

It also says that the flaw is fixable.

If you want, it could be updated to:

{{domxref("PerformanceObserver.supportedEntryTypes_static", "PerformanceObserver.supportedEntryTypes")}}

...the way it's been done on getEntriesByType.

[dipikabh]

How about:

Suggested change

	- [Where long tasks fall short](https://github.com/w3c/long-animation-frames#where-long-tasks-fall-short), Long Animation Frames API explainer (2024)
	- [Where long tasks fall short](https://github.com/w3c/long-animation-frames#where-long-tasks-fall-short) on W3C (2024)

[chrisdavidmills]

I dunno; I would expect a link labeled "W3C" to go somewhere on W3.org.

[dipikabh]

Suggested change

	## Comparison with the Long Tasks API
	## Comparing with the Long Tasks API

[chrisdavidmills]

Sure, updated

[dipikabh]

I think we mean the functionalities that these specs provide

Suggested change

	The Long Animation Frames API was preceded by the [Long Tasks API](https://w3c.github.io/longtasks/) (see {{domxref("PerformanceLongTaskTiming")}}) — these specs both have a similar purpose and usage, exposing information on [long tasks](/en-US/docs/Glossary/Long_task) that block the main thread for 50ms or more.
	The Long Animation Frames API was preceded by the [Long Tasks API](https://w3c.github.io/longtasks/) (see {{domxref("PerformanceLongTaskTiming")}}) — both the APIs have a similar purpose and usage, exposing information about [long tasks](/en-US/docs/Glossary/Long_task) that block the main thread for 50ms or more.

[chrisdavidmills]

updated

[dipikabh]

Thanks for addressing all my comments, @chrisdavidmills! I'm leaving a +1 with just a few minor things for you to go over.

Appreciate your work on adding all these pages, thank you!

[chrisdavidmills]

Thanks for addressing all my comments, @chrisdavidmills! I'm leaving a +1 with just a few minor things for you to go over.

Appreciate your work on adding all these pages, thank you!

@dipikabh super awesome, thanks for another great review!

That's everything addressed, so I should be able to merge soon.