This article is a little wordy, mainly to record the idea, wordy on the wordy point ha ha
Problems encountered
Recently, I encountered a problem in the process of developing a small program. On an iPhone, the home page of the small program would be stuck for three or four seconds after it was loaded for the first time. At this time, any page interaction would be stuck and the operation was not smooth. Android phone is really smooth, maybe android phone performance beyond Apple bar. But my mobile phone is Apple, for I often use a variety of applications, the page load after three or four seconds to operate, is absolutely intolerable, let alone the user…
Train of thought
The home page does have a lot of interfaces. At first, I thought it was too many interfaces and too much data that caused the lag. I tried to shield some of them but it was still true. “, accidentally refactoring another page, discovered the trick. The reconstructed page is a commodity classification page. The left side is a category label that slides up and down, and the right side shows the commodity list queried by the corresponding label. The object array is used to store the relevant data under each category label, and the structure is as follows:
Data: {pageData: [], // store the data corresponding to each category defaultParams: {// categoryId:'',// categoryId list: [] requesting: false, end: false, empty: false, pageNum, pageSize: 20,},}Copy the codeThe reason why the array is used is to store the data after each request interface. When a clicked classification is repeatedly clicked, there is no need to request the interface again, and the list of goods can be directly rendered from the array according to the classification index, which is a means of optimization.
Can see after click on the TAB page classification of interaction, the first is to load data, back for a second time to click directly shows a list of several content can be seen after click on the TAB page classification of interaction, the first is to load data, back for a second time click page shows a list of several girong can see classification directly click tag after interaction, for the first time is to load the data, Click the second time to directly display the list number content, you can see the interaction after clicking the label on the classification page, the first time is to load data, click the second time to directly display the list data
Say so much because the home page is also composed of two parts of classification and commodity list, and the stored data is also pageData. The two pages are so similar, but the classification page does not have the problem of lag. As the protagonist of the home page, of course, than the classification page to more SAO operation to show its status, and the SAO operation is sliding around the whole page to switch the classification module
Classification page only click the classification TAB switch, there is no sliding interaction.
Swiper module is used for swiper module, and there are about 20 classified data, that is to say, 20 swiper-items need to be initialized, which contains the list of goods. We searched this component in wechat open community, and sure enough, we all encountered the problem of too many pages of this component. I didn’t immediately suspect Swiper, but one key point brought me closer to it: The pageData of the classification page does not initialize all the data according to the number of categories after the initial test of the page, that is to say, there are 20 categories, then initialize 20 array elements, but initialize the data under the corresponding index after the classification label click, because there is no need to initialize all the data. Here with the home page is different, turn the page code, discovered actually begin to initialize all of the data, in addition to the classification of goods list, there is no data more content, will not because the pageData, with a big question mark and a little sporadic, initialization logic, to modify the front page to page and classification, Click on the classification after the initialization of pageData index data, as I expected, the page after loading is not stuck, immediately click slide what operation also become no sense, Ho ho very happy, finally let me catch the reason, the original is the pageData array caused by too much data.
Without further ado, change to the same initialization logic as the classification, but…. The problem is that clicking the category guide is fine, but ignoring the interaction of swiping left and right, and then….. Can’t slide (bitter inside…..) , like this:
Swiper can only slide….. if seiper-item is present This is awkward, because it conflicts with clicking on which to initialize which.
The solution
Not only to ensure that pageData array elements initialized less, but also to ensure that the left and right slide, using pagination method may be able to, after a variety of attempts, I finally got the result. Ok, without further ado, let’s talk about the idea: You need to initialize and load data when you click the TAB or swipe swiper. Clicking the TAB will trigger a click event, swiper will trigger a swipe event, Initialize pageData when these two events are triggered. After the whole page is initialized, three or four swiper-Items can be loaded first.
Here’s how:
data: {current: 0.// The selected category index
pageTypes: [{name:' '.id:' '.index:0}].// Categorize data
pageData: [].// List data
defaultParams: { // the object in pageData
categoryId: ' '.requesting: false.end: false.empty: false,
pageNum,
pageSize: 20.list: []}},// Initializes the current TAB and the previous and subsequent TAB data. Current is the index of the selected TAB
_loadRemainPageData(current) {
const { pageTypes, pageData, defaultParams } = this.data
// Initialize pageData by intercepting the array of categories according to the selected category index
let typeFragment = pageTypes.slice(current - 1, current + 2)
let addNum = 0
typeFragment.forEach(item= > {
//pageType = index; // pageData = index; // pageData = index
if (!this.data.pageData[item.index]) {// Prevent repeated initialization
addNum++ // Count the number of pageTypes initialized after each interceptionpageData[item.index] = { ... defaultParams,categoryId: item.id
}
}
})
if (addNum > 0) this.setData({ pageData })
}
Copy the codeThis method is used for these two events:
// Classified TAB switching event
hanldeTabType(e) {
let { index, item } = e.detail
this.setData({
current: index,
categoryId: item.id,
})
let currentPageData = this._getCurrentData()
// Click TAB to switch pages to initialize the value of the corresponding index of pageData
if(! currentPageData) {this._loadRemainPageData(index)
currentPageData = this._getCurrentData()
if (currentPageData.list.length === 0) this._getSpuList('refresh', pageNum)
}
},
// Page slide event
handleAnimationFinish(e) {
const current = e.detail.current
this.setData({
current,
})
this._loadRemainPageData(current)
let curpageData = this._getCurrentData()
if (curpageData.list.length === 0) this._getSpuList('refresh', pageNum)
},
/ * * *@description: Gets data for the current active page *@param {*}
* @return {*} The data corresponding to the current index */
_getCurrentData() {
return this.data.pageData[this.data.current]
},
Copy the codeThese two events are used to perform initialization methods. Whether it is clicking the classification from front to back or clicking the penultimate number of the classification, the corresponding data initialization of pageData can be guaranteed, and swiper can also keep sliding. The problem of immobility was solved, and the problem of stalling was solved by paging, but
When the amount of data is very large and the number of clicks from the last few of the classification is too much, there will still be a lag after clicking because of too much pageData, because, for example, when clicking on the last 19, the data of pageData is like this:
The rendered DOM looks like this:
Because the array length has changed, swiper-Item will still be rendered. I saw an article in wechat community. I simplified the DOM that is not displayed as much as possible, and replaced the previous complex swiper-Item with an empty one
This is faster, after the page initialization, click on the countdown several categories appear card ton is also basically no sense
summary
However, when there is a lot of data, there will still be a lag problem when clicking on the last few categories, but the above method is sufficient to solve the performance problem of online heavy congestion. B: well… Has not thought of a better way, if there is a better way to hope that we can share learning hee hee
Summary of the article is very time-consuming, after reading feel useful can give a small praise, than the heart ^-^