如何衡量网页性能?

时间:2014-04-04 16:13:18

标签: performance web

我正在处理单页Web应用程序。现在我们的目标是提高Web应用程序的性能。我有责任改进UI性能。我们的Web应用程序是单页面Web应用程序,我们通过ajax调用从服务器获取动态数据,并在各种java脚本库和框架的帮助下处理该数据并更新DOM。

根据这个背景,首先我想测量当前的性能并找出可以改善性能的瓶颈区域。我更感兴趣的是在脚本,样式等Web资源之后测量性能。我想测量从服务器获取所有资源后向用户呈现和显示内容所需的时间。我想在加载页面后找出瓶颈。

正如我所说,目标是在加载网络资源之前不要打扰,并在加载资源后特别麻烦。我们的主要浏览器是Chrome。

是否有任何工具可以帮助我实现目标?

3 个答案:

答案 0 :(得分:0)

您可以从浏览器的开发人员工具的网络(或网络)标签开始。您可以详细分析是否找到资源以及加载所需的时间。

此外,您可以使用YSlowGoogle PageSpeed等工具进一步了解如何提高应用程序的性能。通过使用New Relic等工具可以进行更深入的分析,这些工具可以根据代码和数据库查询分析您的应用程序。

答案 1 :(得分:0)

绝对可以使用Firebug for Firefox:http://getfirebug.com/。您将能够测量从服务器请求和传递的每个资源的持续时间(样式表,脚本,图像)。

如果您正在寻找更多重要的东西"请务必查看New Relic的产品套件:http://newrelic.com

快速提示:

  • 缩小脚本和样式表
  • 尽可能压缩图像
  • 使用服务器端页面缓存
  • 使用gzip压缩

答案 2 :(得分:0)

您可以使用HTML5导航计时并使用此书签http://66.7percentangel.com/2011/12/breaking-down-onload-event-performance-bookmarklet/这比任何其他工具(如YSlow或Page Speed)更准确,因为此处延迟是由浏览器在完成相应事件(页面加载, DOM准备等等)另一方面,像YSlow这样的工具在JS中使用Date函数来获取当前时间。这是不准确的,因为Javascript运行时具有单线程执行,它为您提供请求到达时的时间,而不是在请求发出时。