Re: [csswg-drafts] [css-view-transitions-2] Allow synchronous snapshots (#9400)

> > The problem with the proposed solution is that snapshotting in itself would become an expensive synchronous operation, so it would delay updating the state and this won't add much value...
> 
> This is true in instances where snapshotting is an expensive operation but compared to render times on an expensive page, it isn't. Like what kind of durations are you seeing or expecting for snapshotting? Because multi-second renders isn't unthinkable and that's work that outside of `startViewTransition` and/or `flushSync` is interruptable.

The time gap we're talking about between `startViewTransition` and its callback is usually <16ms, same as calling `requestAnimationFrame`. changing anything about it is not going to make a dent in a multi-second render.

`flushSync` is indeed uninterruptible, but the `startViewTransition` callback is promise-based, and the `use-view-transition` hook is interruptible as it doesn't rely on `flushSync`.

So I think I might have misunderstood what problem you're trying to solve here that's not already solved by `use-view-transitions`.

Think about it this way.
Let's say a state-swap takes 2s (interruptible), 
out of which rendering (style, layout, paint, rAF callbacks etc) take 10ms.

With `flushSync`:
```js
   document.startViewTransition(() => {
      // after 16ms or less
     flushSync(() => {
        // This is 2s work, becoming blocking due to flushSync.
        updateState();
     });
   });
// Total blocking: 2016ms
```

With async rendering (what `use-view-transitions` does):
```js
   document.startViewTransition(() => {
        // after 16ms or less

        updateState();
        waitForSomeReadyState();
     });
   });
// Total blocking: <16ms
```

With sync snapshotting:
```js
  /* This needs to render, so 10ms */
  document.startViewTransitionSync();
  
  /* Non-blocking */
  updateState();
  document.notifyUpdateComplete();
// Total blocking: 10ms */
```

With preparing work in parallel to waiting for frame:
```js
   startPreparing();
   document.startViewTransition(() => {
        // after 16ms or less
        updateState();
        waitForSomeReadyState();
     });
   });
// Total blocking: maybe 0??
```

So considering that you use something like `use-view-transitions` and not `flushSync`, we're talking about a 0-16ms optimization, which might not be worth it, and the framework has ways to handle it if it is.

-- 
GitHub Notification of comment by noamr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9400#issuecomment-1732279001 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 23 September 2023 10:41:35 UTC