Search

View Transitions Break Incremental Rendering

I’m a big fan of View Transitions. Part of what they can do, animating elements across fresh page loads, is a uniquely powerful ability. The performance story, though, is a bit complicated. You might think because you don’t have to reach for a JavaScript framework with Single Page App abilities to do this, it could be a big performance win. That’s a fair take. But it’s also important to know that View Transitions Break Incremental Rendering, as Eric Portis notes.

Consider: how does the browser know which elements are supposed to render across those page loads? Well, it’ll need to fully render the 2nd page to know that, meaning it can’t incrementally render it for us, which means there is technically an increased delay which is not a good performance characteristic.

Good news though. What if the browser has already rendered that 2nd page? That could be the case with the Speculation Rules API we’ve started covering. I also might argue that a site with nice animations between pages might help with the perceived performance.

Need front-end development training?

Frontend Masters logo

Frontend Masters is the best place to grow in your career as a developer. We have courses on all the most important front-end technologies and beyond, from React to CSS, to backend with Node.js and Full Stack.

Leave a Reply

Your email address will not be published. Required fields are marked *

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.