This article was adapted from: Lebyte

This article mainly explains: UniAPP project optimization methods and suggestions

Learn more about Java by: Testing your programming talents

Optimization methods and suggestions for UNIAPP project

introduce: Performance optimization has been the top priority since ancient times. The optimization methods of UNIAPP project are fully sorted out and will be supplemented according to the development situation

1. Complex page data areas are encapsulated as components

scenario:

For example, the project contains a similar forum page: click a “like” icon, the “like” number should immediately +1, which will trigger the synchronization of all data at the page level from THE JS layer to the view layer, resulting in data update of the whole page, resulting in click delay

Optimization scheme:

For complex pages, when updating data in an area, you need to make that area a component so that when updating data, only that component will be updated

Note: App-NVUE and H5 do not have this problem; The reason for the difference is that applets currently only provide a mechanism for component differential updates and do not automatically calculate all page differentials

2. Avoid large images

scenario:

If a large number of large image resources are used in the page, page switching will be delayed, resulting in increased system memory, and even white screen crash. Base64 large binaries is also very resource-intensive

Optimization scheme:

Images should be compressed and used, avoid large images, Sprite or SVG should be considered if necessary, not images if simple code can be achieved

3. Too much subcontracting processing of pages for small programs and APP

Go to the official website manual for configuration

4. Lazy loading of images

Functional description:

This function is only valid for wechat applet, App, Baidu applet and Bytedance applet, and is enabled by default

Go to the uView manual to view the configuration

5. Do not abuse local storage

Don’t abuse local storage. Use urls for parameter passing between local pages. Name specifications and destroy data on demand if you use local storage

6. Variables can be defined externally

In Uni-app, the data defined in data notifies the view layer to rerender the page every time it changes; Therefore, if a variable is not required by the view, it can not be defined in data, but can be defined externally or directly mounted on the Vue instance to avoid resource waste

7. Batch load data to optimize page rendering

scenario:

During page initialization, the logical layer transfers a large amount of data to the view layer at one time, making the view layer render a large number of nodes at one time, which may cause slow communication and slow page switching

Optimization scheme:

Render the page as a partial update of the page For example, if the server returns 100 pieces of data, you can load 50 pieces of data at a time and load them 500ms later

8. Avoid frequent communication between the view and logical layers

  1. Reduce the scroll event listening of the Scrollview component. When listening for scroll events of the Scrollview, the view layer will frequently send data to the logical layer
  2. When listening to scroll events of the scroll-view component, do not change the scroll-top/scroll-left attribute in real time, because the view layer communicates with the logical layer when listening to scroll, and the logical layer communicates with the view layer when changing the scroll-top/scroll-left attribute. This can cause communication congestion
  3. Note the use of onPageScroll. When onPageScroll listens, the view layer frequently sends data to the logical layer
  4. Use CSS animations rather than animations through the JS timer interface
  5. Renderjs is recommended on the app side and Web-View component is recommended on the applet side. There is no separation of the logical layer from the view layer, and there is no communication loss

9. The CSS optimization

Be aware of which attributes are inherited, such as fonts, font colors, and text sizes. Don’t repeat code that doesn’t make sense

10. Use throttling and anti-shaking

Image stabilization:

Wait n seconds for a function to be executed. If the function is triggered again, the wait time is initialized again

The throttle:

The triggering event is executed only once within n seconds. If the event is triggered again after n seconds, it is invalid

11. Optimize the page switching animation

scenario:

When the page is initialized, there are a lot of pictures or native component rendering and a lot of data communication. New page rendering and form entering animation grab resources, resulting in page switching lag and frame dropping

Optimization scheme:

  1. It is suggested to delay the rendering of images or complex native components by 100ms~300ms, and conduct data communication in batches to reduce the number of nodes for one-time rendering
  2. App side animation effect can be customized; Popin/Popout double form interlocking squeeze animation consumes more resources. If the page is executing time-consuming JS during animation, it may cause animation frames to drop. You can use animation effects that consume less resources, such as slide-in-Right/slide-out-Right
  3. App-nvue and H5 also support page preloading, uni.preloadPage, which can provide a better use experience

12. Optimize the background color flash white

scenario:

When entering a new page, the background flashes white. If the page background is dark, it may occur in the VUE page that the new form has a gray and white background at the beginning of the animation, but it turns into a dark background at the end of the animation, resulting in a flash screen

Optimization scheme:

  1. Writing styles in app. vue can speed up page style rendering. The style in app. vue is a global style. Each new page will load the style in app. vue first, and then load the style of the ordinary Vue page
  2. Json pages can also be configured in style, such as globalStyle->style->app-plus->background
"Style" : {" app - plus ": {" background" : "# 000000"}} to copy codeCopy the code
  1. If this problem does not exist on an NVUE page, you can change it to an NVUE page

13. Optimize startup speed

  1. The more the project code, including the background image and the larger the local font file, the speed of the small program has an impact, should pay attention to the control volume
  2. Splash on the App has a blank screen detection mechanism. If the home page is always blank or is an empty transfer page, Splash may shut down in 10 seconds
  3. If the App uses the V3 compiler and the home page is nvUE, and the startup mode is set to Fast, the App can start at the fastest speed
  4. The App is set as a pure NVUE project (the renderer under app-Plus :”native” is set in the manifest), which can start up faster in 2 seconds. Because it uses native rendering throughout the application, it doesn’t load the WebView-based framework

Optimize package volume

  1. When uni-App is released to applets, if es6 to ES5 and CSS alignment functions are used, the code volume may increase. You can configure whether these compilation functions are enabled
  2. At the H5 end of UNI-App, uni-App provides tree shaking optimization mechanism. The total package size of UNI-App before tree shaking optimization is about 500K, and 162K after gZIP is deployed on the server. Enable tree shaking in the manifest configuration
  3. The app end of UNI-App is about 9M Android base engine. The app also provides expansion modules, such as maps and Bluetooth. If these modules are not needed when packaging, you can cut them out to reduce the distribution package. Volume is optional in manifest.json-app module permissions
  4. App side support If you choose a pure NVUE project (manifest setting app-Plus renderer:”native”), the package size can be further reduced by about 2M
  5. After HBuilderX 2.7 on the App side, the non-V3 compilation mode was dropped on the App side, and the package size decreased by 3M

15. Do not abuse external JS plug-ins

describe:

If you have an official API, don’t add js plugins to your project

For example,:

EncodeURIComponent () and decodeURIComponent()

Thank you for your recognition and support, xiaobian will continue to forward “LeByte” quality articles