企业官网建设流程全解析

本文面向有一定小程序开发经验的工程师，系统梳理性能优化的关键节点，提供可直接落地的代码方案。

一、小程序性能指标体系

在动手优化之前，先理清"性能好"到底意味着什么。微信小程序的性能可以从以下几个核心指标来衡量：

微信开发者工具中提供了Audits 面板（代码质量扫描 + 性能评分），以及Performance 面板（运行时性能追踪）。两者配合使用可以覆盖从加载阶段到运行时的全链路性能分析。

此外，微信官方提供了wx.getPerformance()API，可以获取小程序运行时的性能数据：

javascript复制

// 获取小程序性能数据 const performance = wx.getPerformance() const entries = performance.getEntries() console.log('性能条目:', entries) // 监听性能指标 performance.createObserver((entryList) => { entryList.getEntries().forEach(entry => { console.log(`[${entry.entryType}] ${entry.name}: ${entry.duration}ms`) }) })

二、启动速度优化

启动速度是用户对小程序的第一印象。微信小程序的启动过程包括：下载代码包 → 初始化运行环境 → 注入基础库 → 执行 app.js → 渲染首页。优化重心放在"减少代码包体积"和"延迟非关键逻辑"上。

2.1 分包预下载

分包加载是降低主包体积的有效手段，而预下载则能在用户无感知的情况下提前加载分包，避免跳转时的等待。

json复制

// app.json { "pages": [ "pages/index/index", "pages/home/home" ], "subpackages": [ { "root": "subpkg-order", "pages": [ "pages/list/list", "pages/detail/detail" ] }, { "root": "subpkg-user", "pages": [ "pages/profile/profile", "pages/settings/settings" ] } ], "preloadRule": { "pages/index/index": { "network": "all", "packages": ["subpkg-order"] }, "pages/home/home": { "network": "wifi", "packages": ["subpkg-user"] } } }

关键参数说明：

• network:all表示所有网络环境预下载，wifi表示仅 WiFi 环境下预下载
• packages: 指定要预下载的分包 root 名称
• 预下载时机：配置页面的onShow生命周期触发后，微信会在空闲时下载

实践建议：首页配置预下载高频使用的分包，但不要一次预下载太多（建议不超过2个），否则反而拖慢首屏。

2.2 异步化 API

小程序中很多 API 是异步的，但开发者经常在onLoad中串行调用多个接口，导致页面数据迟迟不能渲染。

javascript复制

// ❌ 串行调用，总耗时 = 接口A + 接口B + 接口C Page({ async onLoad() { const user = await this.fetchUser() const orders = await this.fetchOrders(user.id) const banners = await this.fetchBanners() this.setData({ user, orders, banners }) } }) // ✅ 并行调用，总耗时 = max(接口A, 接口B, 接口C) Page({ onLoad() { Promise.all([ this.fetchUser(), this.fetchOrders(), this.fetchBanners() ]).then(([user, orders, banners]) => { this.setData({ user, orders, banners }) }) }, fetchUser() { return new Promise((resolve) => { wx.request({ url: 'https://api.example.com/user', success: res => resolve(res.data) }) }) }, fetchOrders() { return new Promise((resolve) => { wx.request({ url: 'https://api.example.com/orders', success: res => resolve(res.data) }) }) }, fetchBanners() { return new Promise((resolve) => { wx.request({ url: 'https://api.example.com/banners', success: res => resolve(res.data) }) }) } })

更进一步，可以使用wx.preloadAssets（基础库 2.10.0+）预加载资源：

javascript复制

// app.js App({ onLaunch() { // 预加载关键图片资源 wx.preloadAssets({ data: [ { type: 'image', src: 'https://cdn.example.com/banner.png' }, { type: 'image', src: 'https://cdn.example.com/logo.png' } ], success: () => { console.log('资源预加载完成') } }) } })

2.3 懒加载组件

对于首页不需要立即展示的组件，使用自定义组件的lazyLoad属性或按需渲染。

html复制

<!-- index.wxml --> <view class="container"> <!-- 首屏内容立即渲染 --> <view class="hero-section">首屏内容</view> <!-- 非首屏内容延迟渲染 --> <lazy-component wx:if="{{showLazyComponent}}" /> </view>

