你好，我是李艺。

上节课我们主要学习了如何通过接口获取小程序的性能数据，感谢你一直坚持学习到了现在。下面我们以第1讲讲过的小程序启动流程为主线，一起梳理一下在这个流程之上都有哪些具体的性能优化技巧。下面我们分别从环境准备，代码注入，及首屏渲染三个部分查看冷启动流程里面具体涉及到了哪些优化节点。

首先看环境准备。在这个里边一共有四个节点，在第二个节点里边代码包下载，校验及初始化。下面一共涉及到三讲的优化。第4讲使用独立分包和分包预下载。第5.1讲，减少分包大小，在分包页面里边使用占位组件。第5.3讲，减少主包大小，JS分布异步化加载与执行及插件代码的分包异步化。

下面我们看第二部分。这个部分一共分为主要的两个节点，在第一个节点框架及第三方基础代码初始化这个节点下面，在插件自定义组件扩展库代码注入的时候有第4讲与它相关，使用独立分包和分包预下载，尽量减少全局组件，全局插件的使用。第二点，开发者代码注入，在这里面分为逻辑层开发者代码注入和视图层开发者代码注入，其中在逻辑层开发者代码注入的时候涉及到第6.5讲，延迟同步调用和加快启动流程。在视图层开发者代码注入的时候涉及到第3讲加快注入速度，代码按需注入与初始渲染缓存，这里包括静态缓存与动态缓存两种。

下面我们继续看首屏渲染，下面分为五个节点。

第一个节点逻辑层页面初始化，也就是initDataSendTime这个事件触发的时候，同时有Page.onLoad事件派发，在这个下面一共分为八个方面的优化技巧。第一个是5.4讲使用WXWebAssembly优化运算性能，第6.1讲使用异步转同步的编程范式，第6.3讲在worker中进行耗时运算，第6.4讲在后端使用Go语言异步执行逻辑运算代码，第6.5讲延迟同步操作，使用串发复合命令延迟同步调用。首屏只加载单页所需的数据，第6.6讲小程序转至后台状态，不再调用setData更新视图。第8.4讲脚本优化技巧，及时清除定时器，添加的全局监听要及时移除。小心使用全局对象，第8.5讲setData调用优化合并多次调用。减少data中数据的定义，使用index局部更新长列表数据。

下面看第二个节点视图层，这里涉及到viewLayerRenderStartTime这个节点事件。其中包括Page.onShow事件的派发，下面一共涉及到五点内容。第2.4讲优化视图页动画效果，第2.5讲重渲染与自定义组件优化，第8.1讲视图代码优化技巧在动态列表中使用wx:key属性，使用catch代替bind，使用防抖函数与节流函数，尽量减少wxml节点，降低页面重渲染的压力。第8.2讲wxss优化技巧。给滚动列表开启惯性滚动，使用hover-class实现按钮的单击态，清除无用的wxss样式代码。第8.3讲UI优化技巧，使用padding及伪元素扩展元素的可单击区域。

下面看第三点开发者代码，从后端拉取数据准备data这方面的一些优化技巧，这里一共涉及到四点。第6.2讲尽量提前开始数据拉取，使用并发复合命令对齐不同文件的代码执行点。第6.7讲优化数据拉取，使用数据预拉取与周期性更新创建云函数提供数据，使用并发复合命令的竞赛模式拉取数据。第6.8讲 优化后端接口，开启缓存，使用Http2与Quic协议。第8.6讲网络请求优化，使用缓存将网络请求按优先级排序。

下面看第四个节点页面渲染，在下面一共涉及到六讲相关的内容。第2.2讲优化长列表显示，使用recycle-view组件。第2.3讲使用页面容器。第5.2讲减少主包及主包大小，在主页中使用占位组件，使用封面页代替主页。第8.7讲，图片优化技巧，图片压缩与使用腾讯云cos转存本地图片。第9.2讲使用原生类型节点，绕过逻辑层直接更新视图内容。上面所有优化技巧都是基于小程序的冷启动流程而存在的，在学习与应用这些优化技巧的时候，有三点内容我们一定要烂熟于心。第一点，小程序的冷启动流程特点，这部分内容我们在第1讲已经详细介绍了。第二点小程序的双线程运行机制，这部分内容介绍也在第1讲里边。第三点小程序的重渲染机制，这部分内容详细介绍在第2.5讲。这三点关于冷启动流程双线程运行机制及重渲染的内容，它们是枝干，所有优化技巧都是在它们的基础之上展开的枝叶。

下面我们看推荐阅读，这里有一些文章链接，如屏幕上所示，它们的内容都很不错，为本课程的打造提供了不少的创作灵感，推荐给你阅读。

下面我们看致谢与课程总结，这个课程在打造过程当中参考了不少的优秀的开源组件和社区教程，在此我们一并感谢，这些教程以及开源组件库的链接，如屏幕上所示。这个课程在以下方面富有一些创造性，在这里请允许我总结一下。

第一点，使用异步转同步编程范式，结合立即执行函数，在保证代码清晰性，可阅读性的前提之下提高主线程的执行效率。

第二点，将优先级自动排序的列队应用于网络请求当中提高网络操作的执行效率。

第三点，使用串发复合指令，在多个文件里面延迟非重要同步代码的执行。

第四点，使用并发复合指令，在多个文件中对齐代码执行点，使用竞赛模式基于多种渠道竞相拉取主页数据。

前两项多多少少或许与其他课程在方法上有些重合，但第三项，第四项关于命令模式的优化在其他地方我还没有看到过，算是这门课程的创新点，如有雷同纯属巧合。在优化策略上，整体来讲大体可以分为两类。第一类以空间换时间，例如数据预拉取，周期性更新，初始渲染缓存，使用LocalStorage缓存接口等等这些技巧，都属于以空间换时间的技巧。第二类以时间换空间，例如使用虚拟DOM，使用长列表组件，这一类都是属于以时间换空间的优化技巧，无论怎样的优化技巧，本质上精神都是一致的。精神就是现人现地，立足小程序的启动流程，双线程运行机制和重渲染机制，具体项目具体分析，以一个字节，一个字节去抠，一个毫秒，一个毫秒去节省的细致精神，一点点进行优化。在这个地方抠下了一点，在那个地方省下了一点，整体上性能就提升了。如果你在这个地方凑合一下，在那个地方也马虎一样，那么整体上性能也就下降了。

2017年微信小程序刚上线，那一年还有不少企业絮絮叨叨在质疑，在思考小程序到底值不值得去做。2022年第一季度小程序日活已经达到了5亿以后，已经没有企业在思考这个问题了。其他平台类似的技术生态的跟风和学习，以及小程序日活数字的日益增长，已经证明了这个技术赛道是对的，选择小程序作为产品的运营阵地，尤其是作为第一个运营阵地，已经成为初创企业的一个共识，纵然现在虽然小程序还有这样与那样的不足，但是我们同时也应该看到它一直都在快速迭代和快速进化。目前小程序在性能方面已经具备了这么多的调试工具和优化技巧，开发者在遇到性能问题的时候，已经没有什么好抱怨的了。把原理学好，把JS语言学好，把优化技能学好，完全可以把产品的性能优化好，甚至在一定范围之内还可以媲美原生应用。

源码地址： https://gitee.com/geektime-geekbang_admin/weapp_optimize

最后我们说一下源码，本课涉及到所有示例源码都可以从屏幕上的这个位置进行下载，源码是分课程划分目录的，例如6.6对应就是第6.6讲的示例源码。以上就是本课程的全部内容了，限于我的能力有限，这个课程有不完善的地方，恳请读者朋友多多批评指正。