uni-app开发微信小程序时，有哪些性能优化的技巧

大家好，我是威哥，在使用uni-app开发微信小程序时，性能优化是提升用户体验的关键。今天的内容，整理了以下13个有效的性能优化技巧，供你在开发中参考：

1. 减少页面层级和组件嵌套：

减少页面层级和组件嵌套是前端性能优化中的常见做法，它有助于减少浏览器的渲染负担，提高页面的响应速度。我们通过以下优化前后的示例对比来说明：

优化前：

假设我们有一个电商应用的商品详情页，页面结构如下：

<view class="product-detail">
  <view class="product-header">
    <view class="product-title">一条瑜伽裤</view>
    <view class="product-price">￥199</view>
  </view>
  <view class="product-body">
    <view class="product-image">
      <image src="path/to/img-ku"></image>
    </view>
    <view class="product-info">
      <view class="info-item">
        <text>品牌：</text>
        <text>VG牌</text>
      </view>
      <view class="info-item">
        <text>产地：</text>
        <text>东莞</text>
      </view>
      <!-- 更多 info-item -->
    </view>
  </view>
  <view class="product-footer">
    <button class="buy-button">购买</button>
  </view>
</view>

在这个例子中，product-detail 下有三个直接子元素：product-header、product-body、product-footer。product-body 下又嵌套了 product-image 和 product-info，而 product-info 下还有多个 info-item。

优化后：

我们可以将一些不需要单独样式或行为的子元素合并到父元素中，以减少层级：

<view class="product-detail">
  <view class="product-header">
    <text class="product-title">一条瑜伽裤</text>
    <text class="product-price">￥199</text>
  </view>
  <image class="product-image" src="path/to/image"></image>
  <view class="product-info">
    <view class="info-item">
      <text>品牌：</text>
      <text>VG牌</text>
    </view>
    <view class="info-item">
      <text>产地：</text>
      <text>东莞</text>
    </view>
    <!-- 更多 info-item -->
  </view>
  <button class="product-footer buy-button">购买</button>
</view>

在这个优化后的示例中，我们做了以下改动：

product-title 和 product-price 直接作为 product-header 的子元素，而不是嵌套在另一个 <view> 中。
product-image 不再需要嵌套在 product-body 中，可以直接作为 product-detail 的子元素。
buy-button 合并到 product-footer 中，并移除了 product-footer 的嵌套。

优化说明：

减少DOM元素数量：优化后的代码减少了不必要的 <view> 元素，这减少了DOM树的深度，使得浏览器渲染成本降低。
简化结构：简化的页面结构使得维护和理解代码变得更加容易。
提高性能：较少的DOM操作和更少的重排重绘，可以提高页面的响应速度和流畅度。

通过这样的优化，我们能够提升页面的性能，使得用户在使用小程序时能够获得更好的体验。

2. 避免频繁的数据更新：

避免频繁的数据更新是提升性能的一个重要方面，特别是在数据绑定频繁更新时，可能会导致页面渲染性能问题。以下是优化前后的示例对比说明，我们来看一下：

优化前：

假设我们有一个商品列表页面，每个商品项都有一个“加入购物车”的按钮，点击后商品数量会增加。我们可能会这样编写代码：

<template>
  <view class="product-list">
    <view v-for="(product, index) in products" :key="index" class="product-item">
      <text class="product-name">{{ product.name }}</text>
      <text class="product-quantity">{{ product.quantity }}</text>
      <button @click="addToCart(product)">加入购物车</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: '商品1-瑜伽裤', quantity: 0 },
        { name: '商品2-瑜伽衣', quantity: 0 },
        // 更多商品
      ]
    };
  },
  methods: {
    addToCart(product) {
      product.quantity += 1;
    }
  }
};
</script>

在这个例子中，每次点击“加入购物车”按钮，都会触发 addToCart 方法，该方法直接修改了 product.quantity 的值，导致视图重新渲染。

优化后：

我们可以优化数据更新的方式，减少不必要的数据绑定和视图渲染：

