13

我有兴趣了解我的 web 应用程序的实际平均页面加载时间。

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

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

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

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

看起来 Safari 在页面实际完成加载之前会触发 window.onload ( http://www.howtocreate.co.uk/safaribenchmarks.html )。

有任何想法吗？

是否可以通过 Javascript 获取当前请求的时间？
在所有浏览器上一切就绪后会触发什么事件？

4

11 回答 11

8

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

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

于 2012-04-27T13:51:58.100 回答
3

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

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

于 2009-03-20T14:58:06.013 回答
3

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

于 2009-03-20T15:05:56.197 回答
1

试试雅虎的 YSLOW，它会回答你的问题，但它只适用于 FireFox（实际上它是一个 firebug 插件）

于 2010-10-21T10:44:35.613 回答
0

计算加载时间最准确的方法是在服务器端：一旦页面构建完成，在用户浏览器上显示需要多少时间取决于：

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

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

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

不用说，这将取决于您使用哪种语言进行编码。

于 2009-03-20T14:43:48.090 回答
0

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

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

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

于 2009-03-20T14:50:45.017 回答
0

我一直发现Pingdom Tools 整页测试非常有用。它不是代码内解决方案，但它确实让您对页面加载的速度（或不加载）有一个很好的了解。

于 2009-03-20T14:55:29.967 回答
0

伪代码。


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.
于 2009-03-20T21:33:34.207 回答
0

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

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

于 2010-10-21T11:16:07.560 回答
0

• 计算出您正在传输多少位。（这个转换器有帮助： http: //www.matisse.net/bitcalc/）

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

• 划分

于 2013-09-01T16:29:10.363 回答
0

tl;博士

使用无头浏览器来测量加载时间。这样做的一个例子是网站加载时间。

长版

我遇到了您遇到的相同挑战，因此我创建了一个辅助项目来测量实际加载时间。它使用 Node 和 Nightmare 来操作无头（“不可见”）网络浏览器。加载所有资源后，它会报告完全加载页面所需的毫秒数。

对您有用的一项不错的功能是它会重复加载网页。因此，您可以多次加载页面，然后将这些值平均为一个漂亮的圆形值。此外，由于此脚本在命令行上运行，因此安装在不同的机器上并从不同位置获取实际加载时间是微不足道的。（加载时间不仅取决于服务器，还取决于客户端和中介）

示例用法：

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

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

于 2020-01-29T21:50:31.037 回答