VIEW THIS AS

Auto mode follows the Route Engine until you choose a viewpoint.

YOU ARE HERE

ROUTE CHECK

CONNECTED TO

WHAT NEXT

Use the canonical route for this room, or HELP if you are unsure.

The Gold Standard of Websites | Separating Animation Frame Timestamps from Callback Execution Time

Two animation callbacks receive the same timestamp, yet a clock sampled at the start of the second callback reads later than it did in the first. Nothing requires the callbacks to have started together. The supplied timestamp and the later clock samples describe different observations.

The short answer is that requestAnimationFrame supplies a timestamp associated with the animation-frame processing. In a run of callbacks for one target, the algorithm passes the same timestamp to the callbacks in that run. Calling performance.now inside a callback samples the current high-resolution time at that later call. Use the frame timestamp for a consistent animation time and explicit entry and exit samples for the execution interval you want to measure.

We will follow an original pair of moving markers through a shared frame timestamp, unequal callback starts, variable refresh intervals and a pause. The times are stipulated paper observations. The guide explains current platform contracts and useful instrumentation; it does not claim a native browser or device performance test.

This specialist guide belongs to the Websites root. It also connects to The Gold Standard of Education | Learning That Transfers into Life and the How X Works hub. The worked cases are original teaching examples; their numbers are stipulated so that the reasoning can be checked.

eduKateSG · Websites

Find your next learning step

Keep supplied animation time, current-time samples and model progression separate. Work two callbacks, motion rates, pauses, shared state and honest performance measurements.

ROUTE 1 · CHAPTERS 1–3

Identify the time observations

Read the callback argument and measure a region with its own endpoints.

ROUTE 2 · CHAPTERS 4–6

Animate with a consistent clock

Align markers, distinguish elapsed time from callback counts and vary frame intervals.

ROUTE 3 · CHAPTERS 7–9

Own the animation lifecycle

Choose the origin, define pause behaviour and manage callback requests.

ROUTE 4 · CHAPTERS 10–12

Audit what the evidence proves

Separate timing gaps, rendering, geometry and actual browser observations.

ROUTE 5 · CHAPTERS 13–14

Transfer and explain

Change speed and timings, then report the bounded result.

Full chapter contents · Websites subject guide

Chapter contents

Identify the time observations · Chapters 1–3

1. Name the three times before subtracting them

2. Follow the supplied timestamp through one callback run

3. Measure callback duration with its own endpoints

Animate with a consistent clock · Chapters 4–6

4. Give two markers one animation time

5. Separate elapsed-time motion from callback-count motion

6. Do not promise a fixed frame interval

Own the animation lifecycle · Chapters 7–9

7. Choose the animation origin deliberately

8. Handle a pause without hiding the policy choice

9. Remember that each request schedules one callback

Audit what the evidence proves · Chapters 10–12

10. Do not call the frame-to-entry gap a remaining budget

11. Separate frame scheduling from layout and paint

12. Design observations that can distinguish the clocks

Transfer and explain · Chapters 13–14

13. Transfer the calculation to a changed motion

14. Explain the observation with its proper scope

CHAPTER 1 OF 14 · Identify the time observations

1. Name the three times before subtracting them

Back to contents

Imagine two panels on a learning website. Panel A draws a moving marker on a diagram. Panel B draws a second marker that should remain aligned with the same conceptual motion. They use separate callbacks but the same intended speed and starting point.

For one callback-processing run, call the supplied frame timestamp T. Call a performance.now sample at entry E, and another sample after the measured work X. These names keep a frame-related observation separate from current-time observations taken while JavaScript executes.

The interval X minus E can describe the elapsed duration between those two instrumented points in the relevant clock. E minus T describes a different gap between a later sample and the supplied frame time. It is not automatically the duration of the callback, because that callback's measured work has only just begun at E.

Likewise T from one run minus T from the next is about spacing between supplied animation times. It is not the execution duration of either callback. A website can have short callback work while receiving widely separated animation opportunities, or expensive work within a run whose supplied timestamp remains unchanged for multiple callbacks.