<template>
  <view class="product-list">
    <view v-for="(product, index) in products" :key="index" class="product-item">
      <text class="product-name">{{ product.name }}</text>
      <text class="product-quantity">{{ product.quantity }}</text>
      <button @click="addToCart(index)">加入购物车</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: '商品1-瑜伽裤', quantity: 0 },
        { name: '商品2-瑜伽衣', quantity: 0 },
        // 更多商品
      ]
    };
  },
  methods: {
    addToCart(index) {
      this.products[index].quantity += 1;
    },
    updateQuantity(product) {
      this.$set(this.products, product.index, { ...product });
    }
  }
};
</script>

在这个优化后的示例中，我们做了以下改动：

addToCart 方法现在接收商品的索引而不是商品对象本身。
添加了一个新的 updateQuantity 方法，用于更新商品数量，并触发视图更新。

优化说明：

减少数据绑定：通过避免直接在事件处理函数中修改数据，我们可以减少数据绑定的更新次数。
使用 $set 方法：Vue 提供了 $set 方法来确保对象属性的添加和删除能够触发视图更新。在这个例子中，我们可以使用 $set 来更新商品数量，而不是直接修改 product.quantity。
避免不必要的渲染：通过减少数据更新的次数，我们可以避免不必要的视图渲染，从而提高性能。

通过这样的优化，我们可以减少数据更新对性能的影响，使得页面响应更加迅速，提升用户体验。

3. 使用小程序自带组件：

在微信小程序开发中，使用小程序自带组件而不是自定义组件可以显著提升性能。这是因为自带组件经过了微信团队的优化，能够更高效地渲染和更新。以下是优化前后的代码示例对比，来看一下：

优化前：

假设我们正在开发一个商品列表页，可能会使用自定义的<custom-list-item>组件来展示每个商品项：

<!-- 在页面 wxml 中使用自定义组件 -->
<view class="product-list">
  <custom-list-item wx:for="{{products}}" wx:key="id" product="{{item}}"></custom-list-item>
</view>

自定义组件<custom-list-item>可能包含复杂的结构和样式，增加了渲染的负担。

优化后：

我们改用微信小程序提供的<view>和<text>等基础组件来实现同样的功能：

<!-- 在页面 wxml 中使用小程序基础组件 -->
<view class="product-list">
  <view wx:for="{{products}}" wx:key="id" class="product-item">
    <text class="product-name">{{item.name}}</text>
    <text class="product-price">{{item.price}}</text>
  </view>
</view>

在这个优化后的示例中，我们直接使用<view>和<text>标签来展示商品信息，减少了自定义组件的使用，从而降低了页面的渲染时间。

优化说明：

减少组件嵌套：使用基础组件代替自定义组件，减少了组件嵌套的层级，简化了DOM树。
提高渲染效率：基础组件由于其简单性，能够更快地被渲染，特别是在列表渲染等高频更新的场景中。
降低内存占用：自定义组件可能会包含额外的逻辑和样式，这会增加内存的占用。使用基础组件可以减少不必要的内存使用。

通过这样的优化，是不是提升小程序的渲染性能了呢，使得页面滑动更加流畅，提升用户体验。

4. 优化图片资源：

优化图片资源是提升小程序性能的重要手段，尤其是在移动网络环境下，合理的图片优化可以显著减少加载时间，提升用户体验。以下是优化前后的代码示例对比：

优化前：

在小程序中，我们可能会直接使用较大的图片资源，没有进行任何优化：

<!-- 在 wxml 中直接使用大图 -->
<image src="path/to/large-image.jpg" class="product-image"></image>

如果这里的large-image.jpg是一个高分辨率的图片，加载时间较长，就会影响用户体验。

优化后：

我们可以采取以下措施进行优化：

图片压缩：使用工具压缩图片，减少文件大小。
图片懒加载：仅在图片即将进入视口时才开始加载。
使用合适的图片格式：如WebP格式，它通常比JPEG或PNG格式的文件更小。
使用CDN托管：将图片资源托管在内容分发网络（CDN）上，加快加载速度。

优化后的代码可能如下：

