diff --git a/releases/next/docs/performance.html b/releases/next/docs/performance.html index 7acf9883ccb..e63bb492f4d 100644 --- a/releases/next/docs/performance.html +++ b/releases/next/docs/performance.html @@ -42,11 +42,17 @@ responding to TouchableOpacity, for example. This is because the JavaScript thre out of the box than Navigator. 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. -(Read about why you should probably use Navigator -anyways.)

Similarly, you can happily scroll up and down through a ScrollView when +(Read about why you should probably use Navigator +anyways.

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).

Common sources of performance problems #

Console.log statements #

When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread. This includes calls from debugging libraries such as redux-logger, so make sure to remove them before bundling.

Development mode (dev=true) #

JavaScript thread performance suffers greatly when running in dev mode. +but their receipt is not necessary for the scroll to occur).

Common sources of performance problems #

Console.log statements #

When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread. This includes calls from debugging libraries such as redux-logger, so make sure to remove them before bundling.

There is a babel plugin that can remove all console.* calls. You need to install it first using npm install babel-plugin-transform-remove-console --save, and then edit (or create) .babelrc under your project directory like the following:

{ + "env": { + "production": { + "plugins": ["transform-remove-console"] + } + } +}

Then it will automatically remove all console.* calls in a release (production) version of your project. However, the console.* calls will still be executed in the debug version of your project.

Development mode (dev=true) #

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.

Slow navigator transitions #

As mentioned above, Navigator animations are controlled by the