阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      微信⼩程序性能优化

      问题

      微信⼩程序性能优化

      答案

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

      加载优化

      https://a.axihe.com/focus/wechat/014-01.png

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

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

      https://a.axihe.com/focus/wechat/014-02.png

      优化⽅式

      代码压缩。

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

      ⾸屏加载的体验优化建议

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

      使⽤分包加载优化

      https://a.axihe.com/focus/wechat/014-03.png

      在构建⼩程序分包项⽬时,构建会输出⼀个或多个功能的分包,其中每个分包⼩程序必定 含有⼀个主包,所谓的主包,即放置默认启动⻚⾯/ 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 内的资源

      官⽅即将推出 分包预加载

      https://a.axihe.com/focus/wechat/014-04.png

      独⽴分包

      https://a.axihe.com/focus/wechat/014-05.png

      渲染性能优化

      https://a.axihe.com/focus/wechat/014-06.png

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

      避免不当使⽤ setData

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

      https://a.axihe.com/focus/wechat/014-07.png

      避免不当使⽤onPageScroll

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

      使⽤⾃定义组件

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

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录