In the previous article, we talked about how to give users a sense of direct manipulation over interface elements. We have also highlighted the frame rate of 60 fps and an almost identical frame length of 16.7 milliseconds.
As you can see, our concept is built on the frame and its structure.
Why are frames so important in web development?🚀
We have each frame with a limited time of 16.7 milliseconds to perform various calculations, update styles, rewrite layouts, and render all changes onto the screen. However, the complexity of web operations can sometimes overwhelm frames, causing delays and preventing them from completing their tasks on time.
This can result in frames being dropped or "missing," which appears as glitches on the screen. When frames are delayed or lost, the user experience suffers. The picture on the screen becomes jagged and disjointed, causing distraction, irritation, and a lack of visual appeal. Therefore, maintaining a stable frame rate is crucial for delivering a smooth and seamless UX.
What happens behind the scenes when a frame is dropped?👇🏻
This can happen when complex calculations or tasks requiring significant time and resources are performed. Although the reasons for this can vary, delayed frames can inhibit subsequent tasks, eventually resulting in insufficient time for rendering.
So, frames must adhere to a strict structure to achieve smooth and stable animations. If any task exceeds its allocated time interval and overlaps with another, it displaces all the subsequent parts of the frame. Since rendering is one of the last actions performed, it is often the one to be dropped. The delayed frame then displays an outdated state, and the browser has no reason to show it, leading to missing frames and degraded animation quality.
Moreover, browsers require significant processing power to load and analyze data, especially for larger datasets. Some machines may struggle to handle large datasets, leading to lagging due to overload. On the other hand, loading and displaying data within 100 milliseconds by parts-on-demand can ensure smooth workflow and real-time effect.
Now we are closer to the main question!🎉
How to make sure all the frames are in their places and there is no shift in the actions inside?
These recommendations can help you avoid impacting the visual representation. Most of these points we have successfully implemented in our approach.
Firstly, it's essential to keep in mind that browsers have a lot to do but with limited resources. Therefore, all tasks and actions must be prioritized to ensure everything is done on time.
The second piece of advice is to use every millisecond. This means that loading and calculation processing should be performed during the browser's idle states to optimize spare free time.
Thirdly, rendering should be taken into account, and unnecessary redraws should be avoided. Some actions with the DOM or individual attributes of visual elements may require additional changes to styles and layouts, which takes time and breaks the clear sequence of frames.
Fourthly, it's best to avoid resource-intensive tasks, and if these tasks are necessary, they should be divided into smaller subtasks and performed gradually, considering that the browser still needs time to update the screen and perform other tasks. For example, only go through part of the iterations in one execution of the script, and the rest should be performed in subsequent ones to avoid delaying other steps of a frame.
Lastly, when working with large data sets, it's not necessary to load the whole dataset at once into the browser. Instead, the data should be loaded by parts on demand during runtime to ensure optimal performance.
Each of these small tips can significantly impact the final work of the component and the overall user experience. But how to implement them in life? Well, stay tuned for next articles in this series. And don't forget to test the demo and leave us your feedback!
Top comments (0)