Skip to content

performance.md

Latest commit

 

History

History
executable file
·
106 lines (78 loc) · 4.95 KB

performance.md

File metadata and controls

executable file
·
106 lines (78 loc) · 4.95 KB
Raw

Performance and Scaling

Performance and scaling are two very common interview topics. Being able to relate questions about them back to your FSP is a great way to demonstrate your command of React and Rails. Below are some resources to get you started building a faster site.

React

Measuring Performance

React provides a number of benchmarking tools that allow us to identify wasteful DOM manipulation. It's possible to use the Perf object from the react-addons-perf library to identify time spent on components that haven't changed what they render with Perf.printWasted(). printOperations() provides a list of underlying DOM manipulations made over a given period of time.

Managing updates efficiently

Despite the efficiency of React's diffing algorithm in determining what components to update, it's sometime necessary to supplement that functionality with React's shouldComponentUpdate lifecycle method. shouldComponentUpdate allows us to limit the circumstances in which a given component renders.

Code splitting with react-router and webpack

The bundle.js file can be very large and result in slow load times when a user first navigates to your site. Our old friend Webpack provides an opt-in feature called code splitting that allows javascript to be dynamically loaded based on what's being rendered in the user's current page. In order to take advantage of Webpack's code splitting functionality, you'll need to integrate it with the react-router. This way javascript files are only loaded upon navigation to certain URLs.

Rendering separation (or windowing)

While code splitting allows us to get around having to make the browser handle an overly large bundle.js file, that still leaves us with potentially unnecessary rendering of complex elements on the user's current page. For instance, if at all possible we want to avoid rendering elements at the bottom of the page until the user scrolls and those components come into view. Just think of how Netflix renders movie lists as you scroll down, but not before that.

While you can roll your own windowing functionality, there are also a number of excellent NPM packages out there that can quickly be integrated with your app. One particularly popular package for rendering large lists is react-virtualized.

Rails

Caching with Redis

Using a tool like Redis can speed up data-intensive SQL queries on the backend by holding data-sets in memory for fast retrieval. Redis can be used to store recently queried data, effectively caching it so later requests for that data never hit the database, but are instead served by Redis.

More resources