From the course: Vanilla JavaScript: Web Performance Optimization APIs

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Understand frame rate execution

Understand frame rate execution - JavaScript Tutorial

From the course: Vanilla JavaScript: Web Performance Optimization APIs

Start my 1-month free trial

Understand frame rate execution

- [Narrator] To improve responsiveness of our app, we need to understand frames. So the browser is rendering frames all the time. We want to achieve 60 frames per second for better performance, unless we are doing VR, virtual reality or augmented reality. In those cases, we might want more frames per second, but on a normal screen, 60 frames per second is enough. And to achieve 60 frames per second, we need to understand how the system works. At least, at a high level overview and then use a new approach. So, this is a simplified version of the architecture of how the browser is rendering frames. Each frame, so 60 frames per second. So this diagram will try to be executed 60 times per second. So a frame starts. In that case, the browser will start processing your input demands. So if you have an on click handler, on scroll, or something like that, after you do some changes, there might be some new HTML that needs to be parsed. The browser will calculate the styles, the layout, new CSS…

Contents