I have an Angular 12 application that is like a calendar. It have multiple rows with multiple events inside each row, like on the image below. The green squares are the rows and the blue squares are the events. The left border is day 1, and the right border is day 8 in this scenario. So, if an event is on day 3 I have to place it inside its row accordingly. And I do it by calculating which day is on left border and which day is on right border, convert it into pixels and place it inside the row by css property. Blue squares have position: absolute; left: 123px. The left property value is controlled by angular and it is what puts it in place. Also, the rows can be dragged by a click and drag using mouse cursor, so the visible date range changes accordingly.

The problem is, when I have a lot of events (blue squares) visible, and I drag the rows, the UI is very slow. FPS drops dramatically, it's almost unusable. By using the chrome performance tab to analyze this problem, I found that each mousemove event (yellow rectangle in the image below) was taking around 200ms each, so I improved the code and now each mousemove event is taking only 13.38ms (I forgot to put it in the screenshot). But the whole task that includes the mousemove event itself, Recalculate style, Layout, Update layer tree and Paint is taking 56ms, even though way better than 200ms, 56ms is still a lot. The problem is not in the logic, as we can see it only takes 13ms, and Recalculate style, Layout, Update layer tree and Paint are toghether taking around 75% of the time. Despite my efforts to improve it, I can't see how I can work around the long time the browser takes to convert the app state into visible content on the screen (purple rectangles in the chrome performance analysis). I have no code to show, since by the analysis I don't think it is a code problem, but a styles problem. My guess is that position: absolute; left: 123px properties are slow for the browser to compute, but it is just a guess. And if it is true, I don't know any alternative to it.

Update: Some code that may help: On the get() methods above, the returned values are the correct values that place the events (blue boxes) in the correct place inside its container (just saying).