Уменьшить рендеринг браузера

Есть ли способ замедлить рендеринг DOM браузера и выполнение JS для разработки, чтобы мы могли видеть, какие части сайта слишком интенсивные JS и могут замедляться на медленных машинах? Может быть, расширение для Chrome/Firefox для Linux/OSX?

Некоторое уточнение:

Это не о подключении или тестировании скорости браузера! Это просто для наших разработчиков, чтобы увидеть, какие части страницы отображаются медленно или "глючные". Например, когда вы используете ajax, и вы загружаете что-то, вы показываете загрузчик, но сразу после загрузки загрузчика также отображается загруженная часть. Мы хотим видеть это в замедленном темпе. Например, когда вы нажимаете SHIFT в OSX при выполнении Expose.

PS. Я нашел некоторые статьи о задержке подключения к Интернету, но этого недостаточно.

ПФС. Загрузка всех в VM не сработала для нас.

PPPS. Использование медленного кода, например, предложенного в Javascript-коде для замедления работы моего браузера, не самый лучший вариант, на мой взгляд.

Ответ 1

Преобразование того, что @z0r сказал в комментариях к ответу:


В Chrome откройте devtools и выберите вкладку Performance performance tab

Убедитесь, что Screenshots отмечен

check screenshots

Нажмите кнопку записи (или нажмите Ctrl + E)

Занимайтесь своей деятельностью

Остановить запись

Наведите курсор на временную шкалу, чтобы увидеть скриншоты экрана по мере изменения ситуации. view captured screenshots

Ответ 2

Используйте шкалу времени или профилировщик в обозревателе браузера. Здесь вы можете увидеть, какие функции снижают скорость.

Ответ 3

Принятый ответ хорош; Я использую и рекомендую Chrome Dev Tools.

В качестве альтернативы Chrome Dev Tools:

Несколько сервисов "анализа эффективности веб-сайтов" предлагают просмотр временных шкал. Запустите поиск в Интернете, и вы найдете различные бесплатные и платные варианты.

Попробуйте webpagetest.org

Это открытый исходный код, высоко ценится и работает в течение многих лет. Он может предлагать другую информацию или доступен по-другому, чем Chrome Dev Tools.

В результатах теста нажмите "Диафильм".