-
Notifications
You must be signed in to change notification settings - Fork 5.3k
Initial docs for experimental Web Performance APIs #4792
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 4 commits
f9b0753
5becff7
3b17a68
3c3ccd5
03295dc
091fb37
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
:::tip Canary 🧪 | ||
|
||
**This API is currently only available in React Native’s Canary and Experimental channels.** | ||
|
||
[Learn more about React Native’s release channels here.](releases/release-levels) | ||
|
||
::: |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
:::tip Experimental Feature 🧪 | ||
|
||
**This API is experimental and is not available in a stable version of React Native yet.** | ||
|
||
Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production. | ||
|
||
If you want to try it out, please [enable the Experimental Channel](releases/release-levels) in your app. | ||
|
||
::: |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
--- | ||
id: global-EventCounts | ||
title: EventCounts 🧪 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Tested the addition on PR preview, everything looks good! 👍 Just wonder if we should place the emoji before the sidebar/page title to match arrangement of already existing pages like "InteractionManager" or "DEV"? I also looked if we can do something about not the greatest sidebar wrapping for few entries: ![]() It's nothing blocking, but did not found any easy solution for that changing few styles in the DevTools, so it's just a note for me, for later. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I followed the same convention we have on react.dev, and it's also used by MDN. I can change the other cases to align with this instead. |
||
--- | ||
|
||
import CanaryAPIWarning from './\_canary-channel-api-warning.mdx'; | ||
|
||
<CanaryAPIWarning /> | ||
|
||
The global [`EventCounts`](https://developer.mozilla.org/en-US/docs/Web/API/EventCounts) class, as defined in Web specifications. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
--- | ||
id: global-PerformanceEntry | ||
title: PerformanceEntry 🧪 | ||
--- | ||
|
||
import CanaryAPIWarning from './\_canary-channel-api-warning.mdx'; | ||
|
||
<CanaryAPIWarning /> | ||
|
||
The global [`PerformanceEntry`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry) class, as defined in Web specifications. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
id: global-PerformanceEventTiming | ||
title: PerformanceEventTiming 🧪 | ||
--- | ||
|
||
import CanaryAPIWarning from './\_canary-channel-api-warning.mdx'; | ||
|
||
<CanaryAPIWarning /> | ||
|
||
The global [`PerformanceEventTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming) class, as defined in Web specifications. | ||
|
||
:::warning Partial support | ||
The `cancelable` and `target` properties are not supported yet. | ||
::: |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
id: global-PerformanceLongTaskTiming | ||
title: PerformanceLongTaskTiming 🧪 | ||
--- | ||
|
||
import CanaryAPIWarning from './\_canary-channel-api-warning.mdx'; | ||
|
||
<CanaryAPIWarning /> | ||
|
||
The global [`PerformanceLongTaskTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming) class, as defined in Web specifications. | ||
|
||
:::warning Partial support | ||
The value for the `attribution` property is always an empty array. | ||
::: |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
--- | ||
id: global-PerformanceMark | ||
title: PerformanceMark 🧪 | ||
--- | ||
|
||
import CanaryAPIWarning from './\_canary-channel-api-warning.mdx'; | ||
|
||
<CanaryAPIWarning /> | ||
|
||
The global [`PerformanceMark`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceMark) class, as defined in Web specifications. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
--- | ||
id: global-PerformanceMeasure | ||
title: PerformanceMeasure 🧪 | ||
--- | ||
|
||
import CanaryAPIWarning from './\_canary-channel-api-warning.mdx'; | ||
|
||
<CanaryAPIWarning /> | ||
|
||
The global [`PerformanceMeasure`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceMeasure) class, as defined in Web specifications. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
--- | ||
id: global-PerformanceObserver | ||
title: PerformanceObserver 🧪 | ||
--- | ||
|
||
import CanaryAPIWarning from './\_canary-channel-api-warning.mdx'; | ||
|
||
<CanaryAPIWarning /> | ||
|
||
The global [`PerformanceObserver`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver) class, as defined in Web specifications. | ||
|
||
## Example | ||
|
||
```ts | ||
const observer = new PerformanceObserver( | ||
(list, observer, options) => { | ||
for (const entry of list.getEntries()) { | ||
console.log( | ||
'Received entry with type', | ||
entry.entryType, | ||
'and name', | ||
entry.name, | ||
'that started at', | ||
entry.startTime, | ||
'and took', | ||
entry.duration, | ||
'ms', | ||
); | ||
} | ||
}, | ||
); | ||
|
||
observer.observe({entryTypes: ['mark', 'measure']}); | ||
``` | ||
|
||
--- | ||
|
||
# Reference | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why this is the only class with Reference and a more detailed documentation than just a link to the Web specification one? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Because it has additional methods that are RN-specific. |
||
|
||
## Constructor | ||
|
||
### `PerformanceObserver()` | ||
|
||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/PerformanceObserver). | ||
|
||
## Static properties | ||
|
||
### `supportedEntryTypes` | ||
|
||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/supportedEntryTypes). | ||
|
||
Returns `['mark', 'measure', 'event', 'longtask']`. | ||
|
||
## Instance methods | ||
|
||
### `observe()` | ||
|
||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/observe). | ||
|
||
### `disconnect()` | ||
|
||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/disconnect). |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
--- | ||
id: global-PerformanceObserverEntryList | ||
title: PerformanceObserverEntryList 🧪 | ||
--- | ||
|
||
import CanaryAPIWarning from './\_canary-channel-api-warning.mdx'; | ||
|
||
<CanaryAPIWarning /> | ||
|
||
The global [`PerformanceObserverEntryList`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserverEntryList) class, as defined in Web specifications. |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,10 +1,91 @@ | ||||||
--- | ||||||
id: global-performance | ||||||
title: performance | ||||||
title: performance 🧪 | ||||||
--- | ||||||
|
||||||
:::warning | ||||||
🚧 This page is work in progress, so please refer to the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/performance) for more information. | ||||||
import CanaryAPIWarning from './\_canary-channel-api-warning.mdx'; | ||||||
|
||||||
<CanaryAPIWarning /> | ||||||
|
||||||
The global [`performance`](https://developer.mozilla.org/en-US/docs/Web/API/Window/performance) object, as defined in Web specifications. | ||||||
|
||||||
--- | ||||||
|
||||||
# Reference | ||||||
|
||||||
## Instance properties | ||||||
|
||||||
### `eventCounts` | ||||||
|
||||||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance/eventCounts). | ||||||
|
||||||
### `memory` | ||||||
|
||||||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory). | ||||||
|
||||||
### `rnStartupTiming` ⚠️ | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There is a warning block below, we can avoid the emoji here, imho. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is aligned with how MDN defines the docs. For non-standard methods, the warning is always shown next to the method name. |
||||||
|
||||||
:::warning Non-standard | ||||||
This is a React Native specific extension. | ||||||
::: | ||||||
|
||||||
Provides information about the startup time of the application. | ||||||
|
||||||
```ts | ||||||
get rnStartupTiming(): ReactNativeStartupTiming; | ||||||
``` | ||||||
|
||||||
The `ReactNativeStartupTiming` interface provides the following fields: | ||||||
|
||||||
| Name | Type | Description | | ||||||
| ---------------------------------------- | -------------- | --------------------------------------------------------- | | ||||||
| `startTime` | number \| void | When the application startup was started. | | ||||||
|
||||||
| `initializeRuntimeStart` | number \| void | When the React Native runtime initialization was started. | | ||||||
| `executeJavaScriptBundleEntryPointStart` | number \| void | When the execution of the application bundle was started. | | ||||||
| `endTime` | number \| void | When the React Native runtime was fully initialized. | | ||||||
|
||||||
### `timeOrigin` | ||||||
|
||||||
:::warning Partial support | ||||||
Provides the number of milliseconds from the UNIX epoch until system boot, instead of the number of milliseconds from the UNIX epoch until app startup. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. "until system boot" or "since system boot"? Isn't the system boot the starting point (the 0)? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. "until system boot". Since system boot is just |
||||||
::: | ||||||
|
||||||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance/timeOrigin). | ||||||
|
||||||
## Instance methods | ||||||
|
||||||
### `clearMarks()` | ||||||
|
||||||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance/clearMarks). | ||||||
|
||||||
### `clearMeasures()` | ||||||
|
||||||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance/clearMeasures). | ||||||
|
||||||
### `getEntries()` | ||||||
|
||||||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntries). | ||||||
|
||||||
### `getEntriesByName()` | ||||||
|
||||||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntriesByName). | ||||||
|
||||||
### `getEntriesByType()` | ||||||
|
||||||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntriesByType). | ||||||
|
||||||
### `mark()` | ||||||
|
||||||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark). | ||||||
|
||||||
### `measure()` | ||||||
|
||||||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure). | ||||||
|
||||||
### `now()` | ||||||
|
||||||
:::warning Partial support | ||||||
Provides the number of milliseconds from system boot, instead of the number of milliseconds from app startup. | ||||||
::: | ||||||
|
||||||
The global `performance` object, as defined in Web specifications. | ||||||
See [documentation in MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance/now). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the experimental message has more details than the canary one. I'd suggest that we either provide details for both or none.