Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rebuild the website manually

Browse Source
This commit is contained in:
Dan Abramov
2017-01-12 16:06:32 +00:00
parent 6bb7a6c60e
commit e8ea302025
9 changed files with 42 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/optimizing-performance.html
+18
View File
@@ -96,6 +96,24 @@
<span class="k">new</span> <span class="nx">webpack</span><span class="p">.</span><span class="nx">optimize</span><span class="p">.</span><span class="nx">UglifyJsPlugin</span><span class="p">()</span>
</code></pre></div>
<p>The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.</p>
<h2><a class="anchor" name="profiling-components-with-chrome-timeline"></a>Profiling Components with Chrome Timeline <a class="hash-link" href="#profiling-components-with-chrome-timeline">#</a></h2>
<p>In the <strong>development</strong> mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example:</p>
<p><center><img src="/react/img/blog/react-perf-chrome-timeline.png" width="651" height="228" alt="React components in Chrome timeline" /></center></p>
<p>To do this in Chrome:</p>
<ol>
<li><p>Load your app with <code>?react_perf</code> in the query string (for example, <code>http://localhost:3000/?react_perf</code>).</p></li>
<li><p>Open the Chrome DevTools <strong><a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool">Timeline</a></strong> tab and press <strong>Record</strong>.</p></li>
<li><p>Perform the actions you want to profile. Don&#39;t record more than 20 seconds or Chrome might hang.</p></li>
<li><p>Stop recording.</p></li>
<li><p>React events will be grouped under the <strong>User Timing</strong> label.</p></li>
</ol>
<p>Note that <strong>the numbers are relative so components will render faster in production</strong>. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.</p>
<p>Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard <a href="https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API">User Timing API</a> so we expect more browsers to add support for it.</p>
<h2><a class="anchor" name="avoid-reconciliation"></a>Avoid Reconciliation <a class="hash-link" href="#avoid-reconciliation">#</a></h2>
<p>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 &quot;virtual DOM&quot;, but it works the same way on React Native.</p>