前端网页性能测试

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

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

来源

2013-02-25 chrishomer

你需要自动化的用户活动？或者只是测量客户端的时间来呈现页面？ – Brad 2013-02-25 21:23:40

'负载测试'与'网页加载时间性能'不一样...只是说，标题混乱... – yoosiba 2013-02-26 08:59:25

对不起，您对。我在想“页面加载”而不是“服务器加载”。 – chrishomer 2013-02-27 16:19:14

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

使用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()); 
});

来源

2013-02-25 21:24:03 AlienWebguy

请注意JavaScript时间的准确性：http://ejohn.org/blog/accuracy-of-javascript-time/ – Brad 2013-02-25 21:44:01

在我看来，任何时候从获取时间戳本身或等待到下一个15ms队列的时间丢失或错误计算都是微不足道的。如果你在基准测试的时候提高页面加载时间少于100毫秒，你永远不会获得投资回报。 – AlienWebguy 2013-02-25 22:03:39

当然，但这一切都取决于你想要分析的是什么。这就是我指出的原因。我已经看到很多情况，人们试图在每次迭代中计算一些东西，并想知道他们的数据为什么会遍布整个地方。在JavaScript中比较时间时，您只能查看更大的图片，或者进行多次迭代。 – Brad 2013-02-25 22:20:15

的网络性能优化（WPO）行业的刀具监控前端性能走的是WebPagetest。它可以非常详细地分析网页的全部负载，包括瀑布图，向您显示Web浏览器如何加载每个资源以及哪些地方可能会遇到问题。您还可以获得关键浏览器活动，电影和视频的屏幕截图。它确实是一个了不起的开源工具，它的主要开发人员是Google雇用的。

http://www.webpagetest.org

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

http://speedcurve.com

来源

2013-08-17 09:59:10 zeman

你是SpeedCurve的创造者吗？ – 2014-10-27 23:23:05

你可以尝试以下提供你的用户如何体验您的实时网站或web应用程序的画面清晰真实用户监控服务。

来源

2015-09-29 06:13:48