微信小程序性能优化方案，web前端开发规范手册
- 提高渲染性能
首先，我们需要了解，当用户点击小程序后小程序启动的流程，具体详细的流程在微信官方文档 启动性能 中有描述，以下的篇章我们主要着重于我们能够改变优化的环节。
小程序代码包准备（下载代码包） => 开发者代码注入（逻辑和渲染） => 首页（初次）渲染
小程序代码包准备（下载代码包）
下载代码包提升性能的最关键性一点就是，控制代码包的大小。
至于如何控制包的大小？
- 分包加载
我在另一篇博客中具体讲解了分包加载，大家可以移步去学习
- 代码重构和优化
通过代码重构，降低代码冗余。在使用如 Webpack 等打包工具时，要尽量利用 tree-shaking 等特性去除冗余代码，也要注意防止打包时引入不需要的库和依赖。
- 控制代码包内图片等资源
避免在代码包中包含过多、过大的图片，应尽量采用网络图片。
- 及时清理没有使用到的代码和资源
目前小程序打包是会将工程下所有文件都打入代码包内，因此需要及时清理已经没有被实际使用到的库文件和资源也。
开发者代码注入
- 减少启动过程的同步调用
在小程序启动流程中，会注入开发者代码并顺序同步执行 App.onLaunch, App.onShow, Page.onLoad, Page.onShow。
在小程序初始化代码（Page，App 定义之外的内容）和启动相关的几个生命周期中，应避免执行复杂的计算逻辑或过度使用Sync结尾的同步API，如 wx.getStorageSync，wx.getSystemInfoSync 等。
对于 getSystemInfo, getSystemInfoSync 的结果应进行缓存，避免重复调用。
- 使用懒注入
通常情况下，在小程序启动时，启动页面所在分包和主包（独立分包除外）的所有JS代码会全部合并注入，包括其他未访问的页面以及未用到自定义组件，造成很多没有使用的代码注入到小程序运行环境中，影响注入耗时和内存占用。
自基础库版本 2.11.1 起，小程序支持仅注入当前页面需要的自定义组件和当前页面代码，以降低小程序的启动时间和运行时内存。开发者可以在 app.json 中配置：
{
“lazyCodeLoading”: “requiredComponents”
}
页面渲染优化
- 提前首屏数据请求
数据预拉取：能够在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据，当代码包加载完时可以更快地渲染页面，减少用户等待时间，从而提升小程序的打开速度。
周期性更新：在用户未打开小程序的情况下，也能从服务器提前拉取数据，当用户打开小程序时可以更快地渲染页面，减少用户等待时间。
- 骨架屏
在页面数据未准备好时（如需要通过网络获取），尽量避免展示空白页面，应先通过骨架屏展示页面的大致结构，请求数据返回后在进行页面更新，以提升用户的等待意愿。
- 缓存请求数据
小程序提供了wx.setStorage、wx.getStorage等读写本地缓存的能力，数据存储在本地，返回的会比网络请求快。可以优先从缓存中获取数据来渲染视图，等待网络请求返回后进行更新。
- 精简首屏数据
延迟请求非关键渲染数据，与视图层渲染无关的数据尽量不要放在 data 中，加快页面渲染完成时间。
setData工作原理
小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。
而 evaluateJavascript 的执行会受很多方面的影响，数据到达视图层并不是实时的。
每调用一次setData, 都是逻辑层向渲染层的一次通讯，这个通信还不是直接传给webView, 而是通过走了native层，通讯的开销很大。
渲染层收到通讯后，还需要重新渲染出来，所以，一次setData带来两次开销：通信的开销 + webview更新的开销。
优化方法
- 减少setData的数据量
如果一个数据不能会影响渲染层，则不用放在setData里面
-
合并setData的请求，减少通讯的次数
-
列表的局部更新
在一个列表中，有n条数据，当前需求为实现点赞效果。
首先，我们可以先展示效果，再进行异步请求，只在请求失败的情况下提示。
其次，我们可以采用布局刷新，根据点赞数据的id和index分别获取数据以及更新数据
this.setData({
list[index] = newList[index]
})
- 小心后台页面的js
小程序中可能有n个页面，所有的这些页面，虽然都拥有自己的webview(渲染层)， 但是却共享同一个js运行环境。也就是说，当你跳到了另外一个页面（假设是B页面），本页面（假设是A页面）的定时器等js操作仍在进行，并且不会被销毁，并且会抢占B页面的资源。
在h5的环境中，当我们跳转到其他页面，老页面的js环境会被自动销毁，定时器什么都被销毁掉了，因此我们不需要关心老页面中，还有哪些js代码可能还会执行。但是在小程序中，我们必须手动的“清理”掉这样的代码。
-
小心onPageScroll
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载
❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。
！**
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载
❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。