<!-- 在 wxml 中使用优化后的图片 -->
<image src="https://cdn.example.com/optimized-image.jpg" class="product-image"></image>

在小程序的app.json或页面的.json配置文件中，可以配置图片的懒加载：

{
  "lazyLoad": true
}

优化说明：

通过压缩工具减小图片文件的大小，而不损失太多视觉质量。
通过延迟非视口内图片的加载，减少初次页面加载的数据量，提升首屏加载速度。
利用CDN的分布式服务器，用户可以从距离自己最近的服务器获取资源，加快加载速度。
WebP等现代图片格式在保持相同质量的前提下，文件大小通常更小。

通过这样的优化，可以减少图片资源对小程序性能的影响，提高页面的加载速度和用户体验。

5. 分页加载大量数据：

在微信小程序中，处理大量数据时，分页加载是一种常见的优化手段。以下是优化前后的代码示例对比：

优化前：

在没有进行分页处理的情况下，可能会一次性加载所有数据，这会导致加载缓慢，用户体验差：

// 假设有一个获取所有数据的方法
getData() {
  wx.request({
    url: 'https://api.vg.com/data',
    success: (res) => {
      this.setData({
        items: res.data
      });
    }
  });
}

这种方法会一次性请求所有数据，如果数据量大，会导致页面响应慢。

优化后：

采用分页加载，每次只加载一部分数据，用户可以触发加载更多或者上拉加载更多：

// 页面数据
data: {
  items: [], // 当前页面的数据列表
  currentPage: 1, // 当前页码
  pageSize: 10, // 每页显示的条数
  hasMore: true // 是否还有更多数据
},

// 加载数据的方法
loadData() {
  if (!this.data.hasMore) {
    return; // 如果没有更多数据，则不执行加载
  }
  wx.request({
    url: 'https://api.vg.com/data',
    data: {
      page: this.data.currentPage,
      pageSize: this.data.pageSize
    },
    success: (res) => {
      let newItems = this.data.items.concat(res.data); // 将新数据追加到旧数据后面
      this.setData({
        items: newItems,
        currentPage: this.data.currentPage + 1
      });
      if (res.data.length < this.data.pageSize) {
        this.setData({
          hasMore: false // 如果返回的数据少于pageSize，说明没有更多数据了
        });
      }
    }
  });
},

// 上拉触底加载更多
onReachBottom() {
  this.loadData();
},

// 页面加载时触发
onLoad() {
  this.loadData();
}

在这个优化后的示例中，我们通过currentPage和pageSize控制每次请求的数据量，并且只有当用户滚动到页面底部时才会触发onReachBottom事件，加载更多数据。

优化说明：

分页加载可以减少单次请求的数据量，避免一次性加载大量数据导致的性能问题。
用户可以更快地看到首批数据，提升用户体验。
服务器和客户端都不需要一次性处理大量数据，节省了资源消耗。

通过分页加载，我们可以有效地提升小程序处理大量数据时的性能，使得用户体验更加流畅。

6. 异步处理复杂操作：

在微信小程序中，异步处理复杂操作是一种常见的优化手段，特别是在处理数据加载、网络请求或计算密集型任务时。以下是优化前后的代码示例对比：

优化前：

在没有进行异步处理的情况下，可能会直接在主线程中执行复杂操作，这会导致界面卡顿，举个栗子：

// 假设有一个计算密集型的操作
calculateData() {
  let result = 0;
  for (let i = 0; i < 10000000; i++) {
    result += Math.sqrt(i);
  }
  this.setData({
    calculationResult: result
  });
}

在这个示例中，计算操作直接在主线程中执行，如果计算量很大，会导致界面无法响应用户操作。

优化后：

我们使用 setTimeout 或者微信小程序提供的 worker 线程来异步处理复杂操作，避免阻塞主线程：

// 使用 setTimeout 异步处理
calculateData() {
  setTimeout(() => {
    let result = 0;
    for (let i = 0; i < 10000000; i++) {
      result += Math.sqrt(i);
    }
    this.setData({
      calculationResult: result
    });
  }, 0);
}

