AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
![]() In that case, display devices use an algorithm to repeat specific frames to make the frame rate compatible with their refresh rate. The frame rate is an arbitrary number of frames (in a filming system), captured or drawn in a second.įor instance, the standard rate for recording films is 24 fps, even though it's not the maximum refresh rate of a modern TV. Refresh rate is the number of times a display device refreshes an image in one second. The refresh rate is different from the frame rate, though. There are screens with higher refresh rates like 120Hz or 144Hz, but 60Hz is the standard for most display devices. Animated Horse (12 drawings per second) by Janke, Licensed under CC BY-SA 2.5 This article by Paul Bakaus does a great job of explaining it. To the human eyes, any frequency above 12Hz is perceived as motion. The average display device refreshes the screen sixty times per second (60Hz). And we'll get into lots of actions in the end. You'll have a new perspective on how web pages change. Trust me, knowing these theories won't be without a reward! Michael Jordan said, "Keep the fundamentals down, and the level of everything you do will rise." There are many theories to cover here, and I hope don't you mind that. However, the high-level concepts are the same across all browsers. I'll focus on Google Chrome for this writing. In this guide, I'll explain how browsers turn code into pixels and how we can work with them to deliver a delightful user experience. When a page doesn't respond swiftly to user interactions or has jerky movements, something must be off.Īnd it's usually owing to the browser's main thread being so busy that it can't deliver frames on time (more on this below). In the recording below, I'm moving the mouse over the timeframe to replay the text selection: You'll see an overview like the one above.Įven when you select a piece of text, new frames are displayed as you select more letters and lines. Then, scroll the page for a few seconds, and stop the recording. While in the DevTools, go to the Performance panel, and click on the record button. I used Google Chrome DevTools to create the above recording. Generated frames during a few seconds of scrollingĪnd as you can see, each frame was displayed for 16.7ms (60 fps). The image below shows the sequential frames produced and displayed during a few seconds of scrolling. When you scroll through a page, the browser displays off-screen areas of the document as you scroll down (or up). ![]() Of course, a frame stays on the screen if there's no change. These changes could be as simple as adding or removing a element or changing the styles of a button.īased on W3C frame timing guidelines, the web browser has to be able to display sixty frames per second (60 fps). In fact, they are sequential images displayed rapidly to give us a perception of motion or simply reflect a change.Įvery time JavaScript code changes the page, an area in the previous image is invalidated, and the browser draws a new one. Scrolling, pinch zooming, text selection, and even hovering over a button are technically animations and work similarly. We watch various motions every time we're on a web page.Īnd it's not only JavaScript or CSS animations that I'm talking about. What if I told you that web pages were interactive animations played back by your web browser?
0 Comments
Read More
Leave a Reply. |