Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "what is the method of ReactNative performance optimization?", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is the method of ReactNative performance optimization".

The way of ReactNative performance optimization 1. Package streamlining

Version comparison:

Couple independent plug-in: 7.2m.

Topic circle: the overall increase of the ReactNative framework into Qzone is only 3.2m.

Main optimization points:

1) the small platform so library has been removed.

2) reuse Qzone support jar.

Phase II Planning:

1) add Adapter between Qzone and ReactNative to make ReactNative adapt to Qzone network library and picture library, so that okhttp library and fresco library of ReactNative framework can be discarded and packet size can be reduced.

two。 Acceleration and startup speed of the first screen

Version comparison:

After the transformation of ReactNative, Topic circle, under the optimization of wifi and cache, the first screen is about 108ms faster than H5, and because the jsbundle is cached locally, it can be accessed offline.

ReactNative Topic circle data:

Main optimization points:

1) change the source code, add a preinitialization API, and preload the ReactNative context after Qzone Feeds rendering.

2) the data on the first screen needs to be pulled and stored locally through the network request from the front end, and local data rendering is preferred for H5.

Process comparison before and after optimization:

Phase II Planning:

1) currently, preloading ReactNative in memory is only a context, and it still takes some time to open. You can try caching View here and addview it directly when it is opened.

2) the data pre-pulled is the http channel, which can be accelerated using wns httpproxy.

3.FPS

Version comparison:

H5 Topic circle: avgFPS=54

ReactNative Topic circle: avgFPS=52

Main optimization points:

1) the JS layer causes the Listview control to render data, abandoning the use of the ScrollView control.

2) the DOM element sets a transparent background.

Phase II Planning:

Currently, the official listview does not use item reuse logic and is only left empty when the item is not visible. RecyclerView is still a Test control that only supports horizontal scrolling. The performance of listview still needs to be improved. The next version is planned to achieve highly available RecyclerView.

4. Memory

Version comparison:

Couple space: no memory leaks and memory waste, about 20% more than the H5 version.

Topic circle: there is no memory leak and waste of memory, which is basically the same as the H5 version.

Detailed data of Topic circle:

Main optimization points:

1) the JS layer causes the Listview control to render data, abandoning the use of the ScrollView control.

2) split the video VideoView, the VideoCover is implemented by H5, the Native is managed by Fresco, and the MideaPlayer is implemented by Native.

Phase II Planning:

Currently, the official listview does not use item reuse logic and is only left empty when the item is not visible. RecyclerView is still a Test control that only supports horizontal scrolling. The performance of listview still needs to be improved. The next version is planned to achieve highly available RecyclerView.

Comparison of overall data between ReactNative Topic circle and H5 Topic circle

At present, ReactNative's communication time between Web and Native is obviously better than webview's jsbridge mode (console.log), and its performance is better than H5 on high school computers such as FPS and CPU. However, from an overall point of view, there is room for optimization in crash, memory, FPS, and the first screen. Here is the overall comparison data.

The above is the content of this article on "what is the method of ReactNative performance optimization". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.