javascript复制

// 使用 IntersectionObserver 实现组件懒加载 Page({ data: { showLazyComponent: false }, onLoad() { this.createIntersectionObserver() .relativeToViewport() .observe('.lazy-trigger', (res) => { if (res.intersectionRatio > 0) { this.setData({ showLazyComponent: true }) } }) } })

三、渲染性能优化

渲染性能直接决定用户滑动页面、交互时的流畅度。小程序的渲染层和逻辑层运行在双线程中，setData是两者通信的唯一桥梁——也是性能问题的重灾区。

3.1 setData 优化

核心原则：减少调用频率，减小数据量，避免传递不需要的数据。

javascript复制

// ❌ 错误示范1：频繁调用 setData Page({ onScroll(e) { this.setData({ scrollTop: e.detail.scrollTop }) // 滚动事件每秒触发几十次，每次都 setData 会导致渲染层频繁重绘 } }) // ❌ 错误示范2：传递大对象全量更新 Page({ loadData() { const list = [] // 假设有 1000 条数据 for (let i = 0; i < 1000; i++) { list.push({ id: i, name: `item-${i}`, value: Math.random() }) } this.setData({ list }) // 一次性传递 1000 条数据到渲染层 } }) // ✅ 正确做法1：节流 + 精确更新 Page({ onScroll(e) { // 使用节流，16ms 对齐一帧 if (this._scrollTimer) return this._scrollTimer = setTimeout(() => { this._scrollTimer = null this.setData({ scrollTop: e.detail.scrollTop }) }, 16) } }) // ✅ 正确做法2：分批 setData Page({ loadData() { const allData = [] for (let i = 0; i < 1000; i++) { allData.push({ id: i, name: `item-${i}`, value: Math.random() }) } // 每批 50 条，分 20 次更新 const batchSize = 50 const batchLoad = (index) => { if (index >= allData.length) return const batch = allData.slice(index, index + batchSize) this.setData({ [`list[${index}]:null`]: null // 占位 }) // 使用 nextTick 保证渲染完成后再加载下一批 wx.nextTick(() => { batch.forEach((item, i) => { this.setData({ [`list[${index + i}]`]: item }) }) batchLoad(index + batchSize) }) } batchLoad(0) } })

进阶技巧：使用数据路径精确更新，避免全量覆盖：

javascript复制

// ❌ 全量更新，整个 list 都会被重新渲染 this.setData({ list: newList }) // ✅ 精确更新指定索引的数据 this.setData({ 'list[3].name': 'new-name', 'list[3].value': 100 })

3.2 WXS 替代部分逻辑

WXS（WeiXin Script）运行在渲染层，可以直接操作视图，无需经过setData通信。对于频繁触发但仅影响视图的逻辑（如格式化、简单计算），用 WXS 可以显著降低通信开销。

html复制

<!-- index.wxml --> <wxs module="format" src="./format.wxs"></wxs> <view class="price"> ￥{{format.formatPrice(price, discount)}} </view> <view class="time"> {{format.formatTime(timestamp)}} </view>

javascript复制

// format.wxs var format = { formatPrice: function(price, discount) { if (!price) return '0.00' var finalPrice = price if (discount) { finalPrice = price * (1 - discount) } return finalPrice.toFixed(2) }, formatTime: function(timestamp) { if (!timestamp) return '' var date = getDate(timestamp) var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() return year + '-' + month + '-' + day } } module.exports = format

3.3 虚拟列表

当列表数据量超过 100 条时，直接渲染所有 item 会导致明显的卡顿。虚拟列表只渲染可视区域内的 item，滚动时动态替换。

javascript复制

