The post has been translated automatically. Original language: English
When a website takes a long time to load or the interface starts to "hang", the first suspicion usually falls on the Internet. But sometimes the problem is not the connection speed at all. The page can open quickly, while buttons, animations, and scrolling can be delayed. The reason may be hidden right in the frontend code.
One of the most interesting features of the browser is that JavaScript is executed mostly in one main thread. He is responsible not only for executing the code, but also for many actions related to the interface. If the developer forces the browser to perform too many complex operations in a row, this flow turns out to be busy - and the user literally sees the consequences: clicks are not processed immediately, animations begin to be interrupted, and the page ceases to be smooth.
For example, imagine an online store where every time the mouse moves, a heavy function is launched that recalculates the position of dozens of elements. The action itself may take a fraction of a second. But if it happens dozens of times per second, the delay becomes noticeable.
And here the frontend developer works not only with the appearance. It optimizes JavaScript, reduces the number of unnecessary redraws, loads images and resources correctly, uses lazy loading, and monitors how much work the browser gets.
Interesting fact: to feel the smoothness of the interface, developers focus on about 60 frames per second. This means that the browser has only about 16.7 milliseconds to process a single frame. If the operation takes significantly longer, the user may notice a jerk or delay.
Therefore, a good frontend is not just about beautiful buttons and animations. It's also the ability to make the interface stay fast and responsive, even when a pretty page hides quite complex code.
When a website takes a long time to load or the interface starts to "hang", the first suspicion usually falls on the Internet. But sometimes the problem is not the connection speed at all. The page can open quickly, while buttons, animations, and scrolling can be delayed. The reason may be hidden right in the frontend code.
One of the most interesting features of the browser is that JavaScript is executed mostly in one main thread. He is responsible not only for executing the code, but also for many actions related to the interface. If the developer forces the browser to perform too many complex operations in a row, this flow turns out to be busy - and the user literally sees the consequences: clicks are not processed immediately, animations begin to be interrupted, and the page ceases to be smooth.
For example, imagine an online store where every time the mouse moves, a heavy function is launched that recalculates the position of dozens of elements. The action itself may take a fraction of a second. But if it happens dozens of times per second, the delay becomes noticeable.
And here the frontend developer works not only with the appearance. It optimizes JavaScript, reduces the number of unnecessary redraws, loads images and resources correctly, uses lazy loading, and monitors how much work the browser gets.
Interesting fact: to feel the smoothness of the interface, developers focus on about 60 frames per second. This means that the browser has only about 16.7 milliseconds to process a single frame. If the operation takes significantly longer, the user may notice a jerk or delay.
Therefore, a good frontend is not just about beautiful buttons and animations. It's also the ability to make the interface stay fast and responsive, even when a pretty page hides quite complex code.
Share
