代码之家 › 专栏 › 技术社区 › David Laing

计算实际(Web)页面加载时间的可靠方法是什么

pageload performance javascript

David Laing · 技术社区 · 16 年前

我想知道我的Web应用程序的实际平均页面加载时间。

简单地说,在我的网站上开始使用页面之前,我的普通访问者是如何等待日志的。从单击指向“我的网站”的链接开始,直到网站完成呈现并准备接受输入为止。

标准的解决方案似乎是使用javascript比较从中的脚本到window.onload()事件中的脚本的时间。

(见: http://www.dreamincode.net/code/snippet1908.htm )

对我来说,这似乎不是一个非常实际的度量,因为它忽略了解析域所花费的时间,以及接收足够的HTML内容以开始JavaScriptParsig。

在页面实际完成加载之前,它看起来像safari fires window.onload( http://www.howtocreate.co.uk/safaribenchmarks.html )

有什么想法吗?

是否可以通过javascript获取当前请求的启动时间?
在所有浏览器中的所有内容都可靠就绪之后,会触发什么事件?

10 回复 | 直到 12 年前

zadubz 13 年前

http://www.webpagetest.org/ 是测量加载时间的优秀资源

此外,Google Chorome Dev工具还有一个时间表面板,您可以在其中记录事件, 这是一个2.5分钟的视频,显示了谷歌Chrome的时间线工作原理。 http://www.youtube.com/watch?v=RhaWYQ44WEc

Aaron Digulla 16 年前

FireBug 有一个“网络计时模式”,在这个模式中,您可以看到下载构成您的网页的每个资源所花的时间。

另外,您应该测量服务器准备请求所需的时间。由于不能影响浏览器和网络,因此服务器上的渲染时间应尽可能小。

Milner 16 年前

Firebug是一个很好的资源,它可以提供关于页面加载的其他信息。此外,带有yslow的firebug更进一步。yslow有大量的检查,检查它是否与您的页面相对,并根据某些规则对其性能进行分级(您是否使用了cdn,您的css和js是否已压缩等)。我发现对我的站点进行一些主要的改进(JS压缩是一个很好的改进)是非常有价值的。

user482873 15 年前

试试雅虎的yslow,它会回答你的帖子中的问题,但它只适用于firefox(实际上是firebug的插件)。

Seb 16 年前

计算加载时间的最准确方法是在服务器端:一旦构建了页面,在用户浏览器上显示所需的时间将取决于:

当前网络流量;
用户计算机规格;
他使用的浏览器。

所以,使用JavaScript不是一个很好的方法,因为有很多因素你不能改变。

最好的方法是测量在服务器上生成每个页面所需的时间。- 那个你可以改进。

不用说,这将取决于您使用的是哪种语言。

Jay S 16 年前

可以做的一件事是,当客户端事件发生时,使用javascript获取当前时间,从而触发回服务器的日志。将该值传递回服务器端将允许您将其呈现回客户机,作为您可以比较的初始“触发器”时间。

我相信您可以将脚本放在文档的末尾,这样它就可以在浏览器呈现脚本的那一部分时立即运行,而不是使用onload。这将允许您比较内联脚本运行的当前时间与用户启动调用时捕获的触发时间。

但是,正如SEB所提到的,由于您只能可靠地控制装载时间的服务器端,所以最好在度量中包括服务器页面生成时间。如果您有这两个指标,那么至少可以看到页面生成占用的总时间有多少,以及有多少取决于客户端可能发生的各种延迟。

Philip Morton 16 年前

我总是发现 Pingdom Tools full page test 非常有用。它不是一个代码内解决方案,但它确实能让您很好地了解页面加载的速度(或不快)。

Tracker1 16 年前

伪代码。


server marks start of processing the request.
server sends the output.
    script tag, marks start time.
    rest of html markup.
    client script , with server processing time in ms
    client script with window.load event + server-side time
    client script which sends the total back via an ajax call.

Alex 15 年前

我使用的方法是创建一个会话变量(包装在一个if中以检查它是否还没有被设置)作为index.php文件(每个脚本都会运行)中的第一件事。然后,我在javascript中有一个pageload事件,它将返回到服务器上的另一个脚本,该脚本获取会话可变时间并从当前时间中减去该时间。这将为您提供请求到达服务器、处理、响应和呈现所需的时间。

只需确保您在回发到的脚本中取消设置会话变量,以便下次加载页面时,它会设置一个新的会话变量(因为取消设置而不存在会话变量),然后重新启动。您唯一想做的就是找到Ajax请求服务器所花费的时间,减去这个时间,但应该是毫秒。

starsinmypockets 12 年前

_窆计算出要传输的位数。 (此转换器有助于: http://www.matisse.net/bitcalc/ )

_窆估算或确定下载速度 (你可以用这个东西: http://speedtest.net )

分叉