Write all samples with their clock context, unit and observation point. Milliseconds from the same relevant time basis are not automatically interchangeable meanings. A label such as time hides whether the number was supplied by the platform, sampled at entry or sampled after a calculation.

For the central exercise, both panels intend 120 CSS pixels per second of motion from a shared animation origin. The goal is not to predict hardware presentation with one timestamp. It is to give both panels a consistent mathematical animation position while measuring their actual JavaScript work separately.

Contents · Next chapter

CHAPTER 2 OF 14 · Identify the time observations

2. Follow the supplied timestamp through one callback run

Back to contents

The HTML algorithm that runs animation-frame callbacks receives a timestamp argument. It obtains the current set of callback handles and invokes the eligible callbacks using that timestamp. It does not obtain a fresh frame timestamp before every callback merely because earlier callbacks took time to execute.

Use T equal to 1,000 milliseconds for a stipulated run. Callback A begins later and samples E_A equal to 1,001. It performs measured work until X_A equal to 1,009. Callback B then samples E_B equal to 1,010 and finishes its measured interval at X_B equal to 1,011.

Both callbacks receive T equal to 1,000 in this example. A's measured entry-to-exit interval is eight milliseconds. B's is one millisecond. Their matching supplied arguments do not say their execution intervals were equal or that either interval lasted zero.

The one-millisecond gap between A's exit and B's entry is stipulated as an unclassified interval in this paper record. Do not automatically assign it to one particular browser subsystem. Other work and observation placement can matter, and a final pair of timestamps alone cannot prove the full internal decomposition.

The changed-context check makes A's work shorter while holding the stipulated T fixed. B can then begin earlier in current time even though it still receives the same T for that run. This is a straightforward way to see that the supplied argument and callback-entry sample are not the same quantity.

This explanation is scoped to the callbacks in the stated target's processing run. Do not turn it into a promise that arbitrary callbacks in every document, worker, origin or later rendering opportunity all receive one universal timestamp. The relevant target, time basis and run remain part of the claim.

Contents · Previous chapter · Next chapter

CHAPTER 3 OF 14 · Identify the time observations

3. Measure callback duration with its own endpoints

Back to contents

If the engineering question is how long a calculation takes, place one current-time sample immediately before that calculation and another immediately after it. Subtract those samples under the same relevant clock. Keep the measured region explicit, because moving either sample changes what work is included.

In the central record, A's measured region begins at 1,001 and ends at 1,009, giving eight milliseconds. Subtracting its supplied T of 1,000 from X_A would give nine milliseconds. That larger number includes the gap before A's chosen entry sample and therefore answers a different question.

For B, X_B minus E_B is one millisecond. X_B minus T is eleven milliseconds. Reporting the latter as B's own execution cost would blame B for time that preceded its entry observation. A performance diagnosis based on that label could optimise the wrong callback.

Sampling itself and the instrumentation around the calculation can add overhead or alter the environment being measured. The result is an observation under that instrumented setup. Use enough care for the actual engineering decision without pretending a pair of clock reads reveals the complete browser rendering pipeline.

A changed test moves logging outside the measured region. Its entry-to-exit interval can fall while total work triggered by the callback remains larger. That is not a contradiction. The measurement boundary changed what the number includes. Keep both the metric's definition and the code revision beside a comparison.

Do not use the equality of the two supplied frame arguments as a duration test. They were passed as a common animation time for a run, not sampled around the individual work. The correct duration needs endpoints that bracket the work being discussed.

Contents · Previous chapter · Next chapter

CHAPTER 4 OF 14 · Animate with a consistent clock

4. Give two markers one animation time

Back to contents

Set the shared motion origin to 900 milliseconds. At supplied frame time T equal to 1,000, the elapsed animation time is 100 milliseconds, or 0.1 seconds. At 120 CSS pixels per second, each marker's intended displacement is twelve CSS pixels.

