Я работаю над планировщиком gant-ish, используя React .Планировщик состоит из SVG, которые генерируются данными.Данные управляются событиями мыши и бизнес-логикой.
В последнее время производительность стала проблемой (вероятно, из-за плохого кодирования в целом), поэтому я решил профилировать ее, используя Профилировщик Chrome (такая же аномалия возникает во многих других веб-браузерах, см.ниже).
Однако я сразу заметил, что производительность значительно улучшилась , пока я работал с профилировщиком!
Это не имеет большого смысла для меня ввсе, поскольку обычно профилировщики должны снижать производительность.
Вот видео, записанное со скоростью 60 кадров в секунду со счетчиком кадров Chrome с профилированием кода и без него.
КакВы можете увидеть скачок с 9fps без профилировщика до 40fps с запущенным профилировщиком.
У меня есть ощущение, что оно связано с частотой mouseevent , но Google покане сильно помогло (события перемещения мыши - это поток RxJs, на который подписан планировщик).
Есть идеи?
Снимки результатов профилировщика:
Уменьшено
Увеличено 
"BubbleCopy" и один справа сделаны мной.ForceUpdate () вызывается вручную в конце каждого цикла , если перемещение мыши вызывает изменение состояния.
( Я намеренно решил сделать это, используя изменения setState или prop, поскольку яМне нужно менять состояние чаще, чем я требую полного повторного рендеринга и более глубокой структуры объекта.Кроме того, в дальнейшем тестировании я разделил рендеринг, который происходит после заданного периода, я разделил события мыши, чтобы опрашивать положение мыши послеустановленный период, и я изменил эти периоды на совместное / кратное / случайное, но безрезультатно. )
Дополнительные примечания. Все расширения Chrome были отключены в этом тесте.
EDIT: тестирование в различных браузерах:
- Chrome - профилирование повышает производительность
- Edge - профилирование улучшает производительность
- Internet Explorer - Lol.
- Firefox - Профилирование повышает производительность, но базовая производительность в целом выше.
ОБНОВЛЕНИЕ: Проблемы с производительностью были вызваны использованием JSON.parse (JSON.stringify (bubble)) для глубокогоСкопируйте «пузыри».Изменение этой функции на функцию recursiveDeepCopy значительно повысило производительность.
Это не объясняет, почему профилирование кода ускорило процесс, и не объясняет, почему у firefox не было проблем с производительностью, но, надеюсь, кто-то саналогичная проблема в будущем столкнется с подобным исправлением.
Пожалуйста, прокомментируйте, если кто-нибудь когда-нибудь выяснит это.