Tool to measure Render time

问题

Is there a tool out there to measure the actual Render time of an element(s) on a page? I don't mean download time of the resources, but the actual time the browser took to render something. I know that this time would vary based on factors on the client machine, but would still be very handy in knowing what the rendering engine takes a while to load. I would imagine this should be a useful utility since web apps are becoming pretty client heavy now. Any thoughts?

回答1:

I've been using this script to analyze rendering time of some pages:

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

Part PHP, part JavaScript. data.txt is the file containing the HTML to analyze. Tested on IE and FF.

回答2:

You can check out YSlow.

Edit: It seems to me that firebug shows the rendering time with a blue and red line in the net panel.

回答3:

I would suggest YSlow.

It not only measures performance times of the elements in your page but it also analyzes your page design to suggest how you can make performance improvements. It is one of the tools they used in the development of Stack Overflow.

Yahoo! YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

回答4:

Firebug for Firefox has it integrated in the "Net"-Tab.

Needs Firefox (I did it with version 12.0) configuration modified, type about:config in address bar and then search for dom.send_after_paint_to_content

Set dom.send_after_paint_to_content to true.

MozAfterPaint is then painted as small green vertical lines in the network loading timeline in addition to the blue (DOMContentLoaded) and red (load) lines.

来源：https://stackoverflow.com/questions/1323449/tool-to-measure-render-time

标签

html

performance

browser

rendering