New react-addons-perf marks for easier React debugging

Hi all, just a quick note that we now have really nice react-addons-perf (ReactPerf) marks when running in dev mode, making it way easier to figure out which components are costing the most in terms of render performance: Add improved performance marks for development mode by nolanlawson · Pull Request #3297 · tootsuite/mastodon · GitHub

I also added Webpack perf marks so that we can see which modules take longest to bootstrap. These marks are a W3C standard and show up both in Chrome DevTools and Edge F12, so as a perf junkie these are basically just :heart: to me.

One of the coolest feaures of ReactPerf is printWasted() which shows how much time is wasted by re-rendering components that don’t need to be re-rendered: Attach ReactPerf to window for easier debugging by nolanlawson · Pull Request #3318 · tootsuite/mastodon · GitHub

I used this to improve timestamp rendering: [Perf] Implement shouldComponentUpdate for relative_timestamp by nolanlawson · Pull Request #3320 · tootsuite/mastodon · GitHub

As well as statuses and the action bar: Improve shouldComponentUpdate for status and status_action_bar by nolanlawson · Pull Request #3323 · tootsuite/mastodon · GitHub

In the next few days I’m going to focus further on improving scroll performance. Sorin’s PR (Lazy load toots using IntersectionObserver by sorin-davidoi · Pull Request #3191 · tootsuite/mastodon · GitHub) was an amazing start, but I think there are still wins we can find in reducing DOM nodes, efficiently un-rendering offscreen components, optimizing memory usage, etc. I’m already seeing some issues with Edge and Firefox on https://malfunctioning.technology, so I have some leads to follow.

3 Likes