as possible. • Consider separating scripts and styles that change frequently from scripts and styles that remain the same. • e.g. Separate your vendor code like Bootstrap from your app code. • Use naming conventions to invalidate cache.
just gone to China where data was real expensive to use, CUT DOWN YOUR ****ING FILE SIZES. • Only include polyfills (particularly with babel) you use. • e.g. with lodash, only include methods you use. • Dedupe your dependencies.
N D E R I N G PAT H • This is a psychology game. You want the fastest perceived page load. • Defer anything not critical to the first paint to after it. • However, once you have had your first paint, starting loading everything as fast as you can!
Use sparingly. • Hard to do good, accessible UX with animations anyway. • JavaScript animations are only performant if the main JS thread is not occupied. • CSS animations can be better because they’re not on the JS thread. Investigate using the GPU to further enhance performant. • Tend to burn battery.
O N E N T U P D AT E • React components have a lifecycle method called shouldComponentUpdate() that React runs in order to tell if it should re- render the component or not. • For components that never re-render, always return false. • For perf bottlenecks, implement your own shouldComponentUpdate. • For other components, leave them alone. It can introduce hard-to-find bugs.
O O L I N G • printInclusive – include lifecycle methods • printExclusive – exclude lifecycle methods • printWasted – TIME/BATTERY YOU ARE WASTING YOU IDIOT
R I T E M S • reddit has this problem and Facebook had it. • One feed item has many tiny components and each page has many feed items. • By only rendering the feed items visible on the page, you save React a significant amount of re-rendering. • Hidden menus / actions? Only render them when shown.
T H E L I N E S • Stop abusing lifecycle methods. • Use refs only when what you want cannot be done another way. • When you must listen for DOM events, be sure to clean up after yourself in componentWillUnmount.
A C T • Careful what you stick on state. State should be reserved for mutable data that the component needs to react to changes for. • There is a point where you’re breaking a component into too small of components. • Sometimes is just better to have a button with a style class and that’s it!
your page into chunks that get loaded only on the necessary page. • Webpack does tree shaking dead code elimination. • If you can’t switch to Webpack, uglify can at least get you dead code elimination. • Otherwise npm dedupe can help you do it by hand.
P F I R S T • Don’t spend too much optimizing code preemptively or code that isn’t really a bottleneck. • Prefer readability when possible. • After getting readable code down then go back and optimize and hack around the bottlenecks. • Document hacks well.
S U P P O R T • All mobile browsers (except Opera Mini and Blackberry) support it. • Yeah, even the stock Android browser. Weird. • Firefox, Chrome, and Opera since forever. • IE 11+ and Safari 8+.