Original title: Web front end: how to improve the performance of React native applications
React Native has a large number of followers, from Fortune 500 companies to new start-ups. Developers can use React Native to create excellent mobile UI for mobile applications on IOS and Android.
With the smooth progress of React Native, does it even have a negative impact? Yes, it is. This is an obstacle to the performance of React Native applications!
What is the main reason for the performance degradation of React native App?
The more code on the Javascript side, the slower the application will run. A single threaded programming language like JavaScript limits performance because it can accomplish a single task at the same time. You can check the frame rate of Javascript and UI system threads to see where the performance bottleneck of your application is.
It also depends on your code, so please avoid anything that may block threads, such as synchronous network calls or infinite loops. Beware of FlatLists, because they are the culprit of the performance problem of React native.
Check for memory leaks
Memory leakage is an inherent performance challenge, which occurs because some unnecessary processes are running in the background of the application. Memory leaks can degrade computer performance due to reduced available memory. In the worst case, allocating too much available memory will lead to total or partial system or device failure, program crash, or significant system speed reduction.
Animate
JavaScript threads control animation. Imaginary scene transition; The new scene moves from right to left, starting off the screen. For each frame in the conversion process, the JavaScript thread must send a new x offset to the main thread. If the JavaScript thread is locked, it cannot do this, so no update will occur on this frame, and the animation will be intermittent.
One solution is to unload JavaScript based animation to the main thread.
Shorten application startup time
The purpose of improving application startup time is to take care of objects. Complete the element. The finalizer runs on a single thread, so all other objects must wait until all finalizers pass before they can be garbage collected. This creates a huge dependency, resulting in slow application startup time.
Navigation will cause obstacles
The function of this program revolves around navigation, so you should spend more energy to enhance it and enhance the interaction between JavaScript and native elements. Therefore, you can use these navigation functions. Reaction navigation, navigator, navigator iOS, navigation experiment.
Multithreading exacerbates this problem
React Native does not support multithreading. Other projects cannot continue until the initial elements in React Native are rendered. For example, implementing the real-time chat function while implementing real-time video broadcasting will involve performance problems. Use the main process to operate the business logic of the application, respond to user input, and track the status of React native performance test.
Advantages of improving the performance of React native applications
React local developers can reduce the application startup load time, and users can "feel" this in the final product. React Native far surpasses Flutter in cross platform smartphone development because it adopts a new and improved architecture. The new rendering system fabric of React native improves the performance of navigation, list, gesture processing, etc.
The outdated components (AsyncStorage, WebView) in React Native are removed from the core and transformed into community managed repositories, which helps React Native improve performance and flexibility. The smooth communication between JS and native code and the new underlying structure have improved the performance of the application.
conclusion
Performance is only one aspect of an app. There are many other reasons for choosing a solution, such as UI, code reusability, community support, front-end support, language, and so on. Choose the framework that best suits you and is easier or more interesting. Go back to Sohu to see more
Editor in charge:
