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