问前端网页性能测试

EN

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

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

• Atatus
• New Relic
• App Dynamics
• Pingdom

web性能优化行业监控前端性能的首选工具是WebPagetest。它为您提供了对网页全部负载的非常详细的分析，包括一个瀑布图，该图显示了web浏览器如何加载每个资产以及您可能会出现问题的位置。您还可以获得关键浏览器事件、幻灯片和视频的屏幕截图。它真的是一个令人惊叹的开源工具，它的主要开发人员受雇于Google。

http://www.webpagetest.org

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

http://speedcurve.com