Both panels can compute that position from the same T and origin. Although callback B begins later, it still represents the same animation time in this run. That consistency is useful when separate parts of an interface should depict one shared motion rather than each displaying its own slightly later observation.

Now let B use its entry sample of 1,010 instead. Its elapsed value becomes 110 milliseconds, producing 13.2 CSS pixels. A still uses the frame timestamp and draws twelve. The 1.2-pixel mismatch arises from mixing the intended time conventions, not from differing speeds or starting coordinates.

It is possible to design a system that deliberately uses current time for a different purpose. The requirement is to say so and keep the components consistent with that policy. A current-time estimate is not intrinsically wrong, but it should not be silently substituted into an animation designed around a shared frame argument.

Change the velocity to sixty CSS pixels per second while keeping the ten-millisecond time difference. The mismatch becomes 0.6 CSS pixels. That smaller error does not make the conventions identical. At another velocity or scale the same hidden difference may become visible again.

The practical lesson is to pass a shared animation time into cooperating render functions when they are meant to depict the same state. Let those functions sample execution time separately if profiling is needed. One variable does not need to carry both meanings.

A second bug can appear even when both callbacks correctly use T. Suppose they both update one shared previous-frame variable as though each were the sole animation loop. At an earlier run the shared previous value was 1,000. In the next stipulated run T is 1,020. A reads a twenty-millisecond delta, advances its model and writes previous equal to 1,020. B then reads the same T but subtracts the value A has just stored, obtaining zero.

The unequal motion in that case comes from mutable integration bookkeeping, not from different frame timestamps. Changing B to performance.now would obscure the ownership problem rather than solve it. The application has to decide which component owns advancement of the shared model and which components merely render that state.

One design advances the common model once for the frame time and gives both renderers the resulting state. Another gives genuinely independent animations their own previous-time records under a consistent time policy. These are application architectures, not guarantees automatically supplied by registering two callbacks.

For the constant-speed formula used here, computing position directly from T minus a stable origin avoids that particular shared-previous-state update. A stateful simulation may still need an explicit once-per-model-step rule. The important check is whether two callbacks are unintentionally consuming and rewriting the same timing history. Equal supplied arguments can coexist with different results because the application state changed between calculations.

Contents · Previous chapter · Next chapter

CHAPTER 5 OF 14 · Animate with a consistent clock

5. Separate elapsed-time motion from callback-count motion

Back to contents

A common beginner animation advances the marker by a fixed number of pixels every time its callback runs. That makes speed depend on how often callbacks arrive. A display or workload that gives more callbacks per second can produce a faster animation even when the intended physical rate was unchanged.

At two CSS pixels per callback, sixty callbacks per second would represent 120 CSS pixels per second under that stipulated regular schedule. At 120 callbacks per second, the same increment represents 240 CSS pixels per second. The identical code has doubled the rate because it counted callbacks instead of elapsed animation time.

An elapsed-time formula computes position from the desired rate and the difference between the current animation timestamp and a defined origin. The original twelve-pixel displacement follows from 120 times 0.1, not from an assumption that exactly six callbacks happened during those hundred milliseconds.

This also makes skipped opportunities easier to reason about for a simple time-based visual. If one callback is delayed, the next position can still be derived from the elapsed animation time. That does not prove every simulation should jump directly to that position; collision systems and other stateful models may need a separate integration policy.

Keep CSS pixels distinct from device pixels. A displacement in CSS coordinates is not automatically the same number of physical display pixels. Scaling, transforms and canvas backing-store choices have their own contracts. The time calculation should state the coordinate unit it is meant to update.

For a changed-context check, keep the desired rate fixed and alter the stipulated callback spacing. Predict the position at the same elapsed time under both schedules. A correctly applied elapsed-time formula gives the same intended state, while a fixed-per-callback increment can differ because the number of invocations differed.

Contents · Previous chapter · Next chapter

CHAPTER 6 OF 14 · Animate with a consistent clock

6. Do not promise a fixed frame interval

Back to contents

