Home > Software design >  Why chrome Devtools performance recording doesn't show some invoked functions
Why chrome Devtools performance recording doesn't show some invoked functions

Time:02-02

The following code may not be suitable for the real world, but it shows this problem well. if you run this code, 123456789 will be printed correctly in the output but you can't find all the corresponding logger function of 1-9 in Chrome Devtools performance recording. I also enabled the "advanced print instrumentation" option, but it didn't make a difference.

How can I make sure that all functions executed in this operation will be displayed?

function logger1() {
    for (var n = 0; n < 1e4; n  ) {}
    console.log(1)
}
function logger2() {
    for (var n = 0; n < 1e4; n  ) {}
    console.log(2)
}
function logger3() {
    for (var n = 0; n < 1e4; n  ) {}
    console.log(3)
}
function logger4() {
    for (var n = 0; n < 1e4; n  ) {}
    console.log(4)
}
function logger5() {
    for (var n = 0; n < 1e4; n  ) {}
    console.log(5)
}
function logger6() {
    for (var n = 0; n < 1e4; n  ) {}
    console.log(6)
}
function logger7() {
    for (var n = 0; n < 1e4; n  ) {}
    console.log(7)
}
function logger8() {
    for (var n = 0; n < 1e4; n  ) {}
    console.log(8)
}
function logger9() {
    for (var n = 0; n < 1e4; n  ) {}
    console.log(9)
}
function logger10() {
    for (var n = 0; n < 1e4; n  ) {}
    console.log(10)
}

function myCode() {
    const afn = new Promise(function promiseCallback(rs) {
        logger1()
        setTimeout(function timeOutCallBack() {
            logger6()
            rs("afn done")
            logger7()
        }, 1000)
        logger2()
    })

    async function myFm() {
        logger4()
        await afn
        logger8()
    }

    logger3()
    myFm()
        .then(function thenCallback() {
            logger9()
        })
        .catch(function catchCallback(e) {
            logger10()
            console.error(e)
        })
    logger5()
}

setTimeout(myCode, 1000)

CodePudding user response:

Profiling is based on sampling: with a certain frequency (I believe every 0.1ms, but I'm not entirely sure), the current call stack is sampled. Functions that run long enough or often enough have a very high statistical probability of being encountered by these samples, with a frequency that correlates with the amount of time being spent in them. Very short-running functions might not be caught by any sample.

To put that into practical terms: for a toy example, to make sure all functions show up on the profile, make them run longer.
For real-world situations, if a function isn't showing up on the profile, then it ran so quickly that it's not a performance bottleneck worth worrying about. The profile will show you any function that consumed significant amounts of time.

  • Related