前端网页性能测试

Question

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

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

Answer 1

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

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