你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
guang152252326

chrome的debug工具Profiles使用方法 1个回复 专栏 @ Javascript

guang152252326 发布于 1 年前

简介

本文介绍下chrome的debug工具Profiles,很多人应该没用过,甚至不知道。

Profiles是什么

Profiles在哪里
如下图

没错,就在我们最长使用的导航里面,大家基本没有用到过吧。

Profiles具体可以干什么

定位性能问题,借助它我们可以

  • 可以借助Profiles定位出比较耗时的函数
  • 查找页面卡顿的原因

使用方法一

我们想查看点击一个按钮后,到展示页面的性能,我们可以
1. 打开工具,如下图,点击start ,然后点击按钮
2. 完整内容展示后,点击stop(注意,中间不要有其他操作,避免干扰),然后就会生成一个性能分析的数据

实战
我们使用一段简单的代码:

var test1 = function () {
    var p = 0;
    for(var i =0;i< 5000000;i ++) {
        p = p + i;
    }
    console.log(p)
}
var test2 = function () {
    var p = 0;
    for(var i =0;i< 1000000;i ++) {
        p = p + i;
    }
    console.log(p)
}
test1();
test2();

下图是生成的报告

使用方法二

使用

console.profile(name)console.profileEnd(name)

参数数是一个字符串,记录这次性能监控的名字

例如上面代码可以修改为

console.profile('test')
var test1 = function () {
    var p = 0;
    for(var i =0;i< 5000000;i ++) {
        p = p + i;
    }
    console.log(p)
}
var test2 = function () {
    var p = 0;
    for(var i =0;i< 1000000;i ++) {
        p = p + i;
    }
    console.log(p)
}
test1();
test2();
console.profileEnd('test')

这样就能可以不适用人肉点击start和stop去记录。

举一个实践中用到的例子

这个例子我也拿过来做过面试题,作为开放式题目:

我们在发出ajax时,打一个点作为开始,我们监听到ajax回来打第二个点作为结束,这两个点的时间是1000ms,但是我们通过network查看网络耗时,是300ms,请问中间700ms去哪里了?

其实这个问题我想了解两层,第一是js是单线程,阻塞;
第二个是如何定位问题,那么如果能借助这个工具分析,我就觉得很厉害了

微信公众号

博客

http://tangguangyao.github.io/

  • shiyue

    文主多发点关于 profiles和timeline的东西,这两块用的人很少,我感觉还是比较重要的

    #1
登录后回复,如无账号,请使用邀请码注册