Requesting an animation frame is not a guarantee that callbacks arrive every 16.67 milliseconds. Devices, refresh behaviour, document lifecycle, workload and the platform's rendering opportunities can affect the actual sequence. Use the received timing evidence rather than building correctness around one assumed interval.

For a paper schedule, suppose frame timestamps are 1,000, 1,016.667 and 1,033.333 milliseconds. A simple elapsed-time animation can use those differences directly. Another schedule might provide 1,000, 1,008.333 and 1,016.667. Both are stipulated examples, not claims that every device follows either exact pattern.

At the shared 900-millisecond origin and 120-pixel-per-second rate, time 1,016.667 corresponds to approximately fourteen CSS pixels. The rounding follows the displayed teaching timestamp. Carry enough precision for the intended calculation and do not present rounded inputs as an exact measurement of hardware refresh rate.

If a later observation jumps to 1,080, the elapsed-time formula reflects eighty milliseconds since the 1,000 observation. A callback-count implementation that advanced only once could lag substantially. The correct response depends on whether the product wants a real-time visual position, a paused visual or another explicit progression policy.

The interval between supplied times can be useful diagnostic evidence. It is still not automatically the time the user's display spent presenting a particular picture. JavaScript callback processing, rendering and physical presentation are related stages with different observation mechanisms.

The useful test varies the timestamps deliberately in a pure calculation. A function that derives the intended marker position can be checked without claiming native rendering performance. Then a browser-specific observation can separately examine how the actual page receives callbacks and presents its state.

Contents · Previous chapter · Next chapter

CHAPTER 7 OF 14 · Own the animation lifecycle

7. Choose the animation origin deliberately

Back to contents

Where does elapsed animation time begin? Starting from a clock sampled before requesting the first callback is one possible policy. Starting from the first supplied frame timestamp is another. They can produce different first-frame positions if the first callback arrives after a delay.

For a deliberate start-on-first-frame policy, store the first callback's timestamp as the origin. The first calculated displacement is zero. Later displacements use subsequent supplied timestamps minus that stored value. This avoids treating time spent waiting before the first observation as though it had already advanced the visible animation.

For a real-time event that began earlier, an external origin may be appropriate, but it must be expressed in a compatible time basis. Do not subtract a civil wall-clock number from a frame-relative number just because both are labelled milliseconds. Their origins and meanings can be different.

In a paper comparison, request the first callback when the compatible current-time record reads 900, and let its supplied animation timestamp be 1,000. An origin of 900 gives twelve pixels immediately at the chosen rate. An origin of 1,000 gives zero. Neither arithmetic result settles which policy the product wanted.

Write the policy beside the state: begin visibly on the first received animation frame, or remain aligned with an event that began at the defined earlier instant. That sentence helps a maintainer preserve behaviour when the page's startup workload changes.

The origin should also be associated with the correct animation instance. Reusing an old origin after restarting a component can make a new marker appear far along its path. The timestamp itself has not become wrong; the application paired it with the wrong instance history.

Contents · Previous chapter · Next chapter

CHAPTER 8 OF 14 · Own the animation lifecycle

8. Handle a pause without hiding the policy choice

Back to contents

Suppose a visual receives a timestamp at 2,000 and its next relevant callback arrives at 3,000. The one-second gap is material to a time-based calculation. The application must decide whether its animation should catch up, remain paused or progress under a bounded model step.

For a simple diagram intended to reflect elapsed animation time, computing directly from the defined origin can move the marker to its later intended position. For a reading exercise intended to pause while the reader is away, the application may instead adjust its active-play time under an explicit pause policy.

Neither decision follows automatically from the phrase use requestAnimationFrame. Scheduling the callbacks and defining the application's elapsed-time model are separate responsibilities. If the author clamps a delta, the simulation has deliberately chosen a different progression from the full observed timestamp gap.

For example, clamping a one-second gap to fifty milliseconds limits a model update under the chosen policy. It does not prove only fifty milliseconds elapsed in the observation clock. Keep the raw gap and applied model step separate when logging or diagnosing the result.

