Question

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

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

Answer 1

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

Answer 2

您可以尝试使用真实的用户监控服务，这些服务可以清晰地显示用户如何实时体验您的网站或网络应用。

Answer 3

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

http://www.webpagetest.org

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

http://speedcurve.com

前端网页性能测试

3 个答案: