WeChat Mini Program Development Tutorial column summarizes the performance optimization of mini programs.

Project Description & Questions

Let’s briefly introduce the project, which is a relatively conventional ordering app.

The interface is as shown:

The left is the category menu, and the right is the long list. There are multiple categories of products. You can continue to scroll after scrolling through a single category. Switch to the next category, and the selected status of the category menu on the left will switch to the category displayed in the current product list.

Considering a better user experience and referring to Meituan and other ordering applets, the data of this product list is returned in one go. The problem currently encountered is that when the number of products is large, the first rendering time is very long, and the page will freeze.

Optimization direction

Logic optimization

Xiaosheng bb: In fact, the original code (due to historical reasons) was too poorly written...OTL

Put a picture first

Xiaosheng bb: I can’t even stand the mini program anymore, so I need to warn you

WeChat developer tools have warned you, And the prompt also contains the location of the specific code, so the key is this setData! ! !

We can first take a look at some official suggestions for mini program performance and setData optimization. (developers.weixin.qq.com/miniprogram…)

Specific practice:

1. setData You cannot transmit too much data at one time. If the list is too long, you can Render separately [such as converting to a two-dimensional array and rendering one array each time in the loop].

v1: Simple and rough version

//?每次渲染一個(gè)分類//?假設(shè)goodsList是一個(gè)二維數(shù)組goodsList.forEach((item,?index)?=>?{????this.setData({
????????[`goodsList[${index}]`]:?item
????})
})復(fù)制代碼

There is a problem when writing like the above. The first screen rendering of the page is fast, but when you click on the page operation (such as the purchase button, etc.), the page will freeze. Wait and wait for a response. The operation feedback is seriously delayed.

In fact, this is because this cycle reduces the number of single setData, but turns it into a multiple cycle of setData. We look at the first screen display Okay, but in fact, other categories (other arrays) are still rendering, and the thread is still busy. The JS thread has been compiling and executing rendering. The click event cannot be passed to the logic layer in time, and the logic layer cannot pass the operation processing results to the view in time. layer.

v2: Timer hack version

Since the js thread is busy rendering, we can force it to stop first. So there is a timer hack version of v2.

//?每次渲染一個(gè)分類let?len?=?data.goodsList???data.goodsList.length?:?0;let?idx?=?0let?timer?=?setInterval(()?=>?{????if?(idx?< len) {
        that.setData({
            [`goodsList[${idx}]`]: data.goodsList[idx]
        });
        idx++
    } else {        clearInterval(timer)
    }
}, 15);復(fù)制代碼

Now the first screen rendering speed problem has been solved, and the delayed response problem of clicking buttons has also been solved. It’s just that the code is a bit hacky, which makes me suffer from obsessive-compulsive disorder

v3: Big Killer - Virtual List

The simple principle of virtual list is to only render the current display screen area and the front n screens and back n screens Use a separate field to save the current array that needs to be displayed (that is, n screens before the current screen and n screens after the current one). Each time the list scrolls, the data that needs to be displayed is recalculated. If this field is updated, the page will be updated accordingly. . This ensures that the number of element nodes on the page is not too large and can support long list requirements for large amounts of data.

For more detailed principles and implementation, students can search for it themselves and will not be expanded upon here.

The mini program also has an official open source virtual list component: recycle-view

2. setData can support granular updates and specify specific attributes.

For example, if you need to update the small number in the upper right corner of the product for operations such as additional purchases, you can write it like this:

this.setData({
    [`goodsList[${categoryIndex}][${goodsIndex}].num`]: goodsItem.num
})復(fù)制代碼

3. Do not save data unrelated to the page in data. Do not update with setData because setData will trigger page rendering.

eg:

Page({    data: {
        ...
    },    // 跟頁面渲染無關(guān)的數(shù)據(jù)
    state: {        hasLogin: false,
    },
    ...
})// 更新的時(shí)候直接賦值就行this.state.hasLogin = true復(fù)制代碼

PS: Or you don’t even need to mount it to the page object, just save it directly with an ordinary variable.

4. Image size optimization

If the image size in the long list is not limited, a large number of large images will occupy a lot of memory, which may cause the iOS client memory usage to increase, thus triggering the system Recycle mini program page. In addition to memory issues, large images can also cause page switching lags.

The solution is to take a picture with just the right size (2x-3x the picture) based on the size of the currently displayed picture area.

It is recommended to use a CDN for images. Generally, CDN service providers that provide image services will provide an interface for cropping images, and then the interface only returns the original image link, and the front end passes parameters to crop the image as needed. The specific front-end approach can be to write a public image processing method, or encapsulate the image component yourself.

Attached is the image cropping API document of commonly used image CDN service providers:

• 阿里云OSS圖片縮放
• 七牛云圖片處理

5. 減少不必要的數(shù)據(jù)請求

比如在該點(diǎn)餐頁面進(jìn)入時(shí)需要獲取定位，然后根據(jù)定位獲取最近的門店，前面兩個(gè)接口都需要請求（具體可以根據(jù)業(yè)務(wù)需求），而最后如果獲取到的距離最近的門店跟上次一樣，則不需要重新獲取店鋪詳情和商品數(shù)據(jù)。

體驗(yàn)優(yōu)化

1. 合并短時(shí)間內(nèi)的多個(gè)loading提示

還是該點(diǎn)餐頁面流程，像上文說過的，進(jìn)入頁面時(shí)需要獲取定位接口，等定位接口返回結(jié)果了再拿定位取值去獲取距離最近的店鋪，最后才是請求店鋪和商品數(shù)據(jù)。

這三個(gè)接口是串行的。此時(shí)如果我們每個(gè)接口都彈出一個(gè)loading提示，就會(huì)出現(xiàn)loading顯示一會(huì)兒，消失，又顯示一會(huì)兒，又消失……這樣的現(xiàn)象，這樣的體驗(yàn)是不太好的。

建議可以通過封裝請求，并且在請求里統(tǒng)一處理loading，來合并短時(shí)間內(nèi)多次發(fā)起請求的多個(gè)loading。

eg：

let showLoadingTimer = null;let showRequestLoading = false; // 標(biāo)記是否正在顯示loading/**
 * 封裝request
 * @param {*} {showLoading：是否需要顯示loading, options：request參數(shù)，如url，data等} 
 */function request({showLoading = true, ...options}) {    // 顯示request loading
    handleShowLoading(showLoading)

    wx.request({
        ...        complete() {            // 關(guān)閉request loading
            handleShowLoading(false)
        }
    })
}/**
 * 封裝request loading
 * 短時(shí)間內(nèi)如果調(diào)用多次showLoading，會(huì)合并在一起顯示，而不是每個(gè)都閃現(xiàn)一下
 * @param showLoading
 */function handleShowLoading(showLoading) {    if (showLoading) {        // 顯示loading
        clearTimeout(showLoadingTimer);        if (!showRequestLoading) {
            showRequestLoading = true;
            wx.showNavigationBarLoading();
            wx.showLoading({ title: "加載中", mask: true })
        }
    } else {        // 200ms后關(guān)閉loading
        showLoadingTimer = setTimeout(() =>?{
????????????showRequestLoading?=?false;
????????????wx.hideNavigationBarLoading();
????????????wx.hideLoading()
????????},?200)
????}
}復(fù)制代碼

2. 整個(gè)頁面初次加載時(shí)可以使用頁面loading動(dòng)畫或骨架屏，優(yōu)化加載中體驗(yàn)。

3. 靜默獲取、更新數(shù)據(jù)

比如這個(gè)點(diǎn)餐頁每次 onShow 都會(huì)調(diào)用定位接口和獲取最近門店接口，但是不顯示loading，用戶就沒有感知，體驗(yàn)比較好。

接口優(yōu)化

需要關(guān)注接口的粒度控制。 因?yàn)橛袝r(shí)候合并接口，前端可以減少一次請求，體驗(yàn)更好；但有時(shí)候如果接口的數(shù)據(jù)太多，響應(yīng)太慢，就可以考慮是否某部分?jǐn)?shù)據(jù)可以后置獲取，讓主要的頁面內(nèi)容先渲染出來，根據(jù)這個(gè)設(shè)計(jì)來拆分接口。

比如項(xiàng)目中的點(diǎn)餐頁面，原來購物車數(shù)據(jù)和商品規(guī)格彈窗顯示的詳情數(shù)據(jù)都是在獲取店鋪商品接口一次性返回的，而這個(gè)接口本來由于設(shè)計(jì)需要一次返回所有商品，就會(huì)造成數(shù)據(jù)量太大，而且后端需要查詢的表也更多。于是把獲取購物車，和商品詳情接口都拆分為單獨(dú)的接口，獲取店鋪商品接口的響應(yīng)時(shí)間就減少了，頁面也能更快顯示出來。

總結(jié)

其實(shí)上面提到的邏輯優(yōu)化和接口優(yōu)化很多都是細(xì)節(jié)，并不是太高深的技術(shù)，我們平時(shí)迭代的時(shí)候就可以注意。而體驗(yàn)方面的優(yōu)化則需要前端同學(xué)在前端技術(shù)以外更多關(guān)注用戶體驗(yàn)和設(shè)計(jì)方面的知識(shí)啦，而且這也是一個(gè)有追求的前端應(yīng)該具備的技能……←_←

所以嘛……技術(shù)路漫漫，大家共勉吧

相關(guān)免費(fèi)學(xué)習(xí)推薦：微信小程序開發(fā)教程

The above is the detailed content of Practice summary of small program performance optimization. For more information, please follow other related articles on the PHP Chinese website!