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

Updated docs for next

Browse Source
This commit is contained in:
Website Deployment Script
2016-09-22 16:11:28 +00:00
parent e218dd5999
commit 6ecb5241a5
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/performance.html
+9 -3
View File
@@ -42,11 +42,17 @@ responding to TouchableOpacity, for example. This is because the JavaScript thre
out of the box than <code>Navigator</code>. The reason for this is that the
animations for the transitions are done entirely on the main thread, and
so they are not interrupted by frame drops on the JavaScript thread.
(<a href="docs/navigator-comparison.html" target="_blank">Read about why you should probably use Navigator
anyways.</a>)</p><p>Similarly, you can happily scroll up and down through a ScrollView when
(<a href="docs/using-navigators.html" target="_blank">Read about why you should probably use Navigator
anyways.</a></p><p>Similarly, you can happily scroll up and down through a ScrollView when
the JavaScript thread is locked up because the ScrollView lives on the
main thread (the scroll events are dispatched to the JS thread though,
but their receipt is not necessary for the scroll to occur).</p><h3><a class="anchor" name="common-sources-of-performance-problems"></a>Common sources of performance problems <a class="hash-link" href="docs/performance.html#common-sources-of-performance-problems">#</a></h3><h4><a class="anchor" name="console-log-statements"></a>Console.log statements <a class="hash-link" href="docs/performance.html#console-log-statements">#</a></h4><p>When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread. This includes calls from debugging libraries such as <a href="https://github.com/evgenyrodionov/redux-logger" target="_blank">redux-logger</a>, so make sure to remove them before bundling.</p><h4><a class="anchor" name="development-mode-dev-true"></a>Development mode (dev=true) <a class="hash-link" href="docs/performance.html#development-mode-dev-true">#</a></h4><p>JavaScript thread performance suffers greatly when running in dev mode.
but their receipt is not necessary for the scroll to occur).</p><h3><a class="anchor" name="common-sources-of-performance-problems"></a>Common sources of performance problems <a class="hash-link" href="docs/performance.html#common-sources-of-performance-problems">#</a></h3><h4><a class="anchor" name="console-log-statements"></a>Console.log statements <a class="hash-link" href="docs/performance.html#console-log-statements">#</a></h4><p>When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread. This includes calls from debugging libraries such as <a href="https://github.com/evgenyrodionov/redux-logger" target="_blank">redux-logger</a>, so make sure to remove them before bundling.</p><blockquote><p>There is a <a href="https://babeljs.io/docs/plugins/transform-remove-console/" target="_blank">babel plugin</a> that can remove all <code>console.*</code> calls. You need to install it first using <code>npm install babel-plugin-transform-remove-console --save</code>, and then edit (or create) <code>.babelrc</code> under your project directory like the following:</p><div class="prism language-javascript"><span class="token punctuation">{</span>
<span class="token string">&quot;env&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token string">&quot;production&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token string">&quot;plugins&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">&quot;transform-remove-console&quot;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>Then it will automatically remove all <code>console.*</code> calls in a release (production) version of your project. However, the <code>console.*</code> calls will still be executed in the debug version of your project.</p></blockquote><h4><a class="anchor" name="development-mode-dev-true"></a>Development mode (dev=true) <a class="hash-link" href="docs/performance.html#development-mode-dev-true">#</a></h4><p>JavaScript thread performance suffers greatly when running in dev mode.
This is unavoidable: a lot more work needs to be done at runtime to
provide you with good warnings and error messages, such as validating
propTypes and various other assertions.</p><h4><a class="anchor" name="slow-navigator-transitions"></a>Slow navigator transitions <a class="hash-link" href="docs/performance.html#slow-navigator-transitions">#</a></h4><p>As mentioned above, <code>Navigator</code> animations are controlled by the