// components/virtual-list/virtual-list.js Component({ properties: { list: { type: Array, value: [] }, itemHeight: { type: Number, value: 80 }, // 单个 item 高度（rpx 转 px） height: { type: Number, value: 600 } // 容器高度 }, data: { visibleList: [], startIndex: 0, endIndex: 0, offsetY: 0 }, observers: { 'list, itemHeight, height': function() { this.updateVisibleList(0) } }, methods: { onScroll(e) { const scrollTop = e.detail.scrollTop this.updateVisibleList(scrollTop) }, updateVisibleList(scrollTop) { const { list, itemHeight, height } = this.data if (!list.length) return const startIndex = Math.floor(scrollTop / itemHeight) const visibleCount = Math.ceil(height / itemHeight) + 2 // 多渲染2个作为缓冲 const endIndex = Math.min(startIndex + visibleCount, list.length) const visibleList = list.slice(startIndex, endIndex).map((item, i) => ({ ...item, _index: startIndex + i })) this.setData({ visibleList, startIndex, endIndex, offsetY: startIndex * itemHeight }) } } })

html复制

<!-- components/virtual-list/virtual-list.wxml --> <scroll-view class="virtual-list" style="height: {{height}}px;" scroll-y bindscroll="onScroll" > <view style="height: {{list.length * itemHeight}}px; position: relative;"> <view style="transform: translateY({{offsetY}}px);"> <view wx:for="{{visibleList}}" wx:key="_index" style="height: {{itemHeight}}px;" > <slot name="item" item="{{item}}"></slot> </view> </view> </view> </scroll-view>

使用方式：

html复制

<!-- page.wxml --> <virtual-list list="{{orderList}}" itemHeight="{{80}}" height="{{600}}" > <view slot="item" slot-scope="item" class="order-item"> <text>{{item.name}}</text> <text>￥{{item.price}}</text> </view> </virtual-list>

四、内存优化

微信小程序的内存限制在不同设备上有差异（通常在 256MB~512MB），内存过高会被系统回收导致小程序重启。

4.1 图片懒加载

小程序的image组件自带lazy-load属性，但仅对page与scroll-view下的图片有效：

html复制

<scroll-view scroll-y class="scroll-container"> <image wx:for="{{imageList}}" wx:key="id" src="{{item.url}}" lazy-load mode="aspectFill" class="lazy-image" /> </scroll-view>

对于非滚动区域的图片，使用IntersectionObserver手动控制加载：

javascript复制

Page({ data: { images: [ { id: 1, url: '', realUrl: 'https://cdn.example.com/1.png' }, { id: 2, url: '', realUrl: 'https://cdn.example.com/2.png' } ] }, onLoad() { this.data.images.forEach((img, index) => { const observer = this.createIntersectionObserver() observer.relativeToViewport().observe(`#img-${img.id}`, (res) => { if (res.intersectionRatio > 0) { this.setData({ [`images[${index}].url`]: img.realUrl }) observer.disconnect() } }) }) } })

4.2 避免内存泄漏

常见内存泄漏场景及解决方案：

javascript复制

// ❌ 定时器未清理 Page({ onLoad() { this.timer = setInterval(() => { this.updateData() }, 1000) } // 页面销毁后定时器仍在运行 }) // ✅ 在 onUnload 中清理 Page({ onLoad() { this.timer = setInterval(() => { this.updateData() }, 1000) }, onUnload() { clearInterval(this.timer) } }) // ❌ 事件监听未移除 Page({ onLoad() { this.eventChannel = this.getOpenerEventChannel() this.eventChannel.on('update', this.handleUpdate.bind(this)) } }) // ✅ 绑定的函数保存引用，onUnload 时移除 Page({ onLoad() { this._handleUpdate = this.handleUpdate.bind(this) this.eventChannel = this.getOpenerEventChannel() this.eventChannel.on('update', this._handleUpdate) }, onUnload() { // eventChannel 在页面销毁时自动清理，但自定义事件总线需要手动移除 if (this._customBus) { this._customBus.off('update', this._handleUpdate) } } })

4.3 回收不用的组件

对于条件渲染的复杂组件，不使用时应该完全销毁而不是隐藏：

html复制

<!-- ❌ 使用 hidden，组件仍然存在于内存中 --> <complex-chart hidden="{{!showChart}}" data="{{chartData}}" /> <!-- ✅ 使用 wx:if，组件会被完全销毁 --> <complex-chart wx:if="{{showChart}}" data="{{chartData}}" />

五、网络优化

5.1 请求合并

将多个独立接口合并为一个批量接口，减少网络往返：

javascript复制

