收藏
评论

微盟小程序性能优化实践(下)

在上一篇分享中,给大家分享了启动性能加载的相关实践,详情可戳右方链接:微盟小程序性能优化实践(上)


接下来和大家聊一聊首屏加载的体验建议和渲染性能优化。


二、首屏加载的体验建议


· 提前请求  

  异步数据请求不需要等待页面渲染完成。


· 利用缓存

  利用storage API对异步请求数据进行缓存,二次渲染页面,再进行后台更新。


· 避免白屏

  先展示页面骨架和基础内容。


三、渲染性能优化


·  每次 setData 的调用都是一次进程间通信过程,通信开销与 setData 的数据量正相关

·  setData 会引发视图层页面内容的更新,这一耗时操作一定时间中会阻塞用户交互

·  setData 是小程序开发使用最频繁,也是最容易引发性能问题的

·  在页面列表中使用懒加载+动态移除非可视区域范围内的内容,让dom小下去

·  耗时比较长的js做到异步,不要阻塞进程(js属于单线程)

·  少使用scroll-view,这个组件对性能的影响太大,单纯的只是需要一块区域滚动,可以使用view+css的方式实现

·  在页面频繁滚动触发回调函数,会导致页面卡顿,这时必须和防抖动函数或者节流函数相结合做一些处理

·  页面中的图片可以使用懒加载的方式(添加lazy-load属性,只针对page与scroll-view下的image有效

·  页面跳转要做一下限制,如果页面快速点击会出现跳转多次的情况


 避免不正当的使用setData


· 使用data在方法间共享数据,可能增加setData传输的数据量。data 应该仅仅包含与页面渲染相关的数据

· 使用setData 传输大量的数据,通讯耗时与数据量成正比,导致页面更新延迟 可能造成页面更新开销增加。所以setData 仅传输页面需要的数据,使用setData 的特殊Key 实现局部更新

· 短时间内频繁调用setData  (操作卡顿、交互延迟   阻塞通信、页面渲染延迟),对连续的setData 调用进行合并

· 后台进行页面setData  (抢占前台页面的渲染资源) 例如 活动定时器 再页面切入后台时应该将关闭


避免不正当的使用onPageScroll


· 只在必要的时候监听pageScroll 事件

· 避免在onPageScroll 中执行复杂的逻辑

· 避免在onPageScroll 中频繁调用setData

· 避免频繁查询节点信息(SelectQuery) 部分场景建议使用节点布局相交状态

·  监听( IntersectionObserver) 替代


使用自定义组件

在需要频繁更新的场景下,自定义组件的更新只在组件内部进行,不受页面部分内容的复杂性的影响。


使用体验评分功能

在开发过程中使用体验评分可以测试出代码中一些需要优化的点,准备定位到影响性能的原因,很大程序提高页面的性能。

最后一次编辑于  2018-09-25
收藏

3 个评论

  • 陈
    2018-09-25


    2018-09-25
    赞同 1
    回复
  • LIYI
    LIYI
    2022-04-03

    2022-04-03
    赞同
    回复
  • 2019-04-08

    图片用lazy-load属性,三屏上下的图片全部都会加载,使用体验评分还是会报加载图片过多的问题

    2019-04-08
    赞同
    回复
登录 后发表内容