browser-javascript-profiling
Browser JavaScript Performance Profiling with Chrome DevTools
Use this skill when the subject is JavaScript running in a browser page: page-load cost, interaction latency, rendering jank, long tasks, layout/paint work, or objects retained by a page. The primary reference is the Chrome DevTools Performance features reference.
This is browser-page profiling, not Node.js process profiling. Node.js flags include node --cpu-prof, node --heap-prof, --trace-gc, V8 heap APIs, and server-side tools. Do not use those Node flags as a substitute for recording a page: they profile a Node process and its isolate. A Node .cpuprofile or .heapprofile can be opened in DevTools, but it is not a browser Performance trace and does not include the page's renderer, network, layout, paint, or user interaction. Use the Performance and Memory panels below for a browser page.
Choose the panel for the question
| Question | First workflow | Main evidence |
|---|---|---|
| Why is an interaction or animation janky? | Performance panel, runtime recording | Main-thread tasks, frames, interactions, scripting, style/layout, paint, and user-timing markers |
| Why is initial load slow? | Performance panel, Record and reload | Network request timing, parse/compile, script execution, rendering milestones, and screenshots |
| Which objects remain alive after teardown? | Memory panel, heap snapshots | Snapshot comparison, retained size, dominators, and retainer paths to GC roots |
| What allocates repeatedly during a scenario? | Memory panel, Allocation instrumentation on timeline | Allocation intervals, allocation stacks, and objects that survive later collections |
| Is the issue caused by a slow service or transport? | Performance panel plus Network track/conditions | Request queueing, connection, response, and page work; corroborate with server and field data |