Блог

У меня есть приложение (построенное на React), которое, похоже, вызывает больше накладных расходов — вероятно, обновления DOM — чем следовало бы. Обычно, когда пользователь вводит какие-либо данные, например, один символ, происходит обновление DOM, но реализован отказ, поэтому этого не должно произойти, хотя, возможно, сам отказ проблематичен.

Хотя я мог бы разработать несколько визуальных способов диагностики этого, я подумал, что может быть полезно собирать данные профилирования, в частности, что-то вроде гистограммы или графика обновлений DOM в секунду звучит полезно.

Я не против использовать Firefox или Chrome для профилирования, но я отмечу, что Firefox, похоже, страдает от этой проблемы с производительностью даже сильнее, чем Chrome.

Честно говоря, лучший браузер — Microsoft Edge Dev. Вот ссылка на страницу загрузки. Edge Разработайте кучу дополнительных опций под колесом настроек и включите все дополнительные, которые могут вам понадобиться. Есть 3 варианта, но, как я уже сказал, я предлагаю Dev. У него есть функция (трехмерный вид), которая позволяет вам видеть все элементы на странице и то, как они складываются / взаимодействуют друг с другом, плюс вы можете изменить его на DOM View, если это поможет. Это позволяет вам перемещаться и взаимодействовать с трехмерной моделью, и выше будет показано, что она на самом деле делает. Это отличный способ «увидеть» вашу страницу. Вы также можете загрузить Firefox Developer Edition, в котором тоже есть инструменты для разработки, но не такие, как Edge. Запустите свою программу в браузере Edge, щелкните правой кнопкой мыши и просмотрите страницу, это проще, если вы отключите консоль. Измените настройки в соответствии с вашими потребностями, а затем перейдите на вкладку Профиль. Вы должны иметь возможность запускать его там и получать результаты. Осмотритесь в окне проверки и на вкладке консоли, в которой будут регистрироваться ошибки и подробности, если вы выберете эти параметры, которые могут сообщить вам, есть ли какой-либо запрос, который задерживает работу.