Чем отличаются панели Network и Performance в Chrome DevTools?

Панели Network и Performance в Chrome DevTools отличаются по назначению и функциям.

Network выводит в виде таблицы все запросы, которыми обмениваются браузер и сервер. skillbox.ru Здесь можно узнать, какие ресурсы были загружены, сколько времени заняла их загрузка, какие данные отправлялись и возвращались с сервера, есть ли ошибки в запросах. productstar.ru Как правило, эту вкладку используют для оптимизации скорости загрузки страницы и мониторинга выполняемых запросов. blog.skillfactory.ru

Performance позволяет анализировать производительность страницы во время её работы. skillbox.ru С её помощью можно понять, какие процессы занимают больше всего времени, что перегружает процессор и почему пользовательский интерфейс может тормозить. productstar.ru На графике можно увидеть, где происходят задержки, и выявить, какие процессы, например, сложные анимации или медленные функции, замедляют работу сайта. productstar.ru

Таким образом, Network фокусируется на процессе загрузки страницы, а Performance — на работе страницы после загрузки.