// 或者使用 worker 线程异步处理（需要在 app.json 中开启 worker）
// 在 js 文件中创建 worker
if (wx.canIUse('worker')) {
  const worker = new Worker();
  worker.onMessage((message) => {
    this.setData({
      calculationResult: message.data
    });
  });
  worker.postMessage('start');
  
  // 监听 worker 线程的消息
  worker.onMessage(function (event) {
    this.setData({
      calculationResult: event.data
    });
  });

  // 处理 worker 线程发送的数据
  worker.postMessage('Hello Worker');
}

在这个优化后的示例中，我们通过 setTimeout 将计算操作放在异步队列中执行，或者使用 worker 线程来处理，这样主线程仍然可以响应用户操作，提升用户体验。

优化说明：

通过异步处理，避免了复杂操作阻塞主线程，使得界面可以保持流畅。
用户操作可以得到及时响应，不会因为后台操作而等待。
用户在使用小程序时，不会因为长时间的计算操作而感到卡顿或延迟。

这样是不是可以让用户体验更加赞呢。

7. 优化启动速度：

在uni-app中，优化启动速度是提升用户体验的重要方面。以下是一些优化启动速度的示例和方法：

优化前（未进行启动速度优化）：

// 在App.vue中全局引入大量样式和脚本
import Vue from 'vue'
import App from './App'

// 全局样式
import './styles/global.scss'
// 全局插件
import './plugins/global-plugin'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

在这种情况下，应用在启动时会加载所有全局样式和插件，这可能会导致启动速度变慢。

优化后（进行启动速度优化）：

// 在App.vue中按需引入资源
import Vue from 'vue'
import App from './App'

// 仅引入必要的全局样式
import './styles/essential.scss'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

在优化后的示例中，我们只引入了必要的全局样式，减少了不必要的资源加载，从而加快了启动速度。

优化说明：

只加载应用启动时真正需要的资源，减少不必要的资源加载。
使用Webpack等构建工具进行代码分割，将代码拆分成多个小块，按需加载。
利用uni-app的分包加载功能，将应用分割成多个子包，减少主包体积。
对资源进行优先级排序，确保关键资源优先加载。
合理利用缓存，减少重复加载资源的次数。

在Webpack中，代码分割（Code Splitting）是一种常用的优化手段，它允许将代码分离成不同的包（bundles），然后可以按需加载或并行加载这些文件。这不仅可以使应用的初始加载更快，还可以控制资源加载的优先级，从而显著减少加载时间。以下是一些代码分割的示例和优化方法：

优化前（未进行代码分割）：

假设你有一个应用，其中包含了多个模块，这些模块都打包到一个主bundle中：

// main.js
import moduleA from './moduleA';
import moduleB from './moduleB';

function init() {
  // 初始化代码
  moduleA.doSomething();
  moduleB.doSomething();
}
init();

在这种情况下，所有模块都在初始加载时被加载，即使某些模块可能稍后才会用到或根本不会用到。

优化后（使用动态导入进行代码分割）：

使用Webpack的动态导入功能，可以将模块分割成不同的chunks，并在需要时加载：

// main.js
function init() {
  // 初始化代码
  import('./moduleA').then(moduleA => {
    moduleA.default.doSomething();
  });

  // 假设moduleB只有在用户点击按钮后才需要加载
  document.getElementById('loadButton').addEventListener('click', () => {
    import('./moduleB').then(moduleB => {
      moduleB.default.doSomething();
    });
  });
}
init();

在这个优化后的示例中，moduleA 在应用启动时加载，而 moduleB 则在用户点击按钮时才加载。这样可以减少应用的初始加载时间，并在需要时才加载额外的代码。

优化说明：

通过使用 import() 语法，Webpack会将导入的模块分割成单独的chunk，并在运行时按需加载。
只加载应用启动时真正需要的代码，从而减少初始加载的大小。
根据用户的行为或应用的状态来加载代码，这样可以提高性能并减少不必要的资源加载。

8. 使用nvue代替vue：

