Optimization methods and suggestions for UNIAPP project

introduce: Performance optimization has been the top priority since ancient times. The optimization method of uniApp project is the most complete 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: if you click a “like” icon, the “like” number will be +1 immediately, which will trigger the synchronization of all data at the page level from JS layer to view layer, resulting in the data update of the whole page, resulting in the click delay

Optimization scheme:

For complex pages, when you update data for a region, you need to make that region a component, so that only that component is updated when the data is updated

Note: This problem does not exist in APP-NVUE and H5; The reason for the difference is that the applet currently only provides a mechanism for updating component differentials and cannot automatically calculate all page differentials

2. Avoid large images

scenario:

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

Optimization scheme:

Pictures please use after compression, avoid large pictures, if necessary, you can consider Sprite or SVG, simple code can achieve the image

3. Too many pages are processed by small programs and APP subcontracting

Go to the official website manual to view the configuration

4. The image is loaded lazily

Functional description:

This function is only valid for wechat applet, App, Baidu applet and bytedance applet. It is enabled by default

Go to the uView manual to view the configuration

5. Do not abuse local storage

Do not abuse local storage. Pass parameters between local pages using urls. If you pass data using local storage, use naming conventions and destroy data on demand

6. Variables can be defined externally

In uni-app, data defined in data informs the view layer to rerender the page every time it changes; Therefore, if the variable is not required by the view, you can define the variable outside the data or mount it directly on the Vue instance to avoid the waste of resources

7. Load data in batches to optimize page rendering

scenario:

When the page is initialized, the logical layer passes a large amount of data to the view layer at a time, so that the view layer renders a large number of nodes at a time, which may cause slow communication and page switching

Optimization scheme:

Render the page as a partial update; For example, if the server returns 100 pieces of data, 50 pieces of data can be loaded in batches. The next load is performed 500ms later

8. Avoid frequent communication between view layer and logical layer

  1. The scroll event listener of the Scrollview component is reduced. When the scrollevent listener of the Scrollview is monitored, the view layer frequently sends data to the logical layer

  2. Do not change the scrolltop/scrollleft properties of the Scrollview component in real time, because the view layer communicates with the logical layer when the scrolltop/scrollleft is monitored, and the logical layer communicates with the view layer when the scrolltop/scrollleft is changed. That could cause a communications blackout

  3. Note the use of onPageScroll. When onPageScroll is listening, the view layer frequently sends data to the logical layer

  4. Use CSS animations instead of using the JS timer interface

  5. For manual operations in the Canvas, it is recommended to use RenderJS on the app side and Web-View component on the small program side. Pages in a Web-View have no concept of a separation of the logical layer and the view layer, so there is no communication breakdown

9. The CSS optimization

Know which attributes are inherited, such as font, font color, and text size, and forbid meaningless duplication of code

10. Make good use of throttling and shaking

Section shaking,:

A triggered event is executed only once in n seconds. If an event does not pass n seconds, it cannot be triggered again

The flow:

Wait n seconds to execute a function. If the wait period is triggered again, the wait time is reinitialized

11. Optimize page switching animations

scenario:

When the page is initialized, there is a large number of images or native component rendering and a large amount of data communication, which will cause new page rendering and animation of the form to grab resources, resulting in page switching lag and frame drop

Optimization scheme:

  1. It is recommended to render images or complex native components with a delay of 100ms to 300ms and conduct data communication in batches to reduce the number of nodes to be rendered at one time

  2. App-side animation effects can be customized; The popin/ Popout dual form linkage extrusion animation effect consumes more resources. If the page is executing time-consuming JS during the animation, the animation may cause frame drop. In this case, you can use animations that consume less resources, such as slide-in-right/slide-out-right

  3. App-nvue and H5, also support page preloading, uni. PreloadPage, can provide a better use experience

12. Optimize the background color for flashing white

scenario:

When entering a new page, the background will flash white. If the page background is dark, it may occur in the VUE page that the new form starts with a gray and white background and turns into a dark background at the end of the animation, resulting in a splash screen

Optimization scheme:

  1. By writing styles in app.vue, you can speed up rendering of page styles. The style in app. vue is a global style. Every time a new page is opened, the style in app. vue will be loaded first, and then the style of ordinary VUE page will be loaded

  2. You can also configure the native page background color separately in the pages. Json page style, for example under globalStyle->style->app-plus-> Background

"style": { "app-plus": { "background":"#000000" } }
Copy the code
  1. Nvue pages do not have this problem and can also be changed to NVUE pages

13. Optimize startup speed

  1. The more engineering code, including the background image and the larger the local font file, has an impact on the small program start speed, should pay attention to control the volume

  2. There is a white screen detection mechanism for splash closing on the App. If the home page is always blank or the home page itself is an empty transfer page, splash may take 10 seconds to close

  3. When the V3 compiler is used on the App side, the home page is NVUE page, and the fast startup mode is set, the App starts at the fastest speed

  4. App is set to a pure NVUE project (the manifest is set to app-Plus renderer:”native”), this project is faster to start, 2 seconds to complete startup; Because it uses native rendering throughout the application, it doesn’t load the WebView-based framework

14. Optimize the package volume

  1. When uni-app is released to small programs, if the es6 to ES5 and CSS alignment functions are used, the code volume may increase. You can configure whether to enable these compilation functions

  2. At the H5 end of Uni-app, uni-app provides tree shaking optimization mechanism. The overall package volume of Uni-app before tree shaking optimization is about 500K, and 162K after gZIP is deployed on the server. Enable tree shaking optimization in the manifest configuration

  3. Uni-app app side, The Android base engine is about 9M, the app also provides extension modules, such as maps, Bluetooth, etc. If these modules are not needed when packaging, you can cut them out to shrink the distribution package; The volume can be selected in the manifest.json-app module permission

  4. If you select a pure NVUE project (set the renderer under App-Plus :”native” in the manifest), the package size can be further reduced by about 2M

  5. After HBuilderX 2.7, the non-V3 compilation mode is removed from the App, and the package size is reduced by 3M

15. Prohibit abuse of external JS plug-ins

describe:

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

For example,:

EncodeURIComponent () and decodeURIComponent()