diff --git a/files/en-us/glossary/time_to_first_byte/index.md b/files/en-us/glossary/time_to_first_byte/index.md index af1e0a5afb123b5..76f6eccbcc6fede 100644 --- a/files/en-us/glossary/time_to_first_byte/index.md +++ b/files/en-us/glossary/time_to_first_byte/index.md @@ -8,14 +8,17 @@ page-type: glossary-definition **Time to First Byte** (TTFB) refers to the time between the browser requesting a page and when it receives the first byte of information from the server. This time includes {{Glossary("DNS")}} lookup and establishing the connection using a {{Glossary("TCP")}} handshake and {{Glossary("TLS")}} handshake if the request is made over {{Glossary("HTTPS")}}. -TTFB is the time it takes between the start of the request and the start of the response, in milliseconds: +TTFB is the time it takes between the start of the request and the start of the response, in milliseconds. This can be measured using the `{{domxref("PerformanceResourceTiming.requestStart", "requestStart")}}` attribute of {{domxref("PerformanceNavigationTiming")}}: -```plain -TTFB = responseStart - navigationStart +```javascript +const ttfb = performance.getEntriesByType("navigation")[0].responseStart; ``` +> [!NOTE] +> For sites using {{HTTPStatus("103", "103 Early Hints")}}, TTFB is typically the _first bytes_ (after any redirects) — and so, the 103 interim response. Site owners wishing to measure the time until the final response should use `{{domxref("PerformanceResourceTiming.finalResponseHeadersStart", "finalResponseHeadersStart")}}`, where supported. + ## See also - [A typical HTTP session](/en-US/docs/Web/HTTP/Session) - [PerformanceResourceTiming](/en-US/docs/Web/API/PerformanceResourceTiming) -- [PerformanceTiming](/en-US/docs/Web/API/PerformanceTiming) +- [PerformanceNavigationTiming](/en-US/docs/Web/API/PerformanceNavigationTiming) diff --git a/files/en-us/web/api/animation/index.md b/files/en-us/web/api/animation/index.md index 94b574321cc42ca..148b052a41d069a 100644 --- a/files/en-us/web/api/animation/index.md +++ b/files/en-us/web/api/animation/index.md @@ -26,6 +26,8 @@ The **`Animation`** interface of the [Web Animations API](/en-US/docs/Web/API/We - : Returns the current finished Promise for this animation. - {{domxref("Animation.id")}} - : Gets and sets the `String` used to identify the animation. +- {{domxref("Animation.overallProgress")}} {{ReadOnlyInline}} {{experimental_inline}} + - : Returns a number between `0` and `1` indicating the animation's overall progress towards its finished state. - {{domxref("Animation.pending")}} {{ReadOnlyInline}} - : Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation. - {{domxref("Animation.playState")}} {{ReadOnlyInline}} diff --git a/files/en-us/web/api/animation/overallprogress/index.md b/files/en-us/web/api/animation/overallprogress/index.md new file mode 100644 index 000000000000000..bf7214bbf8f8ee2 --- /dev/null +++ b/files/en-us/web/api/animation/overallprogress/index.md @@ -0,0 +1,149 @@ +--- +title: "Animation: overallProgress property" +short-title: overallProgress +slug: Web/API/Animation/overallProgress +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.Animation.overallProgress +--- + +{{APIRef("Web Animations")}}{{seecompattable}} + +The **`overallProgress`** read-only property of the {{domxref("Animation")}} interface returns a number between `0` and `1` indicating the animation's overall progress towards its finished state. This is the overall progress across all of the animation's iterations, not each individual iteration. + +`overallProgress` works consistently across all animations, regardless of the type of {{domxref("AnimationTimeline", "timeline")}}. + +## Value + +A number between `0` and `1`, or `null` if the animation lacks a timeline, is inactive or hasn't been played yet, or if its {{domxref("Animation/currentTime", "currentTime")}} is set to a non-time value. + +If the animation's [`iterations`](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#iterations) property is set to `Infinity`, or if its {{domxref("Animation/currentTime", "currentTime")}} is set to a negative value, `overallProgress` will return `0`. + +If the animation's [`duration`](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#duration) is set to `0`, `overallProgress` will return `1`. + +## Examples + +### Displaying a percentage progress + +This demo uses `overallProgress` to create a "percentage progress" readout, which is displayed to the screen while an animation runs. + +### HTML + +The HTML contains a {{htmlelement("button")}} to press to start the animation, a {{htmlelement("p")}} element in which to display the percentage progress, and a {{htmlelement("div")}} that will be animated. + +```html + +

Progress: 0%

+
+``` + +The demo's CSS provides some rudimentary styling, which is not important for understanding how the JavaScript works, therefore we have hidden it for brevity. + +```css hidden +* { + box-sizing: border-box; +} + +html { + font-family: Arial, Helvetica, sans-serif; +} + +body { + margin: 0; + width: 500px; + margin: 0 auto; + padding: 20px; +} + +.progress { + font-weight: bold; +} + +.box { + width: 100px; + height: 100px; + border-radius: 40px 20px; + border: 10px solid black; + background: lightseagreen; + margin: 0 auto; +} +``` + +### JavaScript + +In the JavaScript, we start off by grabbing references to the {{htmlelement("button")}}, {{htmlelement("p")}}, and {{htmlelement("div")}} elements. + +We then create: + +- an `animation` variable which will reference the animation, once we've created it +- a [keyframes](/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) array +- an options object containing timing properties. + +```js +const btn = document.querySelector("button"); +const progress = document.querySelector(".progress"); +const box = document.querySelector(".box"); + +let animation; + +const keyframes = [{ rotate: "0deg" }, { rotate: "360deg" }]; + +const timingProps = { + duration: 3000, + iterations: 1, +}; +``` + +Next we add a `"click"` event listener to the `