Javascript 使用页面子元素测量页面下载时间和呈现时间

我需要测量每个访问者的页面加载时间。我认为最好的方法是为此在页面中注入javascript。但事情有点复杂，因为我需要单独测量页面时间中的每个子请求。向第三方系统（如CDN或谷歌）发送请求的响应时间也需要报告。页面还有许多ajax调用，这些调用在页面加载期间执行。所有这些都应该包括在内，在页面完成事件之后，其他定期的ajax调用不应该包括在内。同时，所有这些测量值都应该发送回服务器，以便用（？XMLHttpRequest）存储。以前有人做过这样的事吗？有什么建议或示例脚本吗

---

谢谢编辑：虽然这只是一个开始，但它并不能解决某些内容是异步加载的问题。例如，我不知道如何测量图像的加载时间。但是，它可以用于AJAX调用。

这是一个你可以做到的方法

此类允许您向计时器传递数据参数，该参数可以是一个字符串，类似于加载的文档当前部分的名称。现在，您只需创建LoadingTimer的实例，并为要跟踪的每个操作调用

.start（“sectionName”）

。如果您想在不立即启动新分区的情况下停止分区，只需调用

.stop

lt = new LoadingTimer();
lt.start("Time before first dialog gets closed.");
alert("Time will be checked when you will close this dialog.");
lt.start("Time before second dialog gets closed.");
alert("Let's do another one!");
lt.stop();

---

显然，您可以添加额外的方法在某个时候将数据传输到服务器，可能是JSON。

（哦，我在此在公共域中发布了这段代码，这并不重要）我认为这可能适用于ajax调用。但是如何测量html元素（如jpg、js、css、png等）的加载。创建一个计时器，在头部顶部的脚本标记中启动它，然后在正文末尾的另一个脚本标记中停止该计时器。是的，但是如果我想单独测量所有jpeg等元素，那么我必须在jpeg代码之前和之后打开脚本标记？浏览器是否按照与html页面中相同的顺序加载它们？或者在加载JPEG之前运行脚本？我认为你的答案是好的，但我想得到更多的信息，请不要误解我。我还了解了现代浏览器中的导航计时API。如果不在整个页面上插入计时器标记，这可以实现吗？你知道吗，我甚至认为这对图像不起作用，因为浏览器以异步方式加载图像，即使它起作用，也会产生非常草率的代码。我不知道怎么做。

lt = new LoadingTimer();
lt.start("Time before first dialog gets closed.");
alert("Time will be checked when you will close this dialog.");
lt.start("Time before second dialog gets closed.");
alert("Let's do another one!");
lt.stop();