| 538 | } |
| 539 | |
| 540 | export function logYieldTime(startTime: number, endTime: number): void { |
| 541 | if (supportsUserTiming) { |
| 542 | const yieldDuration = endTime - startTime; |
| 543 | if (yieldDuration < 3) { |
| 544 | // Skip sub-millisecond yields. This happens all the time and is not interesting. |
| 545 | return; |
| 546 | } |
| 547 | // Being blocked on CPU is potentially bad so we color it by how long it took. |
| 548 | const color = |
| 549 | yieldDuration < 5 |
| 550 | ? 'primary-light' |
| 551 | : yieldDuration < 10 |
| 552 | ? 'primary' |
| 553 | : yieldDuration < 100 |
| 554 | ? 'primary-dark' |
| 555 | : 'error'; |
| 556 | // This get logged in the components track if we don't commit which leaves them |
| 557 | // hanging by themselves without context. It's a useful indicator for why something |
| 558 | // might be starving this render though. |
| 559 | // TODO: Considering adding these to a queue and only logging them if we commit. |
| 560 | console.timeStamp( |
| 561 | 'Blocked', |
| 562 | startTime, |
| 563 | endTime, |
| 564 | COMPONENTS_TRACK, |
| 565 | undefined, |
| 566 | color, |
| 567 | ); |
| 568 | } |
| 569 | } |
| 570 | |
| 571 | export function logSuspendedYieldTime( |
| 572 | startTime: number, |