🏠 back to Observable

resources for browser performance / profiling

Does anyone here have recommended resources for learning how to use the performance tools in various browsers? Does anyone have links to (official or unofficial) documentation of those? They seem a bit under-documented to me, but maybe I’m just not looking in the right place.

Or any specific concrete examples (e.g. screencasts, detailed blog posts) showing someone’s profiling / performance optimization process?

The tools are a bit daunting and I don’t know them very well. Most of the expository material I can find online is more focused on page load speed, DOM performance, etc., rather than Javascript performance per se.

Chrome’s developer tools link to https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/ but that seems to just scratch the surface.

I find it difficult to figure out when making/running benchmarks or looking at the developer tools exactly what level of JIT managed to compile my JS function, what it got compiled into, whether small functions were successfully inlined or not, how many branch mispredictions or CPU cache misses the inner loops were causing, etc.

Sometimes I make a change which seems like it should be obviously faster (e.g. just deleting some code and not changing anything else, or replacing a trig function with a couple of multiplications) and I find that the speed doesn’t change at all, or even regresses, and I’m not sure where I should turn to figure out what’s going on.

1 Like

Here’s an excellent blog post working through optimizing a concrete example, using a bunch of command-line tools for profiling/benchmarking. (Seems to depend on a pretty deep knowledge of JS engine internals though. I doubt I could do the same without a few years of dedicated practice.)

https://mrale.ph/blog/2018/02/03/maybe-you-dont-need-rust-to-speed-up-your-js.html

I like this bit at the bottom:

In the context of languages like JavaScript this at minimum means that tools like profiler should also provide you with a way to inspect individual operations to figure out whether VM specializes them well and it it does not - what is the reason for that.

This sort of introspection should not require building custom versions of the VM with magic flags and then treading through megabytes of undocumented debug output. This sort of tools should be right there, when you open your DevTools window.

2 Likes

Here’s a 2012 video about some “speed traps” in V8 which are innocuous seeming code changes which can dramatically affect performance.

Does anyone know of resources which cover other JS engines or more recent versions of V8?

1 Like