Performance Tuning Motorcycle

Performance tune-up up


BottomBar getWasted Call - BeforeAt our recent engineering offsite my team took the opportunity not only to plan out and design some new features we’re starting to build but we also spent some time tuning our existing React application to make it even faster. Here are a couple of the quick wins we had and a few additional techniques that might help you spot bottlenecks and tune up your own app.

You can’t tune what you can’t measure, so a large part of any performance effort is properly instrumenting both your application and your testing environment to measure and analyze the deltas as you work. In the following examples we’ll be quantifying performance using some React-specific tools along with the great profiling tools already built into browsers.

BottomBar Timeline - BeforeGetting Wasted

React has a ready-made set of performance measuring methods available via the Perf object from the Performance Tools library. Included is a handy function called printWasted which reports where unnecessary work is happening in component render methods and the virtual DOM in JavaScript that don’t ultimately cause a change in the HTML DOM.

To get setup, install the react-addons-perf package and include it in your project.

BottomBar Timeline - Afternpm install react-addons-perf -save-dev

import Perf from "react-addons-perf"; // Expose the React Performance Tools on the`window` object window.Perf = Perf;

Exposing the tools directly on the window object will allow control of performance data collection from the browser console while your app is running. Give it a try!

window.Perf.start // ... do some stuff with the app related to whatever components you are testing window.Perf.stop window.Perf.printWasted

Layer Reordering Timeline - BeforeTMI: Oversharing Props

The printWasted reports are a great way to reveal places in your app where you might be passing too much information through your component stack, causing unnecessary render calls, even when you’re optimizing with PureRenderMixin.

As we were developing our app we initially had a small section of our Redux store tracking a couple client-side only UI states. For velocity of early development, we simply passed that entire object through to the various components that used it. As is typical though, that part of our store grew over time and as you can see from this report our components were doing a lot of unnecessary work.

After some refactoring to prune props from being passed to components where they weren’t used you can see a huge improvement in both the printWasted report and the Timeline profile.

Layer Reordering getWasted() Call - After Chrome Extension Profile Interactions


Share this article





Related Posts


3D car Customizer online
3D car Customizer online

Latest Posts
3D car Customizer online
3D car Customizer…
Even if we drive a real car or play a…
Good cars to work on
Good cars to…
With lots of car scratch removers on…
Auto modifications
Auto modifications
Chances are you rely on your car or truck…
Truck Customizer program
Truck Customizer…
– Custom Truck & Equipment, a…
Car Paint designers
Car Paint designers
(832) 259-0209 Very helpful staff. We…
Search
Featured posts
  • Virtual car Customizing software free Download
  • Create and Customize your own car
  • 3D car Customizer online
  • Truck Customizer program
  • Good street racing cars for Beginners
  • Easy cars to Tune
  • Good Project Cars
  • Design your Dream car
  • Good cars to work on
Copyright © 2020 l bethelccoh.org. All rights reserved.