在Firebug Net标签中报告读取时间 [英] Reading time reported in the Firebug Net tab

问题描述

从Firebug的Net标签中看到这个截图：

http://www.scdi.org/~avernet/try/firefox-times.png

我知道即：

• 1到2之间的时间是我的应用程序生成HTML和数据所用的时间浏览器。


• 3到4之间的时间是在DOMContentLoaded上运行的JavaScript初始化代码花费的时间。

但是2到3的时间呢？那是Firefox用来渲染页面的时间吗？在这种情况下，这是相当重要的（大约1.5秒）。如何优化该部分？

解决方案

2-3之间的时间是浏览器解析和渲染文件的内容之间下载1-2。这包括所有的HTML和任何内联CSS或JavaScript可能。最简单的方法来缩短这一点是1）发送较少的数据浏览器解析2）确保您的HTML / CSS验证和3）注意真正缓慢的CSS规则/表达式。

一般来说，大多数人并不关注浏览器完成呈现页面需要多长时间，而是在客户端渲染的速度有多快。通常称为渐进式渲染，它允许浏览器在整个页面被渲染之前开始显示页面的一部分。其中一个最常见的原因是这种情况不会发生，就是把页面的内容放在一个阻止浏览器渲染的地方，直到它被完全解析。 这篇文章有一些体面的提示如何做到这一点。您可能想看看 YSlow Firefox扩展，它可以给你一些体面的提示如何使您的网站更快。

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?

解决方案

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.

这篇关于在Firebug Net标签中报告读取时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！