In the development process, we often encounter the frustrating phenomenon of page lags. đź’» đźš«These lags are primarily caused by long tasks hogging the main thread, thereby hindering user interactions.
In the browser, long tasks can arise from various sources such as JavaScript compilation, HTML and CSS parsing, page rendering, or even within the JavaScript code we craft. 🕵️‍♂️ These tasks can lead to delays in page responsiveness and user experience.
Keep your long tasks under 50 ms
Consider controlling the task execution time to about 50 ms. After each task is executed, if it takes more than 50 ms, the remaining tasks are set to asynchronous and placed in the next execution, giving the page time to respond to user operations and update rendering
🤔❓Why 50 milliseconds?
This insight isn’t just a casual observation — it’s rooted in the RAIL model pioneered by Google employees. 🚀
RAIL model
RAIL represents four different aspects of the Web application life cycle: Response , Animation , Idle, and Load . Because users have different performance expectations for each scenario, performance goals are determined based on the scenario and user experience research…
