微信⼩程序性能优化

🌙

手机阅读

本文目录结构

问题

微信⼩程序性能优化

答案

我们知道 view 部分是运⾏在 webview 上的，所以前端领域的⼤多数优化⽅式都有⽤

加载优化

代码包的⼤⼩是最直接影响⼩程序加载启动速度的因素。代码包越⼤不仅下载速度时间⻓，业务代码注⼊时间也会变⻓。所以最好的优化⽅式就是减少代码包的⼤⼩

⼩程序加载的三个阶段的表示

优化⽅式

代码压缩。

及时清理⽆⽤代码和资源⽂件。
减少代码包中的图⽚等资源⽂件的⼤⼩和数量。
分包加载。

⾸屏加载的体验优化建议

提前请求: 异步数据请求不需要等待⻚⾯渲染完成。
利⽤缓存: 利⽤ storage API 对异步请求数据进⾏缓存，⼆次启动时先利⽤缓存数据渲染⻚⾯，在进⾏后台更新。
避免⽩屏：先展示⻚⾯⻣架⻚和基础内容。
及时反馈：即时地对需要⽤户等待的交互操作给出反馈，避免⽤户以为⼩程序⽆响应

使⽤分包加载优化

在构建⼩程序分包项⽬时，构建会输出⼀个或多个功能的分包，其中每个分包⼩程序必定含有⼀个主包，所谓的主包，即放置默认启动⻚⾯/ TabBar ⻚⾯，以及⼀些所有分包都需⽤到公共资源/ JS 脚本，⽽分包则是根据开发者的配置进⾏划分

在⼩程序启动时，默认会下载主包并启动主包内⻚⾯，如果⽤户需要打开分包内某个⻚⾯，客户端会把对应分包下载下来，下载完成后再进⾏展示。

优点：

对开发者⽽⾔，能使⼩程序有更⼤的代码体积，承载更多的功能与服务
对⽤户⽽⾔，可以更快地打开⼩程序，同时在不影响启动速度前提下使⽤更多功能

限制

整个⼩程序所有分包⼤⼩不超过 8M
单个分包/主包⼤⼩不能超过 2M
原⽣分包加载的配置假设⽀持分包的⼩程序⽬录结构如下

├── app.js
├── app.json
├── app.wxss
├── packageA
│ └── pages
│ ├── cat
│ └── dog
├── packageB
│ └── pages
│ ├── apple
│ └── banana
├── pages
│ ├── index
│ └── logs
└── utils

开发者通过在 app.json subPackages 字段声明项⽬分包结构

{
    "pages":[
        "pages/index",
        "pages/logs"
    ],
    "subPackages": [
        {
            "root": "packageA",
            "pages": [
            "pages/cat",
            "pages/dog"
            ]
        }, {
        "root": "packageB",
        "pages": [
            "pages/apple",
            "pages/banana"
        ]
        }
    ]
}

分包原则

声明 subPackages 后，将按 subPackages 配置路径进⾏打包， subPackages 配置路径外的⽬录将被打包到 app （主包）中
app （主包）也可以有⾃⼰的 pages （即最外层的 pages 字段
subPackage 的根⽬录不能是另外⼀个 subPackage 内的⼦⽬录
⾸⻚的 TAB ⻚⾯必须在 app （主包）内

引⽤原则

packageA⽆法 require packageB JS ⽂件，但可以 require app 、⾃⼰ package 内的JS ⽂件
packageA⽆法 import packageB 的 template ，但可以 require app 、⾃⼰ package内的 template
packageA ⽆法使⽤ packageB 的资源，但可以使⽤ app 、⾃⼰ package 内的资源

官⽅即将推出分包预加载

独⽴分包

渲染性能优化

每次 setData 的调⽤都是⼀次进程间通信过程，通信开销与 setData 的数据量正相关。
setData 会引发视图层⻚⾯内容的更新，这⼀耗时操作⼀定时间中会阻塞⽤户交互。
setData 是⼩程序开发使⽤最频繁，也是最容易引发性能问题的

避免不当使⽤ setData

使⽤ data 在⽅法间共享数据，可能增加 setData 传输的数据量。。 data 应仅包括与⻚⾯渲染相关的数据。
使⽤ setData 传输⼤量数据，通讯耗时与数据正相关，⻚⾯更新延迟可能造成⻚⾯更新开销增加。仅传输⻚⾯中发⽣变化的数据，使⽤ setData 的特殊 key 实现局部更新。
短时间内频繁调⽤ setData ，操作卡顿，交互延迟，阻塞通信，⻚⾯渲染延迟。避免不必要的 setData ，对连续的 setData 调⽤进⾏合并。
在后台⻚⾯进⾏ setData ，抢占前台⻚⾯的渲染资源。⻚⾯切⼊后台后的 setData 调⽤，延迟到⻚⾯重新展示时执⾏

避免不当使⽤onPageScroll

只在有必要的时候监听 pageScroll 事件。不监听，则不会派发。
避免在 onPageScroll 中执⾏复杂逻辑
避免在 onPageScroll 中频繁调⽤ setData
避免滑动时频繁查询节点信息（ SelectQuery ）⽤以判断是否显示，部分场景建议使⽤节点布局橡胶状态监听（ inersectionObserver ）替代

使⽤⾃定义组件

在需要频繁更新的场景下，⾃定义组件的更新只在组件内部进⾏，不受⻚⾯其他部分内容复杂性影响

面试题
HTML	CSS	JavaScript
jQuery	Vue.js	React
算法	HTTP	Babel
BootStrap	Electron	Gulp
Node.js	前端经验相关	前端综合
Webpack	微信小程序	-

基础综合面试题

微信⼩程序性能优化

问题

答案

加载优化