杭州云远科技有限公司logo
  • 微博
  • 微信
  • QQ好友
  • QQ空间
  • 百度

S

滚屏网站

crolling  website

新闻中心
云远新闻
行业新闻
专业知识
云远教育
云远游记
详细内容

用好setData 性能不再卡-杭州微信小程序开发为你呈现

时间：2022-07-08     作者：杭州微信小程序开发【转载】   来自：微信派

随着小程序生态的蓬勃发展，多样化的用户需求推动更丰富的小程序功能。小程序承载更多的能力，伴随着更高的性能要求。无论是启动性能，还是运行性能，都会对用户体验产生影响，最终影响业务发展。




开发者可以通过 按需注入、分包异步 等方式来优化启动性能。针对运行性能优化，合理使用 setData 是重要一环，离不开其中 2 个重要方式：

  • 减小每次 setData 的数据体积

  • 控制调用 setData 频率








优化diff算法 减小数据体积 

setData 建议只用来进行渲染相关的数据更新。调用 setData 更新与渲染无关的字段，触发额外的渲染流程，或者增加传输的数据量，影响渲染耗时。

减小数据体积主要有 2 个方向：


  1. 通过 setData 之前 diff 来减小数据体积
  2. 将不需要渲染到 wxml 的数据从 data 转移到其他地方存储


其中方向 1 能够通过递归方式深度遍历整个对象，从框架层面上对数据体积进行全面优化。



以购物车页面为例，将 setData 替换成 updateData。对比替换前 80KB 的数据量，经过 diff 优化的数据量减少至 0.8KB～20KB，数据减少比例最高达 100倍。数据体积减小使得 setData 消耗总时间优化 22%，渲染层总时间优化 39%。



然而，data 嵌套多层数组和对象，导致 diff 算法遍历过程消耗大量时间。如果加上 diff 耗时，总时间仅优化 13.6%。因此优化 diff 算法非常必要，也非常简单。在 for in 循环中增加一个判断条件，跳过部分 object 和 array，避免遍历所有对象，能够减少 diff 耗时 16%。





合并setData 控制调用频率

由于每次 setData 都会触发逻辑层虚拟 DOM 树的遍历和更新，可能导致触发完整的页面渲染流程。因此，建议开发者将一个同步时间片里面的 setData 合并为一个，在下一个时间片执行 setData，减少对象遍历以及完整渲染的工作。


合理使用 setData 能够有效优化小程序运行性能，其中通过 diff 算法减小数据体积以及合并 setData 来控制调用频率 2 种方法减少 setData 耗时 22%，成功优化小程序性能体验。更多性能优化干货内容，欢迎点击 性能优化指南 了解。



如有其他小程序应用相关的问题，可在 微信开放社区小程序交流专区 发帖互动，技术专员将为大家解答及进行深度交流。

原创｜腾讯前端开发工程师 shiyanzhang


image.png

相关信息
  1. 最新财报：增！-杭州网站建设为你呈现
  2. 这3个微信功能，谢谢老朋友！-杭州网站建设为你呈现
  3. 深圳大学，刷个掌-杭州网络公司为你呈现
  4. 挖一挖！5个微信“隐藏”功能-杭州网络公司为你呈现
  5. Q1财报，主要说两点：-杭州APP开发为你呈现
  6. 5.17-5.23 节目单是......杭州抖音短视频直播商城制作开发为你呈现
  7. 这份名单，第一次发布-杭州微信小程序开发为你呈现
  8. 今天，一起推广这个公众号-杭州网站建设为你呈现
  9. 微信帮帮“零”-杭州网络公司为你呈现
  10. 来了！公众号可带货“视频号小店”-杭州APP开发为你呈现
新闻中心
更多
  • 今日开始，钱包余额必“增”-杭州微信小程

    今日开始，钱包余额必“增”-杭州微信小程

    昨天，你们说：这不，来了！今天起，2023年度个税综合所得汇算清缴已经开始，可以直接前往个税APP办理年度汇算了。只要拥有国家职业资格证书，就可以抵扣个税。在微

  • 最新财报：增！-杭州网站建设为你呈现

    最新财报：增！-杭州网站建设为你呈现

    3月20日，腾讯公布了2023年全年业绩财报，微信及WeChat的合并月活跃账户数13.43亿。视频号视频号的总用户使用时长翻番，得益于推荐算法优化下日活跃账户

  • [语音] 60"--杭州网络公司为你呈现

    [语音] 60"--杭州网络公司为你呈现

    这个画面见过吗？这是最早的微信语音界面，距今已经13年了。从文字到声音，从眼睛到耳朵，当微信里有了语音，意味着沟通有了更多可能，也让交流的体验更立体。到现在，微

  • 来啦！港港港港港港港港港人-杭州APP开

    来啦！港港港港港港港港港人-杭州APP开

    我来到你的城市，走过你来时的路，他们说，最佳的关系正是“双向奔赴”。——港人北上逛，说走就走这是港人北上的众多首发到站之一，深业上城。深业上城这片或白或红或黄的

  • 同学，来微信上班吗？-杭州抖音短视频直播

    同学，来微信上班吗？-杭州抖音短视频直播

    淡淡的人，还在微信里等工作。勇敢的人，已经来微信工作了。腾讯WXG2924实习生招聘加入我们从成为WXG的实习生开始面向人群毕业时间在2024年9月至2025年

  • @外国朋友&老年朋友，更方便了！-杭州微

    @外国朋友&老年朋友，更方便了！-杭州微

    谁还不太会用手机支付？刚到中国的外国朋友；不太懂手机操作的老人朋友。这两类人怎么用得更方便？过去一段时间，微信支付持续开展体验优化，不少改动现在告诉你。外国朋友

  • 加强行业自律 打造健康生态倡议书-杭州网

    加强行业自律 打造健康生态倡议书-杭州网

    近一段时间以来，接连出现个别MCN机构为博取流量炮制虚假内容、传播网络谣言、恶意欺骗网民的问题，造成恶劣影响，遭到各方谴责。中国网络视听节目服务协会网络视听专业

  • 关于打击“制造虚假信息、恶意摆拍”的治理

    关于打击“制造虚假信息、恶意摆拍”的治理

    近日，警方通报“在巴黎拾到小学生秦朗作业本”视频系编造，公安机关已依法对相关人员作出行政处罚。平台鼓励真诚创作，严厉打击编造散播虚假信息、通过恶意摆拍制造或蹭炒

  • 关于开展“清朗·优化营商网络环境—整治涉

    关于开展“清朗·优化营商网络环境—整治涉

    为落实“清朗·优化营商网络环境—整治涉企侵权信息乱象”专项行动的有关要求，切实维护企业和企业家网络合法权益，微信进一步加大对蓄意造谣抹黑企业家，编造、传播虚假不

  • 关于违规微短剧类小程序的处置公告（第二十

    关于违规微短剧类小程序的处置公告（第二十

    微信一直致力于打造安全、健康、绿色的平台生态环境，为保障平台微短剧小程序规范运营，实现良性有序发展，平台严格落实企业主体责任，此前我们发布了《关于进一步规范小程

杭州云远科技有限公司是一家专门致力于为企业提供全方位网站建设服务。年轻的我们带着梦想和对网络的热情走在互联网道路的前沿，一路走来，我们的努力和真诚得到了更多客户的认可。在未来的发在未来的发...

浙公网安备：33010602011153

seo seo