4 ms·

I don't do front end, but I asked my team and they linked me to: https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps

I don't do front end, but I asked my team and they linked me to: https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3 https://medium.com/@paularmstrong/twitter-lite-and-high-perf... https://github.com/markerikson/react-redux-links/blob/master/react-performance.md https://github.com/markerikson/react-redux-links/blob/master... Might be worth going through. Hopefully they're useful.

acemarke 7y ago
Hey, that's my links list! :) Hope that's helpful! While it's probably not 100% relevant, you might also want to glance at some of the things I've done trying to benchmark performance for the React-Redux library itself, including running benchmarks in Puppeteer and capturing metrics like render times and FPS [0]. Now, my experience has been that I have to deliberately crank up the number of components on screen and dispatch absurd numbers of Redux actions a second just to get the FPS to drop below 60FPS, so I'm not sure how much that would be applicable to real-world apps, but at least you can see how I've tried to capture the values. As a general observation, I'd highly encourage folks to use the Profiler that's built into the React DevTools to view render behavior and find components that may be re-rendering when it wasn't necessary [1] [2]. Also, Brian Vaughn has been working on a major rewrite of the React DevTools to both improve internal speed and add new features, and you can play around with it now [3]. Finally, if you _really_ want to get fine-grained, there's a little-known profiling/tracing API that can be used to capture render times in parts of your app [4] [5] [6]. [0] https://github.com/reduxjs/react-redux-benchmarks https://github.com/reduxjs/react-redux-benchmarks [1] https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html https://reactjs.org/blog/2018/09/10/introducing-the-react-pr... [2] https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues/ https://www.netlify.com/blog/2018/08/29/using-the-react-devt... [3] https://github.com/bvaughn/react-devtools-experimental https://github.com/bvaughn/react-devtools-experimental [4] https://github.com/bvaughn/rfcs/blob/profiler/text/0000-profiler.md https://github.com/bvaughn/rfcs/blob/profiler/text/0000-prof... [5] https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16 https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcd... [6] https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977 https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a...
- vnchr 7y ago
  Amazing list! Thanks! Just pinged you on Twitter too. I'll add a note here for anyone interested that I've been looking at performance testing as part of our functional/regression testing strategy. Haven't used it yet, but this Jest library with puppeteer looks promising: https://github.com/jj4th/jest-puppeteer-performance https://github.com/jj4th/jest-puppeteer-performance
- aidos 7y ago
  Even better these days, just use the profiler in Chrome. It’ll show you which components are mounting and rendering. I find that I can isolate troublesome components at a glance now.

acemarke 7y ago

Hey, that's my links list! :) Hope that's helpful! While it's probably not 100% relevant, you might also want to glance at some of the things I've done trying to benchmark performance for the React-Redux library itself, including running benchmarks in Puppeteer and capturing metrics like render times and FPS [0]. Now, my experience has been that I have to deliberately crank up the number of components on screen and dispatch absurd numbers of Redux actions a second just to get the FPS to drop below 60FPS, so I'm not sure how much that would be applicable to real-world apps, but at least you can see how I've tried to capture the values. As a general observation, I'd highly encourage folks to use the Profiler that's built into the React DevTools to view render behavior and find components that may be re-rendering when it wasn't necessary [1] [2]. Also, Brian Vaughn has been working on a major rewrite of the React DevTools to both improve internal speed and add new features, and you can play around with it now [3]. Finally, if you _really_ want to get fine-grained, there's a little-known profiling/tracing API that can be used to capture render times in parts of your app [4] [5] [6]. [0] https://github.com/reduxjs/react-redux-benchmarks https://github.com/reduxjs/react-redux-benchmarks [1] https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html https://reactjs.org/blog/2018/09/10/introducing-the-react-pr... [2] https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues/ https://www.netlify.com/blog/2018/08/29/using-the-react-devt... [3] https://github.com/bvaughn/react-devtools-experimental https://github.com/bvaughn/react-devtools-experimental [4] https://github.com/bvaughn/rfcs/blob/profiler/text/0000-profiler.md https://github.com/bvaughn/rfcs/blob/profiler/text/0000-prof... [5] https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16 https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcd... [6] https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977 https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a...

vnchr 7y ago
Amazing list! Thanks! Just pinged you on Twitter too. I'll add a note here for anyone interested that I've been looking at performance testing as part of our functional/regression testing strategy. Haven't used it yet, but this Jest library with puppeteer looks promising: https://github.com/jj4th/jest-puppeteer-performance https://github.com/jj4th/jest-puppeteer-performance
aidos 7y ago
Even better these days, just use the profiler in Chrome. It’ll show you which components are mounting and rendering. I find that I can isolate troublesome components at a glance now.