在uni-app中，使用nvue代替vue可以显著提升页面性能，尤其是在App端。以下是优化前后的代码示例对比：

优化前（使用vue页面）：

<template>
  <view class="container">
    <view v-for="(item, index) in list" :key="index" class="item">
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [{ text: '短裤' }, { text: '长裤' }, ...]
    };
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
}
.item {
  margin-bottom: 10px;
}
</style>

在这个例子中，我们使用了vue页面来渲染一个列表，每个列表项都是一个简单的文本。

优化后（使用nvue页面）：

<template>
  <view class="container">
    <view v-for="(item, index) in list" :key="index" class="item">
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [{ text: '短裤' }, { text: '长裤' }, ...]
    };
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
}
.item {
  margin-bottom: 10px;
}
</style>

在nvue页面中，代码结构与vue页面相似，但是渲染引擎不同。nvue页面使用原生渲染引擎，可以提供更好的性能和流畅性。

优化说明：

nvue页面基于weex定制的原生渲染引擎，可以实现页面原生渲染，提高页面流畅性。这对于滚动列表和动画效果较多的页面尤其有效。
nvue页面减少了逻辑层和视图层之间的通信损耗，从而减少了资源消耗。
对于需要高性能滚动列表、复杂动画或者原生控件覆盖的场景，使用nvue是更好的选择。

需要注意的是，nvue页面的CSS支持有限，因此可能需要对样式进行一些调整。

9. 避免使用大图：

在uni-app开发中，避免使用大图是优化性能的重要措施之一。以下是优化前后的代码示例对比：

优化前（使用大图）：

<template>
  <view>
    <image src="path/to/large-image.jpg" class="large-image"></image>
  </view>
</template>

<style>
.large-image {
  width: 100%;
  height: auto;
}
</style>

在这个例子中，我们直接在页面中使用了一张大图，这可能会导致页面加载缓慢，增加内存消耗。

优化后（使用压缩后的图片或适当尺寸的图片）：

<template>
  <view>
    <image src="path/to/compressed-image.jpg" class="optimized-image"></image>
  </view>
</template>

<style>
.optimized-image {
  width: 100%;
  height: auto;
}
</style>

在优化后的示例中，我们使用了压缩后的图片或适当尺寸的图片来替代原始的大图。这可以通过使用图片压缩工具如TinyPNG或在线图片压缩工具来实现。

10. 优化数据更新：

在 uni-app 中，定义在 data 里面的数据每次变化时都会通知视图层重新渲染页面。所以如果不是视图所需要的变量，可以不定义在 data 中，以避免造成资源浪费。优化数据更新是一个关键的步骤，以提高应用的性能和用户体验。以下是优化前后的代码示例对比：

优化前（频繁更新整个页面数据）：

export default {
  data() {
    return {
      items: [一些敏感数据，你需要自己模拟一下哦], // 存储列表数据
      otherData: {其它数据} // 其他不相关数据
    };
  },
  methods: {
    fetchData() {
      // 假设这个方法从服务器获取数据
      this.items = response.data.items;
      this.otherData = response.data.otherData;
    }
  }
}

在这个例子中，每次调用fetchData方法时，都会更新整个页面的数据，包括列表数据和其他不相关的数据。这可能导致不必要的渲染和性能损耗。

优化后（仅更新必要的数据）：

export default {
  data() {
    return {
      items: [一些敏感数据，你需要自己模拟一下哦] // 仅存储列表数据
    };
  },
  methods: {
    fetchItems() {
      // 只更新列表数据，不更新其他不相关的数据
      this.items = response.data.items;
    }
  }
}

在优化后的示例中，我们只更新了视图真正需要的数据，即列表数据items，而没有更新其他不相关的数据。这样可以减少不必要的数据绑定更新，提高性能。

优化说明：

不是所有数据变化都需要反映到视图上，有时候只需要更新部分数据。

11. 长列表优化：

长列表中如果每个 item 有一个点赞按钮，点击后点赞数字+1，此时点赞组件必须是一个单独引用的组件，才能做到差量数据更新。否则会造成整个列表数据重载。

