前端网页性能测试答案

【问题标题】：Front End Web Page Performance Testing前端网页性能测试
【发布时间】：2013-02-11 04:07:14
【问题描述】：

我有兴趣在从服务器返回初始正文后测量和记录我们的页面加载性能。换句话说，一旦浏览器拥有了 HTML，就可以在页面上加载完所有图像、css 和 javascript 并完成渲染和执行第一个 jquery 就绪块。

对此进行性能测试的最佳方法是什么？我读过的大部分内容都倾向于关注服务器响应和数据下载。但是，用户等待的大部分时间都是在此之后。有什么可以自动帮助解决这个问题的吗？

【问题讨论】：

您需要自动化用户活动吗？或者只是测量客户端渲染页面的时间？
“负载测试”与“网页加载时间性能”不一样...只是说，标题令人困惑...
对不起，你是对的。我在想“页面加载”而不是“服务器加载”。

标签： html performance dom rendering performance-testing

【解决方案1】：

Chrome 在开发者工具中有一个内置的分析器。 CTRL+SHIFT+I 在 PC 上或 Cmd+option+J 在 Mac 上。

使用 jQuery，DOM 就绪将在窗口加载之前发生。所以像这样的东西应该告诉你 DOM 负载和资产负载之间的差异：

// When the DOM is loaded
$(function(){
    console.log('Start ' + new Date().getTime());
});

// When all the images are loaded
$(window).load(function(){
    console.log('End ' + new Date().getTime());
});

【讨论】：

注意 JavaScript 时间精度：ejohn.org/blog/accuracy-of-javascript-time
在我看来，任何因获取时间戳本身或等待下一个 15 毫秒队列而丢失或计算错误的时间都可以忽略不计。如果您要进行基准测试以将页面加载时间提高到 100 毫秒以下，那么您永远不会获得投资回报率。
当然可以，但这完全取决于您要分析的具体内容。这就是我指出它的原因。我见过很多这样的案例，人们试图在每次迭代中计时，并想知道为什么他们的数据到处都是。在比较 JavaScript 中的时间时，您只能着眼于更大的图景，或者多次迭代。

【解决方案2】：

Web 性能优化 (WPO) 行业用于监控前端性能的首选工具是 WebPagetest。它为您提供了对网页全部负载的非常详细的分析，包括一个瀑布图，该图向您展示了 Web 浏览器如何加载每个资产以及您可能遇到的问题。您还可以获得关键浏览器事件、幻灯片和视频的屏幕截图。它确实是一个了不起的开源工具，它的首席开发人员受雇于 Google。

http://www.webpagetest.org

WebPagetest 虽然不是一个自动化的解决方案。 SpeedCurve 是一项在 WebPagetest 之上运行的商业服务，用于自动化测试过程并监控您的前端性能。它还将您的网站与竞争对手进行基准比较，并提醒您网站构建存在的问题。免责声明：我是 SpeedCurve 的创造者。

http://speedcurve.com

【讨论】：

你是 SpeedCurve 的创造者吗？

【解决方案3】：

您可以尝试关注真实的用户监控服务，这些服务可以清楚地了解您的用户如何实时体验您的网站或网络应用程序。

【讨论】：

当链接到您自己的网站或内容（或您附属的内容，在本例中为 Atatus）时，您must disclose your affiliation in the answer 以免被视为垃圾邮件。根据 Stack Exchange 政策，在您的用户名中包含与 URL 相同的文本或在您的个人资料中提及它不被视为充分披露。