// utils/request.js const requestQueue = [] let requestTimer = null function batchRequest(options) { return new Promise((resolve, reject) => { requestQueue.push({ options, resolve, reject }) if (requestTimer) clearTimeout(requestTimer) // 16ms 内的请求合并发送 requestTimer = setTimeout(() => { const batch = requestQueue.splice(0) requestTimer = null wx.request({ url: 'https://api.example.com/batch', method: 'POST', data: { requests: batch.map(item => ({ url: item.options.url, method: item.options.method || 'GET', data: item.options.data })) }, success: (res) => { batch.forEach((item, index) => { if (res.data[index]) { item.resolve(res.data[index]) } else { item.reject(new Error('请求失败')) } }) }, fail: (err) => { batch.forEach(item => item.reject(err)) } }) }, 16) }) } module.exports = { batchRequest }

5.2 CDN 配置与 HTTP 缓存

javascript复制

// 静态资源走 CDN，并设置合理的缓存策略 const CDN_BASE = 'https://cdn.example.com' // 图片资源使用 WebP 格式（小程序支持 WebP） function getImageUrl(path, quality = 80) { return `${CDN_BASE}/images/${path}?q=${quality}&format=webp` } // 接口缓存：对不常变化的数据使用本地缓存 function fetchWithCache(key, url, expireTime = 300000) { const cached = wx.getStorageSync(key) const now = Date.now() if (cached && now - cached.timestamp < expireTime) { return Promise.resolve(cached.data) } return new Promise((resolve) => { wx.request({ url, success: (res) => { wx.setStorageSync(key, { data: res.data, timestamp: now }) resolve(res.data) }, fail: () => { // 请求失败时降级使用缓存 resolve(cached ? cached.data : null) } }) }) }

5.3 DNS 预解析

小程序支持在app.json中配置域名预解析：

json复制

