不知道大家有没有这种体会，刚到公司时，领导要你维护之前别人写的代码，你看着别人写的代码陷入了深深的思考：“这谁写的代码，这么残忍”
俗话说“不怕自己写代码，就怕改别人的代码”，一言不和就改到你吐血，所以为了别人好，也为了自己好，代码规范，从我做起。
废话不多说了，来吧，本文主要一起来学习小程序的优化（微信），毕竟现代的前端仔出去外面根本不好意思说自己不会开发小程序，那很丢人的，既然开发了，随着功能点越来越多，性能问题也来了，当然有问题就肯定有解决的办法，我们一起来看吧！

WXML

1 不要换行写

微信开发者工具不会对代码进行 trim 操作，如果代码中换行，页面也直接换行。

2wx:if vs hidden

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

3 图片处理

① 大图片也会造成页面切换的卡顿有一部分小程序会在页面中引用大图片，在页面后退切换中会出现掉帧卡顿的情况。

② 图片占容量代码包限制是 2MB，图片占用空间较大，建议都上传到 CDN 上，代码里直接引用链接。

③ 大图片小点击位 小程序主要在手机端运行，手机屏幕大小有限，所以尽量点击位大点。

④ 图片截取存在图片没有按原图宽高比例显示，可以设置 image 组件的 mode 属性，来保持原图宽高比。

5.CSS Sprites

所有零星图片都包含到一张大图中，减少请求数。

WXSS

1.Css 伪类看不到

在微信开发者工具中， Styles 不会显示 Css 伪类，喜欢写::before 或:first-child 的小伙伴们请注意了，你的伪类在控制台是看不到的,所以不建议在小程序里用 Css 伪类，以防找不到问题点不好修复 bug。

小程序 button 自带给 after 伪类添加了边框，通过开发者工具是看不到 after ,我们需要自行去掉边框。

button::after {  border: none;}

hover 伪类则可以用小程序自带的属性 hover-class 代替。

2.自定义颜色限制

不是所以颜色配置都能随心所欲，比如导航栏标题颜色，仅支持 black / white；下拉 loading 的样式，仅支持 dark / light。所以出视觉图关注下。

滚动区域没有开启惯性滚动 当加了 overflow: scroll 时，IOS 下需要额外设置：-webkit-overflow-scrolling: touch，来开启惯性滚动。

JS

1.避免不当使用 setData

① 使用 data 在方法间共享数据（可能增加 setData 传输的数据量）——建议 data 中仅包括与页面相关的数据

② 使用 setData 传输大量数据——仅仅传输变化的数据

③ 短时间被频繁调用 setData——对连续的 setData 进行合并

⑤ 后台页面进行 setData，抢占前台页面的渲染资源——页面在切入后台后的 setData 调用，延迟到页面重新展示的时候执行

2.分享事件不支持异步

如果你想自定义分享图片，则在生命周期 onShareApp

Message 中编写如下所示：

Page({  onShareAppMessage: function (res) {    return {      title: '自定义转发标题',      imageUrl: 'https://raoenhui.github.io/images/logo.png'    }  }}

但是 onShareAppMessage 不能支持异步，如果你想从接口里获取分享图片 URL，必须在 onLoad 提前读取并放入 Data 中。

3.小程序有并发限制

wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个。所有为了保险起见，需要写个请求队列，如果并发量大于 10，则等待请求。

4.循环中添加 key

对于经常要更新的列表需要加上 key 值，key 值相当于索引，但是 key 值不要用 index ,因为 index 在增加删除的时候可能不变产生混乱，推荐用唯一标示 id ，对数据改变之后的 diff 更新比较有很大的性能提升。PS：如果是单纯只显示的列表，不需要操作更新，那不需要加 key 。

5.http 需变 https

HTTP 是明文传输有篡改内容的风险，而且有些安卓机会不兼容。所以我们需要使用 https。所以开需求评审的时候，要注意后端要写成 https，如果是运营配的数据，后端最好有个转 https 方法，输入了 url 自动转成 https 链接。

在微信开发者工具中，可勾选”不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”规则即可用 http，但是在实体里并没有这个选项，所以建议开发时就用 https 路径。

6.避免不当使用 onPageScroll

① 只在有必要的时候监听 pageScroll 事件

② 避免在 onPageScroll 中执行复杂逻辑

③ 避免在 onPageScroll 中频繁调用 setData

④ 避免频繁查询节点信息（SelectQuery），部分场景建议使用节点布局相交状态监听（IntersectionObserver）替代

7.首屏加载的体验优化建议

① 提前请求：异步请求数据不需要等待页面的渲染完成。

② 利用缓存。利用 storage API 对异步请求数据进行缓存。二次启动的时候，先利用

③ 缓存数据渲染页面，再进行后台更新

④ 避免白屏：先展示页面骨架和基础内容