I am doing some performance tuning in react native. I am timing my expensive function foo() like so.
console.time('foo')
await foo()
console.timeEnd('foo')
Suppose foo is storing data into the local database. Foo has a mixed workload of non-trivial blocking JS code and calls to native threaded non-blocking code. On average foo takes 200ms to execute, this is an acceptable time, if and only if the JS thread is free to respond to user interactions during this time.
This timing method is not sufficient because foo is an asynchronous function and talks to native code. Some of that asynchronous time is blocking the JS thread and some is not. It's very hard to know how much of the 200ms is blocking.
The JS thread could be blocked either because foo contains some JS code or because there will be a serialisation cost between the JS thread and the native code.
How can I measure the amount of time that the JS thread is actually blocked for?
I've been looking into projects like blocked-at but I think this approach is fundamentally flawed because:
- The sample rate will mess with the timings
- You can never effectively measure the blocked time between two lines of code
I've seen react native has a "Perf monitor" which does provide a graph but I need an actual number so that I can compare the performance of foo() to bar()...
Perhaps react native source code has the answer? Perhaps hooking into JSC C++ bindings? Perhaps Xcode instrumentation?