11–20 of 24 posts
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. It’s also useful to instrument this in your production environment (called real user metrics) f…
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.
Do you have a blog post or something like that about React performance or the mental model you got? It would be an interesting read.
I don't do front end, but I asked my team and they linked me to: https://medium.com/@paularmstrong/twitter-lite-and-high-perf... https://github.com/markerikson/react-redux-links/blob/master... Might be worth going through. Hopefully they're useful.
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 d…
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. It’s also useful to instrument this in your production environment (called real user metrics) f…
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.
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.
I don't do front end, but I asked my team and they linked me to: https://medium.com/@paularmstrong/twitter-lite-and-high-perf... https://github.com/markerikson/react-redux-links/blob/master... Might be worth going through. Hopefully they're useful.
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 d…
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. It’s also useful to instrument this in your production environment (called real user metrics) f…
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.
https://github.com/webdriverio/webdriverio/tree/master/packa...