【问题标题】:Is it possible to obtain the network size of all loaded resources in a web page?是否可以获取网页中所有已加载资源的网络大小?
【发布时间】:2014-03-20 08:40:29
【问题描述】:

为了分析页面加载性能,我需要知道页面上所有资源(html、静态内容)的总网络大小。有没有办法在客户端使用 javascript 做到这一点?

澄清: 数据需要发送到服务器进行分析,所以我需要在 javascript 中访问网络大小。

【问题讨论】:

  • 几乎所有现代浏览器的开发工具都包含这样的东西。你看过一个吗?
  • @Abhishek 您假设 OP 正在使用支持 Firebug 的浏览器。
  • 例如在 chrome 上按 F12 会打开开发者工具。然后单击网络选项卡,它会为您显示一些参考。
  • 数据需要发送到服务器进行分析,所以我需要在javascript中访问这些数据。我会更新问题。
  • 监听 XMLHttpRequests 并更新每个大小计数器怎么样?

标签: javascript webpage performance-testing


【解决方案1】:

正在进行称为 Navigation Timing 的努力来提供这样的东西:

http://www.html5rocks.com/en/tutorials/webperformance/basics/

本文解释了现代浏览器如何实现 API 以更好地访问性能信息。最有趣的部分是关于处理模型的,您也可以在 w3 网站上阅读:

http://www.w3.org/TR/navigation-timing/#processing-model

根据文章,试用 API 的最简单方法是 在浏览器的 JavaScript 控制台中查看window.performance

【讨论】:

  • 您可能应该从那篇文章中添加一些相关的引用。否则,这更像是评论而不是答案。仅链接的答案通常不受欢迎。
  • @JamesDonnelly 一开始是评论,但我打算写更多。
  • 谢谢,Christophe,非常有趣。此 API 可让您更准确地监控时间,但似乎无法提供有关站点资源生成的网络流量的信息。
  • 另一个关于这个主题的好读物:blogs.msdn.com/b/ie/archive/2013/12/12/…
【解决方案2】:

【讨论】:

  • 如果用户想在 IE7 Mobile 上测试性能怎么办。 Firebug 在这种情况下将如何提供帮助?您不能仅仅假设有人正在使用支持 Firebug 的浏览器甚至操作系统。
  • @Abhishek 这是从 2010 年开始的。
  • @ChristopheRoussy 无论是在 2010 年还是 2050 年,它的工作有何不同。如果您偶然阅读它,它会定期更新。请参阅文档。
  • 我更新了问题。 Firebug 很适合调试,但我需要这些数据用于以后的统计分析。
猜你喜欢
  • 2018-08-28
  • 1970-01-01
  • 2018-02-19
  • 2012-10-14
  • 2019-08-17
  • 2016-02-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多