小程序性能学习笔记

     1.背景

               微信端的webview逐渐成为移动 web的一个重要入口

               微信端的web能力不足，受限于移动端性能、网速，白屏加载缓慢；

                微信内部，推出了web资源离线存储技术；

                 仍然面临，页面切换生硬，点击迟滞的问题；

                 新的系统（小程序），具备一下优秀的能力：

                       快速加载，更强大能力，原生体验，易用且安全的微信数据开放，高效和简单的开发

       2. 特性

            WXSS 和 WXML 会编译成 JavaScript 代码，采用的也是虚拟dom技术

           普通的网页，渲染和脚本线程是互斥的，所以长时间运行脚本会使得页面失去响应；

            而在小程序中，两者是分开的，运行在不同的线程中；逻辑层运行在jscore中，所以并没有完整的浏览器对象，没有Dom和Bom API；jscore与nodejs环境也不同，因此npm包也无法使用；

            不同运行环境，逻辑层、渲染层区别

            

             提供了丰富的api，以及强大的平台能力

             提供原生组件，以及方便的开发工具；

             

       3. 性能

             首屏时间（不超过5s）：

              渲染内容较多，就需要优先级高的内容优先展示；

              服务端请求数据时间过长，需要分析加快请求的返回时间；

              一次性加载的数据量过大，需要分段加载，数据依赖的计算算法优化；

             渲染时间（不超过500ms）：

             同时渲染大面积区域，加载时间较长，出现卡顿的现象，比如长列表的渲染，需要分段加载，优化依赖的复杂算法。

             脚本执行时间（不超过1s）：

              一次同步执行时间不宜过长，如生命周期回调，事件函数，不然会出现卡顿，体验较差。

             setData调用频率（小于20次/s）：

              逻辑层和渲染层通信过于频繁的话，会导致处理队列阻塞，渲染不及时，引起卡顿。

             setData数据量（不超过256kb）：

              数据太大，会增加逻辑层与渲染层的通信时间

              wxml节点数：

             一个页面使用少于 1000 个 WXML 节点，节点树深度少于 30 层，子节点数不大于 60 个

            图片缓存：

             开启http缓存控制，提升下一次加载速度

             图片大小：

              根据显示区域，合理控制图片大小

              请求耗时（小于1s）：

               优化好服务器处理时间，减小回包大小，让请求快速响应

               网络请求数量（不超过10个）：

               小程序同时请求多个回触发并发数量限制，同时请求太多也会导致加载慢问题，wx.request超过300ms耗时的不超过10个，要尽量合并请求

               图片请求数：

                短时间内发起太多图片请求，会触发浏览器加载限制，可能导致图片加载缓慢，可以用图片懒加载。

              网络请求缓存：

              网络请求耗时，尽量避免多余的请求，相同的请求可以考虑缓存

    4. 启动性能

        代码包体积优化：

            1）合理使用分包加载，

                        独立分包（例如：广告页、支付页、活动页等，不复杂相对独立且对启动要求较高的功能，从独立分包进入小程序，不会下载主包）；

                        分包预下载（虽然分包加载对启动效果改善明显，但是如果要跳到分包页面，则需要等待，因此需要预下载）

                        分包异步化（将小程序的分包从页面粒度细化到组件甚至文件，使组件、插件等在运行时才去异步加载，可以有效减少代码体积）

            2）避免全局自定义组件和插件

                   在 app.json 中通过 usingComponents 全局引用的自定义组件和通过 plugins 全局引入的插件，会在小程序启动时随主包一起下载和注入 JS 代码，影响启动耗时

            3）控制代码包资源体积

                  避免wxss中内敛base64，大的图片，用cdn的方式代替，尽量用小图片

            4）及时清理无用代码和资源

                  默认小程序工具会将工程下所有文件打包进代码包，可以用开发者工具自带的代码静态分析工具，分析依赖情况，删除没用的依赖

       代码注入优化：

             1）使用按需注入（lazyCodeLoading: “requireComponents”）

             2) 使用用时注入

             3）启动过程中，减少同步api调用，比如：避免在onLaunch，onLoad，onShow等启动生命周期中调用sync结尾的api

             4）启动过程中，避免在onLaunch，onLoad，onShow等中进行复杂耗时的运算

      首屏渲染优化：

              1. 按需注入、按时注入

               2.启用初始渲染缓存

               3. 避免引用未使用的自定义组件

               4. 精简首屏数据，（渐进式加载，优先加载关键信息，data只放用于渲染的数据）

                5. 提前首屏数据请求（onLoad中请求，数据预拉取、周期性更新）

                6. 缓存请求数据（本地缓存，请求后再更新数据）

                 7. 骨架屏

       5.运行时性能

              1. 合理使用setData（大小、频率、范围，定义只包括渲染相关的数据，发送只发生变化的数据）

             2. 适当监听页面或组件的 scroll 事件

             3. 尽量用高性能的动画实现方式（如css、渐变动画，小程序自带的）

              4. 控制节点数量和层级

               5.  尽量控制在 Page 构造时传入的自定义数据量，对于复杂的数据可以手动在onLoad时挂到this上（因为page在初始化时，会深拷贝定义的数据，复杂化的数据可能带来很大开销）