Leo FabrikantinLevel Up CodingSecrets of JavaScript: a tale of React, performance optimization and multi-threadingLessons learned from optimizing a uniquely challenging search UIMay 23, 20192May 23, 20192
Leo Fabrikantv1.0.0 Understanding the ProblemMy first implementation used the react-autocomplete and react-virtualized libraries for the UI.May 23, 20192May 23, 20192
Leo Fabrikantv1.1.0 Async Rendering (componentDidUpdate)Note: This is an example of a failed optimization attempt that I thought was worth highlighting because it leads to a better understanding…May 23, 20191May 23, 20191
Leo Fabrikantv1.1.1 Async Rendering (setTimeout)In the previous iteration we’ve split the components:May 23, 20191May 23, 20191
Leo Fabrikantv1.2.1 Web WorkersWeb workers provide the opportunity to run code on a separate thread outside of the main JavaScript thread. Each Web Worker is initialized…May 23, 20191May 23, 20191
Leo Fabrikantv1.2.0 Multi-threadingIn the previous iteration, we split our components and successfully used setTimeout to move the expensive search off to a separate…May 23, 20194May 23, 20194
Leo Fabrikantv1.2.2 Confirm searchTermThe obvious problem with the previous performance profile is that the expensive search algorithm is run even when the searchTerm is stale…May 23, 2019May 23, 2019
Leo Fabrikantv1.2.3 Web Worker ArrayIf one extra thread is good, how about 4?May 23, 20197May 23, 20197
Leo FabrikantReact Autocomplete with React Virtualized to handle massive search resultsFeb 19, 20181Feb 19, 20181