Я анализирую производительность веб-страницы. Веб-страница содержит один обработчик для события «pointermove» для изменения «transform: translate (x, y)» HTMLElement (всего около 10 потомков DOM).
В браузере Chrome, в определенных условиях »pointermove "не обрабатывается очень быстрым способом - во время" pointermove "происходят задержки и" прерывистые "изменения атрибута transform.
Наоборот, в Firefox все работает (в этих конкретных условиях).
В анализе производительности в Chrome я обнаружил длинные «задачи» во время «движения указателя». В нем говорится, что JS-функции веб-страницы (и рендеринг) занимали около 1 мс, а «System (self)» - 128 мс.
Сводная вкладка:
Задача
- Общее время: 129,76 мс
- Собственное время: 128,19 мс
Вверху вкладка:
- 0,6 мс 37,5% Обновление дерева слоев
- 0,3 мс 19,9% составных слоев
- 0,2 мс 14,8% тест на попадание
- 0,2 мс 13,8% пересчитать стиль
Нет объяснения, что такое задачаделать и что это? Что такое «Система (Я)» и почему это заняло так много времени? Как устранить такое «прерывистое» поведение?
Я ожидаю производительную обработку события «pointermove», как это происходит в Firefox.
В Chrome «pointermove» обрабатывается с некоторой длительной работой "Системная (самостоятельная) задача », которая вызывает плохую управляемость и прерывистые ощущения (задержки).
Snippet / JSFiddle
code is here ↘
https://jsfiddle.net/ziom1/f8jbyz52/