优化前（使用普通循环渲染）：

<template>
  <scroll-view scroll-y="true" class="scroll-view">
    <view v-for="(item, index) in longList" :key="index">
      {{ item.content }}
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      longList: Array(1000).fill().map((_, index) => ({ content: `Item ${index + 1}` }))
    };
  }
};
</script>

<style>
.scroll-view {
  height: 100%;
}
</style>

在这个例子中，我们使用了一个scroll-view组件来渲染一个长列表，列表中的每个项都是通过v-for指令循环生成的。当列表项非常多时，这种渲染方式会导致性能问题，因为所有的列表项都会被渲染，即使它们不在屏幕内。

优化后（使用`<list>`组件）：

<template>
  <list class="list">
    <cell v-for="(item, index) in longList" :key="index">
      {{ item.content }}
    </cell>
  </list>
</template>

<script>
export default {
  data() {
    return {
      longList: Array(1000).fill().map((_, index) => ({ content: `Item ${index + 1}` }))
    };
  }
};
</script>

<style>
.list {
  height: 100%;
}
</style>

在优化后的示例中，我们使用了<list>组件来渲染长列表。<list>组件是专门为长列表优化的，它会自动回收不在屏幕内的列表项的渲染资源，从而提高性能和流畅度。这种方式特别适合App端的nvue页面，因为它使用了原生的渲染机制。

优化说明：

通过使用<list>组件，只有用户可见区域内的列表项会被渲染，从而减少了不必要的渲染和内存消耗。
<list>组件的滚动性能通常优于<scroll-view>，因为它专门为长列表优化，能够提供更流畅的滚动体验。
通过回收不在屏幕内的列表项资源，<list>组件减少了内存的使用，避免了因渲染大量列表项而导致的内存溢出问题。

12. 优化页面切换动画：

页面初始化时若存在大量图片或原生组件渲染和大量数据通讯，会发生新页面渲染和窗体进入动画抢资源，造成页面切换卡顿、掉帧。我们可以延时渲染图片或复杂原生组件，分批进行数据加载。

优化前（无动画或简单动画）：

<template>
  <view @click="goToNextPage">
    点击前往下一页
  </view>
</template>

<script>
export default {
  methods: {
    goToNextPage() {
      uni.navigateTo({
        url: 'path/to/next/page'
      });
    }
  }
}
</script>

这个示例中页面切换时没有特别的动画效果，或者只使用了简单的淡入淡出效果。

优化后（自定义动画效果）：

<template>
  <view @click="goToNextPage">
    点击前往下一页
  </view>
</template>

<script>
export default {
  methods: {
    goToNextPage() {
      const animation = uni.createAnimation({
        duration: 300, // 动画持续时间
        timingFunction: 'ease-in-out', // 动画的效果
      });
      animation.scale(0.95, 0.95).rotate(15).step(); // 缩小并旋转
      this.setData({
        animationData: animation.export(),
      });
      uni.navigateTo({
        url: 'path/to/next/page',
        animationType: 'pop-in', // 使用系统动画
        animationDuration: 300, // 动画持续时间，与上面保持一致
      });
    }
  }
}
</script>

<style>
/* 可以在这里定义动画样式 */
</style>

在优化后的示例中，我们使用了uni.createAnimation来创建一个自定义的动画效果，使得点击时有一个缩小并旋转的动画，然后页面切换时使用了系统的pop-in动画效果。

优化说明：

通过uni.createAnimation可以创建复杂的动画效果，使页面切换更加生动有趣。
在uni.navigateTo或uni.redirectTo等页面跳转方法中，可以指定系统提供的动画效果，如pop-in、pop-out等。
保持自定义动画和系统动画的持续时间一致，以确保动画效果的流畅性。
在页面初始化时，如果有大量图片或原生组件渲染和大量数据通讯，可能会与页面进入动画抢资源，造成卡顿或掉帧。建议延时渲染图片或复杂原生组件，分批进行数据通信，以减少一次性渲染的节点数量。