Do not describe every hidden tab as the same lifecycle state or promise one browser-wide pause behaviour without checking the relevant platform conditions. The timeout-accounting specialist explains why visibility, eligible waiting and elapsed wall time need separate definitions. Here the direct evidence is the sequence of supplied timestamps the application actually received.

The changed-context test keeps the gap but changes the product requirement. A stopwatch-like visual may need to catch up. A step-by-step educational demonstration may need to remain where the learner left it. The same timestamp record can support different correct interface policies because the intended experience differs.

Contents · Previous chapter · Next chapter

CHAPTER 9 OF 14 · Own the animation lifecycle

9. Remember that each request schedules one callback

Back to contents

An animation-frame request registers a callback and returns a handle. The callback is removed from the pending map as it is processed. A continuing animation normally requests another callback deliberately. One request does not itself promise an endless sequence of invocations.

The processing algorithm obtains a set of callback handles for its run. A request made while a callback is executing is not automatically inserted into that already obtained set. This is part of why a self-scheduling animation advances through successive processing opportunities instead of recursively executing every new request immediately within the same run.

For the two-panel exercise, distinguish the handle used to cancel a pending callback from the timestamp passed into a callback that actually runs. They are different values with different purposes. Treating a request handle as elapsed milliseconds can generate plausible-looking but meaningless arithmetic.

Cancellation also has a timing boundary. Removing a still-pending callback under the applicable map rules is different from interrupting work that is already executing. The application needs a separate current-instance flag or other suitable state if an executing or subsequently scheduled callback must decline to update an obsolete component.

Imagine stopping and restarting panel B while A continues. If B's old callback later runs or has already scheduled another request, an instance check can prevent it from drawing over the new panel's state. The timestamp may be perfectly valid for its processing run while the application callback is no longer relevant.

Do not infer these lifetimes from visible motion alone. A marker that stopped changing could reflect a cancelled request, a callback that no longer reschedules, a state guard or lack of another rendering opportunity. Record the registration and disposition of handles when that is the question, rather than treating a screenshot as a complete scheduling history.

Contents · Previous chapter · Next chapter

CHAPTER 10 OF 14 · Audit what the evidence proves

10. Do not call the frame-to-entry gap a remaining budget

Back to contents

In the central record, B samples current time 1,010 while receiving T equal to 1,000. The ten-millisecond difference can be an observation worth investigating under the stated compatible clock basis. It is not an exposed promise that B has exactly some fixed number of milliseconds left before physical display presentation.

A common shortcut subtracts that gap from an assumed 16.67-millisecond frame allowance and calls the remainder a safe work budget. That combines an unverified fixed interval, a chosen timestamp interpretation and an assumed presentation deadline. The arithmetic alone cannot establish those additional premises.

Even a callback that performs only one millisecond of measured JavaScript work may precede other required browser work. Style, layout, drawing and presentation have their own processing and implementation details. A short callback duration is useful evidence about that measured region, not a certificate that the entire visual update will meet a particular deadline.

Use performance tools appropriate to the target environment when investigating missed frames or long updates. Record what the tool actually measures and how the page was exercised. A supplied timestamp, two current-time samples and a guessed refresh rate do not uniquely reconstruct all the missing stages.

The changed-context case uses a different display refresh schedule. The same callback duration and frame-to-entry gap can have a different relationship to the user's visible experience. That is another reason to separate the metric definition from the product's eventual performance judgement.

A bounded report can say that B's entry sample followed the supplied frame time by the recorded amount and that its measured code region took one millisecond. It can then identify what further evidence is needed about the full update. Avoid converting those observations into an unsupported prediction of exactly when the pixels appeared.

Contents · Previous chapter · Next chapter

CHAPTER 11 OF 14 · Audit what the evidence proves

11. Separate frame scheduling from layout and paint

Back to contents

A callback may update an element's style, but the JavaScript assignment is not itself a direct observation of physical paint. The browser's rendering process determines when the changed state is processed and presented. Keep an application write, a geometry observation and actual presentation evidence distinct.

