move blog post [Profiling Components with Chrome Timeline] into docs article (#8680)

* move blog post into docs article

* move to second section and changed description

* Minor tweak

docs/optimizing-performance.md

@@ -27,6 +27,29 @@ new webpack.optimize.UglifyJsPlugin()
 
 The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.
 
+## Profiling Components with Chrome Timeline
+
+In the **development** mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example:
+
+<center><img src="/react/img/blog/react-perf-chrome-timeline.png" width="651" height="228" alt="React components in Chrome timeline" /></center>
+
+To do this in Chrome:
+
+1. Load your app with `?react_perf` in the query string (for example, `http://localhost:3000/?react_perf`).
+
+2. Open the Chrome DevTools **[Timeline](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** tab and press **Record**.
+
+3. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang.
+
+4. Stop recording.
+
+5. React events will be grouped under the **User Timing** label.
+
+Note that **the numbers are relative so components will render faster in production**. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.
+
+Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it.
+
+
 ## Avoid Reconciliation
 
 React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a "virtual DOM", but it works the same way on React Native.