{ "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "dnsCache": { "enable": true } }

在app.js中也可以手动预热 DNS：

javascript复制

App({ onLaunch() { // 预连接关键域名 wx.request({ url: 'https://api.example.com/ping', method: 'HEAD', success: () => { console.log('DNS 预热完成') } }) } })

六、微信开发者工具 Performance 面板使用

微信开发者工具的 Performance 面板可以记录小程序运行时的所有活动，是排查性能问题的关键工具。

使用步骤：

1. 打开开发者工具→ 顶部菜单栏选择「调试器」→「Performance」
2. 点击录制按钮（圆点）开始记录
3. 操作页面，复现性能问题场景
4. 停止录制，查看火焰图

关键分析维度：

javascript复制

// 在代码中插入自定义标记，方便在 Performance 面板中定位 const performance = wx.getPerformance() // 标记关键节点 const mark = performance.mark('page-load-start') // ... 执行加载逻辑 ... performance.mark('page-load-end') performance.measure('page-load-duration', 'page-load-start', 'page-load-end') // 获取测量结果 const measures = performance.getEntriesByType('measure') measures.forEach(m => { console.log(`${m.name}: ${m.duration}ms`) })

火焰图阅读要点：

• 宽条= 耗时长，重点关注
• setData 调用= 蓝色条块，如果频繁出现且间隔很小，说明 setData 过于频繁
• JS 执行= 黄色条块，过宽说明逻辑层有耗时计算
• 渲染= 绿色条块，过宽说明 DOM 结构复杂或样式计算量大

七、性能监控埋点方案

7.1 wx.reportPerformance

微信官方提供的性能数据上报接口：

javascript复制

// 上报自定义性能指标 // key 为整数，需要在小程序管理后台「开发管理 → 性能监控」中配置 wx.reportPerformance(1001, 1500) // key=1001, value=1500ms wx.reportPerformance(1002, 800) // key=1002, value=800ms

7.2 自定义性能监控 SDK

以下是一个完整的性能监控方案：

javascript复制

// utils/performance-monitor.js const PERF_KEYS = { PAGE_LOAD: 'page_load_duration', API_REQUEST: 'api_request_duration', SET_DATA: 'set_data_duration', FIRST_RENDER: 'first_render_duration' } class PerformanceMonitor { constructor() { this.marks = {} this.records = [] this.maxRecords = 50 } // 打点标记 mark(key) { this.marks[key] = { startTime: Date.now(), page: getCurrentPageRoute() } } // 测量并记录 measure(key) { const mark = this.marks[key] if (!mark) return const duration = Date.now() - mark.startTime const record = { key, duration, page: mark.page, timestamp: Date.now(), network: this.getNetworkType() } this.records.push(record) // 超出最大记录数时上传 if (this.records.length >= this.maxRecords) { this.upload() } // 同时上报到微信官方性能监控 this.reportToWeChat(key, duration) delete this.marks[key] return duration } // 上报到自建监控平台 upload() { if (!this.records.length) return const batch = this.records.splice(0) wx.request({ url: 'https://monitor.example.com/api/performance', method: 'POST', data: { appId: wx.getAccountInfoSync().miniProgram.appId, records: batch, deviceInfo: this.getDeviceInfo() } }) } // 上报到微信性能监控 reportToWeChat(key, duration) { const keyMap = { [PERF_KEYS.PAGE_LOAD]: 1001, [PERF_KEYS.API_REQUEST]: 1002, [PERF_KEYS.SET_DATA]: 1003, [PERF_KEYS.FIRST_RENDER]: 1004 } const wxKey = keyMap[key] if (wxKey) { wx.reportPerformance(wxKey, duration) } } getCurrentPageRoute() { const pages = getCurrentPages() return pages.length > 0 ? pages[pages.length - 1].route : 'unknown' } getNetworkType() { let networkType = 'unknown' wx.getNetworkType({ success: (res) => { networkType = res.networkType } }) return networkType } getDeviceInfo() { try { const info = wx.getDeviceInfo() return { brand: info.brand, model: info.model, system: info.system, platform: info.platform } } catch (e) { return {} } } } const monitor = new PerformanceMonitor() // 包装 Page，自动注入性能监控 function createPage(config) { const originalOnLoad = config.onLoad const originalOnReady = config.onReady config.onLoad = function() { monitor.mark(PERF_KEYS.PAGE_LOAD) if (originalOnLoad) originalOnLoad.apply(this, arguments) } config.onReady = function() { const duration = monitor.measure(PERF_KEYS.PAGE_LOAD) console.log(`页面加载耗时: ${duration}ms`) if (originalOnReady) originalOnReady.apply(this, arguments) } return Page(config) } // 在页面中使用 createPage({ onLoad() { monitor.mark(PERF_KEYS.API_REQUEST) this.fetchData() }, fetchData() { wx.request({ url: 'https://api.example.com/data', success: (res) => { monitor.measure(PERF_KEYS.API_REQUEST) this.setData({ list: res.data }) } }) }, // 监控 setData 耗时 updateData() { const start = Date.now() this.setData({ list: this.data.list }, () => { const duration = Date.now() - start monitor.mark(PERF_KEYS.SET_DATA) monitor.measure(PERF_KEYS.SET_DATA) }) } }) module.exports = { PerformanceMonitor, createPage, monitor, PERF_KEYS }

7.3 监控数据可视化

上报的性能数据可以在以下位置查看：

1. 微信官方：小程序管理后台 → 开发管理 → 性能监控
2. 自建平台：通过上述 SDK 上报到自有服务器，配合 Grafana 等工具可视化
3. 实时告警：当 P95 耗时超过阈值时触发告警

javascript复制

// 在 app.js 中初始化全局监控 App({ onLaunch() { // 定时上传性能数据（每 30 秒） setInterval(() => { require('./utils/performance-monitor').monitor.upload() }, 30000) // 应用切后台时上传 wx.onAppHide(() => { require('./utils/performance-monitor').monitor.upload() }) } })

总结

小程序性能优化不是一次性的工作，而是一个持续迭代的过程。以下是本文的核心要点清单：

落地建议：先用 Audits 面板做一次全面扫描，找出当前最大的性能瓶颈，然后针对性优化。不要试图一次优化所有东西，每次聚焦一个方向，用数据验证效果。

性能优化是工程实践，不是玄学。每一次优化都应该有数据支撑——优化前测量、优化后对比，确认效果后再进入下一个迭代。