As React webapps get large and start to contain a lot of complex components, they often do not perform well and manifest low FPS in browser. As a result, engineers add strategies such as memoization (React.memo, shouldComponentUpdate) to avoid unnecessary computation, however they logic is fragile to code changes.<p>Is there a way to automatically test performance (maybe in terms of FPS) of React applications regularly in CI pipelines? Any tools for this out there?
For frontend performance: record the frame rate (via requestAnimationFrame, look at simple frame rate counters), memory, count of DOM nodes on the page during each of your integration tests as a good start. You can get a lot of this via window.performance and memory info you need to pass an extra flag into chrome headless.<p>It’s also useful to instrument this in your production environment (called real user metrics) for some % of user sessions and combine it with more synthetic tests.<p>The backend is of course really easy, just measure request times (min/avg/max) and time to first byte.<p>Edit: Don’t know why I’m being downvoted for this answer? Lol
I don't do front end, but I asked my team and they linked me to:<p><a href="https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3" rel="nofollow">https://medium.com/@paularmstrong/twitter-lite-and-high-perf...</a><p><a href="https://github.com/markerikson/react-redux-links/blob/master/react-performance.md" rel="nofollow">https://github.com/markerikson/react-redux-links/blob/master...</a><p>Might be worth going through. Hopefully they're useful.
Before you spend time profiling a performance issue, make sure you're using the production build of React. The development build is significantly slower. It sounds obvious, but I've made the mistake of trying to optimize performance issues that simply didn't exist in production.
At Asana, we actually test performance in production with a A/B test split. We use Interana (but any data aggregator would work) to analyze the results. Trying to measure the regressions in a sandbox did not match our Real User Metrics (RUM). In order for this to work though, you need to develop a strong mental model of React performance so you can optimize it further.
A few ideas:<p>- <a href="https://firebase.google.com/docs/perf-mon/get-started-web" rel="nofollow">https://firebase.google.com/docs/perf-mon/get-started-web</a> (this is a new feature released by Google. Luckily you don't need Firebase to use this. <a href="https://www.youtube.com/watch?v=KYYjdWSrRjI&t" rel="nofollow">https://www.youtube.com/watch?v=KYYjdWSrRjI&t</a> is a good tutorial on wiring your app up)<p>- <a href="https://reactjs.org/docs/perf.html" rel="nofollow">https://reactjs.org/docs/perf.html</a><p>- lighthouse by Google<p>You could just run lighthouse on your app periodically for an in depth audit on your site. That way you wouldn't need to slow down your builds with a test (not sure what's best practice here. Just trying to throw out some basic ideas)
> As React webapps get large and start to contain a lot of complex components, they often do not perform well and manifest low FPS in browser.<p>Is this something you have actually experienced? Can you cite an example of running into this issue? I've built fairly complex UIs with React (tables with nested dropdowns, financial statements with a lot of data points, dynamic charts / graphs, elements with animations, etc. and haven't run into this issue.<p>The only time I've seen people have trouble w/ performance is when they use something like Redux or Apollo on top of React. The problem in those cases of course is Redux or Apollo, not React itself.
WebdriverIO recently got support for Lighthouse, but also the devTools plungin has support for page load.<p>If I were to set this up I'd use devtools to throttle the network down to 3g, and I would actually render the browser in the test.<p><a href="https://github.com/webdriverio/webdriverio/tree/master/packages/wdio-devtools-service/src" rel="nofollow">https://github.com/webdriverio/webdriverio/tree/master/packa...</a>
A few resources I've found useful:<p>- lighthouse (<a href="https://github.com/GoogleChrome/lighthouse" rel="nofollow">https://github.com/GoogleChrome/lighthouse</a>). You can implement this with their Node CLI to automate in your pipeline and output the results somewhere.<p>- calibre (<a href="https://calibreapp.com/" rel="nofollow">https://calibreapp.com/</a>). Gives you nice graphs and snapshots over time.