I am analysing web page performance. Web page contains one handler for "pointermove" event to change "transform: translate(x,y)" of the HTMLElement (with about 10 DOM descendents in total).
In Chrome browser, in specific conditions, "pointermove" is not handled in very performant way -- during "pointermove" there occurs delays and "choppy" changes of transform attribute.
On the contrary, in Firefox everything is performant (in these specific conditions).
In performance analysis in Chrome, I detected long "task"s during "pointermove". It says that web page JS functions (and rendering) took about 1 ms, but "System (self)" took 128 ms.
Summary tab:
Task
- Total Time: 129.76 ms
- Self Time: 128.19 ms
Bottom-up tab:
- 0.6 ms 37.5 % Update Layer Tree
- 0.3 ms 19.9 % Composite Layers
- 0.2 ms 14.8 % Hit Test
- 0.2 ms 13.8 % Recalculate Style
There is no explanation what task is doing and what is it? What is "System (self)" and why it took so much time? How to resolve such "choppy" behavior?
I expect performant handling of "pointermove" event, like it is in Firefox.
In Chrome, "pointermove" is handled with some long running "System (self) task", which causes bad handling and choppy feeling (delays).
Snippet / JSFiddle
code is here ↘
