Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

During this period of time, because the company’s business was not very much, I had time to play with new things. Then I developed a wallpaper applet using UniApp +uniclound without service + UView UI, which was all free (no need of my own server). Then I found that the applet performance was not very good, so I made some optimization. This article is a summary of the performance processing scheme in this process.

Uniapp applet optimization
  • Image optimization
    • Wallpaper applet in the picture is very much, so we need to load and display the picture to do an optimization.
    • Lazy loading is enabled for the image component of the UView UI by default. However, the width and height of the image component need to be set manually, so we modified the image component of the UView to support the style style

props: {
 // Only support network resources, only for wechat applets
 webp: {
  type: Boolean.default: true
 },le: {type:String.default:""}},computed: {
 wrapStyle() {
  let { style,width,height } = this;
  let styles = {};
  let _height = 0;
  // add a new style (width,height)
     if(style &&! width && ! height) {let styleAry = style.split(', ');
       if(styleAry.length>0) {
         for(let i in styleAry){
           let o = i.split(':') [1];
           if(i.includes('width'))  width = o
           if(i.includes('height')){_height = o; height = o} } } }// By calling addUnit(), return units if there are any, such as percentages, px units, etc., plus RPX units if they are pure numbers
 
  styles.width = this.$u.addUnit(width);
  styles.height = this.$u.addUnit(height);
 
  if(styles.height == 'auto' && _height == 0) styles.height = '100%'
  // If circles are configured, set 50% rounded corners, otherwise use default Settings
  styles.borderRadius = this.shape == 'circle' ? '50%' : this.$u.addUnit(this.borderRadius);
  // If you set rounded corners, you must have hidden, otherwise rounded corners may not be valid
  styles.overflow = this.borderRadius > 0 ? 'hidden' : 'visible';
  if (this.fade) {
   styles.opacity = this.opacity;
   styles.transition = `opacity The ${Number(this.durationTime) / 1000}s ease-in-out`;
  }
  returnstyles; }},Copy the code

  • The list uses uniclound cloud development image. The image uses Ali Cloud storage, so you can directly crop the URL parameter of IMG with some specific parameters, such as:? x-oss-process=image/format,webp,image/resize,w_200/quality,q_100

  • The method of using webP images is the same as above. After using webP, 1m images can be compressed to a large size. The base version of wechat file is above 2.9.0 and webP can be supported, so there is no need to worry

  • List optimization usecontent-visibility: auto[Jishuin.proginn.com/p/763bfbd66…] Improves list rendering performance
  • CSS optimization reduces repackaging by centring styles from commonly used components into a single style sheet, which is then introduced in app.vue
  • Request optimization uses the cache to cache the data returned by the interface locally, and performs a hash on the data. The next time it comes in, it uses the cached data first, asks again to see if there is any update, updates the data, and then updates the cache
Uniclound optimization
  • Cloud function optimization

Cloud function processing is slow, mainly in Waiting TTFB, and then for this, so we need to keep the function hot start, improve the function start performance, mainly use setInterval, and need to stop when the page leaves, and add times

warmUp(){
  // Preheat the cloud function
  this.setDetailTimer = setInterval(() = >{
    let pages = getCurrentPages();
    if(pages[pages.length-1] ['route'] = ='pages/detail/detail') {return clearInterval(this.setDetailTimer);
    }
    this.timerNum++
    uniCloud.callFunction({
      name: 'query_map'.data: {},}); },this.warmTimer)
  this.timer =  setInterval(() = >{
    if(this.vuex_user){
      return clearInterval(this.timer)
    }
    this.timerNum++
    uniCloud.callFunction({
      name: 'user_authorize'.data:{}})
  },this.warmTimer);
},
Copy the code

The group mentioned above is the “Ape creation camp” led by @Dashuai Lao Dashuai. There are many development leaders in the group who can help each other answer questions and exchange technology. At the same time, Dashuai will also share outsourcing, sideline, etc., interested partners can leave a message “enter the group”. The above is all the content of this article, I hope this article is helpful, you can also refer to my previous articles or in the comments section to exchange your ideas and experience, welcome to explore the front end, the above small program is: mobile phone wallpaper selection emoticons, including: Select mobile phone wallpaper beautiful picture, animation wallpaper, star creative tide picture, animation head, animation male head, two yuan head, two yuan beauty