Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to optimize Mini Program, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Optimization item

1. Rational use of subcontracting

WeChat Mini Programs's main feature is fast startup, for this feature, the official limit on the size of the package is 2m.

Subcontracting is the first priority of Mini Program optimization, which can effectively improve the starting speed of Mini Program, as well as the speed of page opening.

The package is divided into [main package] [ordinary subcontract] [independent subcontract].

[main package] only the startup page or TabBar page should be placed.

[ordinary subcontracting] to place other pages that are not TabBar pages, it is recommended to divide multiple subpackages according to the number of pages or modules to reduce the size of the subpackages. Users will download the package only when they enter the corresponding subcontracting pages. This also enables the package to be loaded on demand and avoids the waste of resources. When Mini Program starts from a page in a normal subpackage, you need to download the main package first, and then download the subpackage.

[independent subcontracting] place some pages with high independence. When Mini Program starts from the pages of independent subcontracts, only independent subcontractors will be downloaded, thus greatly improving the startup speed of Mini Program. When users enter the TabBar page or other ordinary subcontracting pages, they will go back to download the corresponding packages.

There can be no global things in a separate subcontract, including components, logins, etc., and introducing resources in any other package will make an error.

The author suggests sorting out the page and function before subcontracting, the limit of subcontracting is not that the size of the package is more than 2m, but should be divided flexibly according to business and function. In today's normal network conditions, there may not be a big gap between 2m subcontracting and 500KB subcontracting, but in a weak network environment, there will be a big gap in the time users spend on the white screen (personal experience, it can be said that it takes a lot of heart and soul).

For example, I would subpackage secondary pages that can be accessed directly from TabBar pages and more frequently, and then divide other deeper pages or pages that are less important into a package, or divide the pages of the entire order business module into a package.

Once the package is ready, there can be no less [subcontract pre-download]. You can configure it according to the rules of the official website. When a user enters a page, he / she will download the package in advance.

two。 On-demand injection

After Mini Program downloads the package, all the JS of the package where the page is opened will be merged and injected, and some unvisited pages and unused custom components will also be injected into the runtime environment. Affects injection time and memory footprint. What we want is that when the package is downloaded, only the code of the page we are about to open will be injected.

This is also the point when Mini Program starts or jumps to the subcontracting page, which affects the white screen time.

{"lazyCodeLoading": "requiredComponents"}

3. Clarify several invocation principles of setData

Mini Program runs on the Wechat client, that is, wxml, wxs and wxss all run on the client. The running environment is divided into two threads, a rendering thread and a logical thread. The render layer uses WebView for rendering, and the logical layer uses JSCore to run JS code. Wxml and wxss work on rendering threads, while wxs works on logical threads. How do the two threads communicate?

Communicate through the client as a transit station

The rendering layer triggers the event response to the client, and the logic layer transmits data to the client through setData. The data on both sides will be converted into strings and then transmitted, and the client will respond separately, and the response is not real-time. It means that the setData page triggered at the logical layer will not be updated immediately, and there will be some delayed rendering layers to update.

Back to the question, setData is called in the logic layer. Making the rendering layer respond quickly depends on the efficiency of data transfer from the logic layer to the client, which in turn depends on the size of the data you transfer, so you should reduce the data transfer size as much as possible when calling setData.

Native converts wxml into js objects, and then makes a differential comparison with the objects passed in by setData, rendering the differences to the view.

To sum up, we should follow several principles when we call setData:

Minimize the size of the required setData data, and do not exceed the 256KB after JSON.stringify.

Avoid passing data that does not need to be rendered (data that is not bound in wxml) into setData, reducing the time-consuming of difference comparison.

Avoid calling setData too frequently, which will lead to busy business in the logic layer, processing the transmission queue of setData all the time, resulting in inability to deal with the response of the rendering layer, resulting in rendering blocking, stuttering on the page, and even invalid setData. If possible, it can be optimized by means of throttling and so on.

Merge multiple data that need to be updated into a single setData as much as possible, reducing the communication process.

To prevent background pages from triggering setData will also take up JS threads, which may cause blocking and lead to unresponsive data that really need setData.

Reducing the data size of setData is usually in a list scenario, and only the subscript that needs to be updated is updated:

Const needRefresh = `list [${index}] `/ / write one setData ({[needRefresh]: 'new value'}) / / write two setData ({[`list [${index}]`]: 'new value'}) / / write three setData ({'list [0]': 'new value'}) / / write four Const needRefresh = `list [${index}]. D isabled`setData ({[needRefresh]: 'new value'}) / / write 5 update object setData ({'personal.name':'xxx'})

If you have a variable, you need to put it in [].

4. Control the size ratio of the picture

Too many images will increase download time and memory consumption, and for the sake of user experience, the aspect ratio of the image should be controlled to prevent the image from being distorted or trimmed (this problem can be adjusted according to the mode property of image).

A qualified picture should meet the following two points:

Picture width and height product {task ()}, wait)} async function task (promiseList = []) {const result = await promise.all (promiseList) / / do something}

Excuse me: sometimes within the limit of the number of requests, we should concurrently process the interfaces that are not in order to improve the efficiency of interface processing.

6. Request time-consuming optimization

This is mainly reflected in two aspects-[interface] and [static resources].

[API] basically should not exceed 1000ms, even if it is hundreds of milliseconds, it may need to be optimized. Basically, the normal speed is 10-200ms, and hundreds of individual interfaces are normal. Most of them should not exceed 500ms (please calm down at the back end).

[static resources] first of all, consider the size of the resources. Most of the resources are pictures. You can refer to the image size standard above. Secondly, consider the resource cache, for Mini Program, static resources are basically stored on the cdn, setting cache can effectively improve the performance of the client.

Here I would like to share with you a photo compression website: https://tinypng.com/

7. Avoid using too large number of WXML nodes

It is recommended that a page use less than 1000 WXML nodes, the depth of the node tree is less than 30 layers, and the number of child nodes is not more than 60. A large tree of WXML nodes increases memory usage and takes longer to rearrange styles, affecting the experience.

The number of nodes on the page includes all the sub-nodes, it is important to pay attention to the number of sub-nodes, if the number of sub-nodes is greater than 60, maybe you should consider redividing the component or page.

Basic skills!

8. Use the skeleton screen

Skeleton screen I believe that we are no stranger, if our optimization methods are exhausted, the page needs to load more resources itself, then the skeleton screen is also our next best solution, it can be regarded as "curve to save the nation".

There are many ways to implement a skeleton screen. You can write a skeleton component yourself, or you can use some plug-ins that generate the skeleton screen. In addition, Mini Program also provides a whoring program, and developer tools provide the ability to automatically generate skeleton screen code.

For more information, please visit https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html

9. Split components reasonably and reduce the size of data

WeChat Mini Programs's update is based on the component, and the update of the custom component will only be within the component, which can reduce the time consuming caused by the difference comparison.

The main purpose of controlling the size of data is to reduce memory consumption, such as defining some image path variables in data. If possible, I recommend loading some images through background.

10. Scroll area sets inertia scrolling

Inertial scrolling will make scrolling smoother. There is inertial scrolling by default on Android, but an additional setting of-webkit-overflow-scrolling: touch style is required under iOS.

11. Expand the clickable area of clickable elements

Wechat stipulates that the minimum clickable area should not be less than 20x20 pixels. The problem of this style does not go into much detail. The eight Immortals cross the sea, each showing his or her magical powers.

Thank you for reading this article carefully. I hope the article "how to optimize Mini Program" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.