Инструмент для измерения времени рендеринга - PullRequest
Новая
       11

Инструмент для измерения времени рендеринга

6 голосов
/ 24 августа 2009

Есть ли инструмент для измерения фактического времени рендеринга элемента (ов) на странице? Я не имею в виду время загрузки ресурсов, но фактическое время, которое браузер потратил на визуализацию чего-либо. Я знаю, что это время будет варьироваться в зависимости от факторов на клиентском компьютере, но все равно будет очень полезно знать, какой механизм рендеринга требует времени для загрузки. Я полагаю, что это может быть полезной утилитой, поскольку веб-приложения в настоящее время становятся довольно загруженными для клиентов. Есть мысли?

Ответы [ 4 ]

3 голосов
/ 24 августа 2009

Вы можете проверить YSlow .

Редактировать: Мне кажется, что firebug показывает время рендеринга с синей и красной линией на панели сети.

2 голосов
/ 24 августа 2009

Я бы предложил YSlow.

Он не только измеряет время выполнения элементов на вашей странице, но также анализирует дизайн вашей страницы, чтобы предложить, как можно улучшить производительность. Это один из инструментов, которые они использовали при разработке Stack Overflow.

Yahoo! YSlow

YSlow анализирует веб-страницы и предлагает способы улучшить их производительность на основе набора правил для высокого веб-страницы производительности. YSlow это Дополнение Firefox, интегрированное с Firebug инструмент веб-разработки. YSlow веб-страница оценок на основе одного из трех предопределенный набор правил или пользовательский Набор правил. Он предлагает предложения для улучшение производительности страницы, суммирует компоненты страницы, отображает статистику о странице, и предоставляет инструменты для производительности анализ, в том числе Smush.it ™ и JSLint.

1 голос
/ 19 июля 2012

Firebug для Firefox интегрирован в «Net» -Tab.

Требуется изменение конфигурации Firefox (я сделал это с версией 12.0), введите about:config в адресной строке и затем найдите dom.send_after_paint_to_content

Установите dom.send_after_paint_to_content в true.

MozAfterPaint затем окрашивается в виде маленьких зеленых вертикальных линий на временной шкале загрузки сети в дополнение к синей (DOMContentLoaded) и красной (загрузка) линиям.

0 голосов
/ 24 августа 2009

Я использовал этот скрипт для анализа времени рендеринга некоторых страниц: 

<script language="JavaScript">
<?

    $output = str_replace('=', 'A', base64_encode(file_get_contents('data.txt')));

    echo "\tCode = \"" . substr($output, 0, 512) . "\"";
    $size = strlen($output);
    for ($i = 512; $i < $size; $i += 512)
        echo "\n\t     + \"" . substr($output, $i, 512) . "\"";
    echo ";\n";

?>
    Data = "";
    Dict = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

    j = Code.length -3;
    for (i = 0; i < j; i += 4) {
        Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i    )) << 2) | (Dict.indexOf(Code.charAt(i + 1)) >> 4)) & 0xff);
        Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 1)) << 4) | (Dict.indexOf(Code.charAt(i + 2)) >> 2)) & 0xff);
        Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 2)) << 6) | (Dict.indexOf(Code.charAt(i + 3))     )) & 0xff);
    }

    time_start = (new Date).valueOf()/1000;
    document.write(Data);
    time_elapsed = (new Date).valueOf()/1000 - time_start;

    alert(time_elapsed);

</script>

Часть PHP, часть JavaScript. data.txt - это файл, содержащий HTML для анализа. Проверено на IE и FF.

...