tl; dr

Question

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

简单地说，我的普通访问者在开始使用我网站上的页面之前如何等待日志。从他们点击链接到我的网站，直到网站完成渲染＆amp;准备接受输入。

标准解决方案似乎是使用Javascript来比较从window.onload（）事件中的脚本到脚本的时间。

（参见：http://www.dreamincode.net/code/snippet1908.htm）

这对我来说似乎不是一个非常精确的措施，因为它忽略了解决我的域名所花费的时间。接收足够的HTML内容以开始Javascript解析。

在页面实际完成加载（http://www.howtocreate.co.uk/safaribenchmarks.html）之前，Safari似乎也会触发window.onload。

有什么想法吗？

是否可以通过Javascript获取当前请求的时间？
在所有浏览器中可靠地准备好所有事件后会发生什么事件？

Answer 1

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

google chorme dev工具还有一个时间轴面板，您可以在其中记录事件，这是一个2.5分钟的视频，向您展示Google Chrome中的时间轴如何工作http://www.youtube.com/watch?v=RhaWYQ44WEc

Answer 2

FireBug有一个“网络计时模式”，您可以在其中查看下载构成网页的每个资源所需的时间。

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

Answer 3

Firebug是一个很好的资源，还有大量有关页面加载的信息。此外，带有YSlow的Firebug更进了一步。 YSlow对你的页面运行了一些检查，并根据某些规则对其性能进行评级（你使用的是CDN，是你的CSS和JS压缩等）。我发现对我的网站进行一些重大改进（JS压缩很棒）是非常宝贵的。

Answer 4

尝试Yahoo的YSLOW，它会回答你的问题帖子，但它只适用于FireFox（实际上它是firebug的插件）

Answer 5

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

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

因此，使用JavaScript并不是一个很好的衡量标准，因为有很多因素无法改变。

您可以做的最好的事情是衡量在服务器上生成每个页面的时间 - 可以改进。

毋庸置疑，这将取决于您编写的语言。

Answer 6

可以做的一件事是使用Javascript来获取当客户端事件发生时触发回发到服务器的当前时间。将此值传回服务器端将允许您将其作为您可以比较的初始“触发”时间呈现给客户端。

我认为您可以将脚本内联到文档的末尾，而不是使用onLoad，以便在浏览器呈现脚本的这一部分时立即运行。这将允许您将内联脚本运行时的当前时间与用户发起呼叫时捕获的触发时间进行比较。

但是，正如Seb所提到的，由于您只能可靠地控制加载时的服务器端，因此最好在度量标准中包含服务器页面生成时间。如果您同时拥有这两个指标，则至少可以看到页面生成所花费的总时间，以及取决于客户端可能发生的各种延迟的程度。

Answer 7

我总是发现Pingdom Tools full page test非常有用。它不是代码内的解决方案，但它确实可以让您快速了解页面的加载速度。

Answer 8

伪代码。


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.

Answer 9

我使用的方法是创建一个会话变量（包含在if中以检查它尚未设置）作为我的index.php文件中的第一件事（每个脚本都运行）。然后，我在javaScript中有一个pageLoad事件，它回发到服务器上的另一个脚本，该脚本获取会话可变时间并从当前时间中减去它。这为您提供了访问服务器，处理，响应和呈现的请求所花费的时间。

只需确保在发回的脚本中取消设置会话变量，以便下次加载页面时设置一个新的会话变量（由于我们取消设置，因此不存在）并重新开始。你唯一想做的就是找到ajax请求服务器所花费的时间并减去它，但它应该是毫秒。

Answer 10

•计算您要转移的位数。（此转换器有助于：http://www.matisse.net/bitcalc/）

•估计或确定下载速度（你可以使用这个东西：http://speedtest.net）

•划分

Answer 11

tl; dr

使用无头浏览器测量加载时间。 Website Loading Time是这样做的一个例子。

长版

我遇到了与您同样遇到的挑战，因此我创建了一个副项目来衡量实际加载时间。它使用Node和Nightmare操纵无头（“不可见”）Web浏览器。加载所有资源后，它将报告完全加载页面所花费的毫秒数。

一个对您有用的不错的功能是它可以重复加载网页。因此，您可以加载页面多次，然后取平均值以得到一个不错的整数值。另外，由于此脚本在命令行上运行，因此在不同的计算机上安装并从不同位置获取实际加载时间很简单。（加载时间不仅取决于服务器，还取决于客户端和中介程序）

用法示例：

website-loading-time rinogo$ node website-loading-time.js https://google.com
1657
967
1179
1005
1084
1076
...

https://github.com/rinogo/website-loading-time

披露：我是这个项目的作者。

什么是计算实际（网页）页面加载时间的可靠方法

11 个答案:

tl; dr

长版