13. 优化样式渲染速度：

如果页面背景是深色，在vue页面中可能会发生新窗体刚开始动画时是灰白色背景，动画结束时才变为深色背景，造成闪屏。此时需将样式写在 App.vue 里，可以加速页面样式渲染速度。

优化前（使用大量DOM和复杂的CSS）：

<template>
  <view class="container">
    <view v-for="(item, index) in items" :key="index" class="item">
      <text class="text">{{ item.text }}</text>
    </view>
  </view>
</template>

<style>
.container {
  background-image: url('path/to/large-background-image.jpg');
}
.item {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.text {
  font-size: 16px;
  color: #333;
}
</style>

在这个例子中，页面使用了大型背景图片，并且每个列表项都有复杂的样式，这可能导致样式计算和渲染变慢。

优化后（减少DOM数量和简化CSS）：

<template>
  <view class="container">
    <text v-for="(item, index) in items" :key="index" class="text">{{ item.text }}</text>
  </view>
</template>

<style>
.container {
  background-color: #fff; /* 使用纯色背景代替图片 */
}
.text {
  font-size: 16px;
  color: #333;
  margin: 10px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  box-shadow: none; /* 移除阴影效果 */
}
</style>

在优化后的示例中，我们做了以下改动：

移除了.item类，直接将文本包裹在<text>标签中，减少了DOM数量。
使用纯色背景代替大型背景图片，减少了图片加载时间。
简化了.text类的样式，移除了阴影效果，减少了样式计算的复杂度。

优化说明：

减少页面中的DOM元素数量，可以减少浏览器的渲染负担，提高渲染效率。
简化CSS样式，避免复杂的盒模型计算和阴影效果，可以减少样式计算时间。
使用小图或纯色背景代替大图，可以减少图片加载时间，加快页面渲染速度。

通过这样的优化，可以显著提升页面的渲染速度，使得用户体验更加流畅。同时，也要注意在App.vue中设置全局样式，以加速页面样式的渲染速度。如果是在App端，还可以在pages.json中配置页面的原生背景色，以避免新页面进入时背景闪白的问题。

最后

以上优化小技巧，可以显著提升微信小程序的响应速度和用户体验，你还有哪些在实际开发中的经验，可以在评论区与大家一起分享，感谢你的支持，欢迎关注威哥爱编程，创造不易，点个赞呗。

标签：product,渲染,微信,app,data,uni,页面,优化,加载
From： https://blog.51cto.com/u_10833761/12107684

uni-app开发微信小程序时，有哪些性能优化的技巧

1. 减少页面层级和组件嵌套：

优化前：

优化后：

优化说明：

2. 避免频繁的数据更新：

优化前：

优化后：

优化说明：

3. 使用小程序自带组件：

优化前：

优化后：

优化说明：

4. 优化图片资源：

优化前：

优化后：

优化说明：

5. 分页加载大量数据：

优化前：

优化后：

优化说明：

6. 异步处理复杂操作：

优化前：

优化后：

优化说明：

7. 优化启动速度：

优化前（未进行启动速度优化）：

优化后（进行启动速度优化）：

优化说明：

优化前（未进行代码分割）：

优化后（使用动态导入进行代码分割）：

优化说明：

8. 使用nvue代替vue：

优化前（使用vue页面）：

优化后（使用nvue页面）：

优化说明：

9. 避免使用大图：

优化前（使用大图）：

优化后（使用压缩后的图片或适当尺寸的图片）：

10. 优化数据更新：

优化前（频繁更新整个页面数据）：

优化后（仅更新必要的数据）：

优化说明：

11. 长列表优化：

优化前（使用普通循环渲染）：

优化后（使用<list>组件）：

优化说明：

12. 优化页面切换动画：

优化前（无动画或简单动画）：

优化后（自定义动画效果）：

优化说明：

13. 优化样式渲染速度：

优化前（使用大量DOM和复杂的CSS）：

优化后（减少DOM数量和简化CSS）：

优化说明：

最后

相关文章

赞助商

阅读排行

优化后（使用`<list>`组件）：