Вопрос по rendering, browser, html, performance – Инструмент для измерения времени рендеринга

6

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

Ваш Ответ

4   ответа
0

траниц:

<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.

PS: это победилоне учитывайте время, необходимое для загрузки связанных ресурсов, таких как внешние файлы .CSS или изображения, если вы неиспользовать mod_expire на них. Может быть, вы тоже хотите подключить document.body.onload, но тогда результат также будет зависеть от вашей скорости соединения и задержки. Havenard
Милый мужчина Я'Я проверю это. Благодарю. Noob
3

YSlow.

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

Я посмотрел на YSlow. Он дает вам общее представление о производительности, времени загрузки и статистике кэша, но ничего не говорит о том, сколько времени потребовалось конкретному элементу для рендеринга, насколько я видел. Я что-то пропустил? Noob
Он только предлагает некоторые элементы DOM для удаления. Я считаю, что фактическое время рендеринга в значительной степени зависит от браузера. Zed
2

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

Yahoo! YSlow

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

Как посмотреть время выполнения элементов на странице с помощью YSlow? Я пытался найти его, можетне могу найти это ... Noob
1

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

Задаватьdom.send_after_paint_to_content к истине.

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

ve set dom.send_after_paint_to_content = true в FF 19.0.2, но нене понимаю никакой зеленой линии ....?! nerdess

Похожие вопросы