Suppose panel A writes a transform and then panel B reads geometry. The ordering and any work caused by the read need to be analysed under the relevant layout and geometry contracts. Receiving a shared frame timestamp does not mean both callbacks observed an immutable document snapshot.

Other callbacks and application changes can alter state between observations. The timestamp is a time value supplied to animation callbacks; it is not a frozen copy of the DOM, computed styles or bounding rectangles. If an application needs one shared geometry observation, capture and pass that observation explicitly under its chosen policy.

The saved-bounding-rectangle specialist explains why an earlier rectangle is a non-live measurement rather than current geometry. The ResizeObserver specialist explains another rendering-related boundary: deferring a size-changing write can change delivery-loop behaviour without proving that the component has stopped producing feedback across later updates.

For a changed example, give both markers the same mathematical position but let a surrounding layout change move panel B. The animation-time calculation can be consistent while their screen coordinates differ. That discrepancy needs spatial and layout evidence; it is not repaired by changing the frame timestamp into a later clock sample.

This is useful when a report says the animation is out of sync. Ask whether the disagreement is in model time, coordinate conversion, current geometry or presentation. A single phrase can cover several mechanisms. Naming the first differing intermediate value leads to a smaller and more reliable repair.

Contents · Previous chapter · Next chapter

CHAPTER 12 OF 14 · Audit what the evidence proves

12. Design observations that can distinguish the clocks

Back to contents

A browser investigation can register two callbacks before the relevant processing run. In each, record the supplied argument and a current-time sample at entry. Around any measured work, record an exit sample. Preserve callback identity and the registration sequence in the diagnostic record.

Look for the distinction the algorithm predicts: a shared supplied timestamp within the stated run, with later current-time samples as execution proceeds. Do not manufacture a precise delay by blocking the page merely to obtain a dramatic screenshot. Use the actual workload or a clearly identified controlled fixture appropriate to the test environment.

This guide does not report such a native browser experiment. Its central numbers are stipulated so the subtraction and animation calculations can be checked independently of browser availability. A pure calculation test can verify twelve pixels at the chosen origin and time without claiming to have measured the browser's scheduling.

High-resolution clocks also have precision and security-related processing rules. A sample may be coarsened according to the environment. Avoid treating the last displayed decimal places as a universal accuracy guarantee or inferring sub-millisecond causality that the observations cannot resolve.

Retain the browser version, document context, clock APIs and observation boundaries if a real test is performed. Explain whether numbers came from the callback argument, performance.now or a civil-time source. A log containing three unlabeled columns called now is difficult to audit even if every number was faithfully recorded.

For a useful negative check, deliberately analyse B's exit minus T as though it were B's own duration, then compare with exit minus entry. The discrepancy shows exactly what the mistaken subtraction included. The test teaches the measurement boundary instead of merely declaring one API more accurate than another.

Contents · Previous chapter · Next chapter

CHAPTER 13 OF 14 · Transfer and explain

13. Transfer the calculation to a changed motion

Back to contents

Change the marker speed to eighty CSS pixels per second and the origin to 500 milliseconds. Let the supplied timestamp for a run be 750. The elapsed animation time is a quarter of a second, so each cooperating panel should compute twenty CSS pixels under the shared-time policy.

Suppose B's current-time sample at entry is 762. Using it instead produces 20.96 CSS pixels: eighty multiplied by 0.262 seconds. The 0.96-pixel difference follows from twelve milliseconds of mixed time conventions at this speed. The same distinction from the original case survives changed numbers.

Now let A's measured entry and exit be 751 and 756, while B's are 762 and 764. Their measured regions last five and two milliseconds. The supplied time remains 750 for both in the stipulated run. Ask the learner to identify four values: shared animation position, A duration, B duration and B's frame-to-entry gap.

The answers are twenty pixels, five milliseconds, two milliseconds and twelve milliseconds, with their stated meanings. A solver who reports fourteen milliseconds as B's own duration has subtracted its exit from the wrong starting observation. Correct arithmetic with the wrong endpoints remains an incorrect measurement.

