问题
See this screenshot from Firebug's Net tab:
http://www.scdi.org/~avernet/try/firefox-times.png
I know that:
- The time between 1 and 2 is the time taken by my app to generate the HTML and for the data to make its way to the browser.
- The time between 3 and 4 is the time taken by my JavaScript initialization code which runs on DOMContentLoaded.
But what about the time between 2 and 3? Is that what the time Firefox takes to "render" the page? In this case, it is pretty significant (about 1.5 second). How to optimize that part?
回答1:
The time between 2-3 is the browser parsing and rendering the contents of the file downloaded between 1-2. This includes all the HTML and any inline CSS or javascript there may be. The easiest ways to shorten this are 1) send over less data for the browser to parse 2) make sure that your HTML/CSS validates and 3) watch out for really slow CSS rules/expressions.
In general most people don't focus on how long it takes for the browser to completely render the page, but instead how quickly it starts to render on the client side. Generally called progressive rendering, it allows the browser to start displaying parts of the page before the entire page has been rendered. One of the most common reasons what this does not happen is putting the content of the page in a which prevents the browser from rendering it until it is completely parsed. This post has some decent tips on how to do this. You probably want to look at the YSlow Firefox extension, it can give you some decent tips on how to make your website faster.
来源：https://stackoverflow.com/questions/1100167/reading-time-reported-in-the-firebug-net-tab