Finally change B's layout position without changing its animation time. Its screen location can move while its model displacement stays twenty. This changed context tests whether the learner can keep time and geometry separate instead of interpreting every visible mismatch as a clock error.

The examples deliberately use simple constant-speed motion. Acceleration, physics integration and discontinuous model events can require further numerical policies. Do not transplant this closed-form position formula into a stateful simulation and claim that timestamp selection alone solves every integration problem.

Contents · Previous chapter · Next chapter

CHAPTER 14 OF 14 · Transfer and explain

14. Explain the observation with its proper scope

Back to contents

A precise explanation says that the platform supplied a common timestamp to the callbacks in the stated run, while current-time samples were taken later as the callbacks executed. It names the chosen animation origin and uses separately bracketed observations for measured work duration.

It does not say the callbacks began simultaneously, that each frame lasts exactly 16.67 milliseconds or that a callback argument records the physical instant the user saw the result. It does not turn a long interval between callbacks into a verdict about one callback's execution cost without the needed endpoints.

When reviewing a repair, check that the shared animation calculation uses one consistent time convention. Check that profiling samples surround the intended region. Check that restart and pause policies keep their own state instead of silently changing the meaning of the clock value.

For an evidence report, preserve the raw argument, entry sample, exit sample, origin, coordinate units and relevant instance identity. Distinguish observed intervals from applied model steps. If an interpretation needs a rendering deadline or presentation measurement that was not observed, leave that conclusion unresolved.

Keep the owner of shared model advancement visible as well, so two render callbacks do not accidentally consume the same previous-time record twice.

The practical transfer is to ask which event produced each time value before subtracting it. Once the supplied animation time, current-time observations and application progression policy have separate names, matching callback arguments and unequal start times no longer look contradictory. They become useful evidence for keeping an animation coherent and its performance explanation honest.

Contents · Previous chapter · Return to Websites

ResizeObserver delivery and animation deferral

ResizeObserver delivery and animation deferral. Keep scheduling a later write separate from convergence and observer-loop diagnostics.

The Gold Standard of Websites | Separating AbortSignal Timeout Accounting from Elapsed Wall Time

The Gold Standard of Websites | Separating AbortSignal Timeout Accounting from Elapsed Wall Time. Compare animation progression with timeout eligible waiting and elapsed wall time.

Saved bounding rectangles and current geometry

Saved bounding rectangles and current geometry. Do not treat a shared animation timestamp as a frozen geometry snapshot.

Frequently asked questions

Do equal timestamps mean two callbacks started together?

No. The same timestamp is supplied during the stated callback-processing run. Each callback can execute later in current time, and an earlier callback can do work before another begins.

Can I measure my callback by subtracting its argument from performance.now?

That subtraction uses the frame-related time as its starting observation. To measure a specific code region, take compatible current-time samples around that region and state what the interval includes.

Is every callback interval about 16.67 milliseconds?

No fixed interval is guaranteed by the request. Use the actual received timestamps and define how the application handles gaps rather than assuming one refresh schedule.

Should an animation always catch up after a pause?

That is a product or model policy. Preserve the raw observed gap separately from any clamped simulation step or adjusted active-play time so the chosen behaviour remains explicit.

Does the frame timestamp freeze the page geometry?

No. It is a time value, not a DOM or layout snapshot. Capture the required geometry separately and check its relevance if other work changes the page before use.

Were these timing values measured in a browser?

No. They are stipulated teaching records checked through arithmetic and current platform algorithms. Browser scheduling and physical presentation claims require observations in the relevant environment.

Authoritative sources and further reading

WHATWG HTML Standard: animation frames. Callback maps, handles and invocation with the supplied timestamp.

WHATWG HTML Standard: event loops. Rendering opportunities and host processing; no fixed presentation deadline is inferred from the paper ledger.

W3C High Resolution Time. Working draft defining time origins, monotonic current-time measurements and precision processing.

Return to the Websites subject guide, The Gold Standard of Education, or the How X Works hub.