Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

微信小程序的性能问题 #156

Open
chenjigeng opened this issue Aug 26, 2019 · 20 comments
Open

微信小程序的性能问题 #156

chenjigeng opened this issue Aug 26, 2019 · 20 comments
Labels

Comments

@chenjigeng
Copy link

@chenjigeng chenjigeng commented Aug 26, 2019

问题描述
其实这个思想是挺好的,不像Taro那样通过编译的方式来兼容语法,而是直接提供一套运行时。跟微信官方的kbone是一样的想法。不过有个最大的问题就是性能。
刚才试了下,把官方样例的TODO LIST初始化为1000个,发现渲染出来慢、操作卡顿。而通过原生则发现秒渲染出来,操作也不会卡顿。想看下这里有没有什么比较好的方法来解决性能问题。

示例代码
[如果有必要,展示代码,线上示例,或仓库]

其他信息
[如截图等其他信息可以贴在这里]

@chenjigeng chenjigeng added the question label Aug 26, 2019
@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Aug 26, 2019

#134 可以看看这里

@chenjigeng

This comment has been minimized.

Copy link
Author

@chenjigeng chenjigeng commented Aug 26, 2019

看了下,感觉性能确实会有提升。我觉得你们可以先做一些性能评测,比如1000个TODO List在不同机型的渲染速度和操作是否卡顿。这些我觉得是大家比较关心的。

@yesmeck

This comment has been minimized.

Copy link
Member

@yesmeck yesmeck commented Aug 26, 2019

https://github.com/remaxjs/benchmark

你说的没错,我们正在跑一些数据

@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Aug 26, 2019

更新了优化模板渲染后微信的 benchmark 数据。
通过微信小程序预览,打开性能测试面板,跑十次后取平均值。
(append data 我偷懒就没有跑十次了。。)

屏幕快照 2019-08-26 22 06 07

@chenjigeng

This comment has been minimized.

Copy link
Author

@chenjigeng chenjigeng commented Aug 26, 2019

@Darmody 棒~那明天我也真机体验下性能问题。(弱弱问一句,有没有更新前的性能对比

@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Aug 26, 2019

我会再贴一下和原生的对比

@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Aug 26, 2019

屏幕快照 2019-08-26 22 06 07

@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Aug 26, 2019

通过 #143 我们还可以进一步优化

@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Aug 27, 2019

屏幕快照 2019-08-27 22 54 56

尝试做了一下传输量压缩后的新数据,还有一些提升空间

@dkvirus dkvirus mentioned this issue Aug 28, 2019
@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Aug 28, 2019

屏幕快照 2019-08-28 16 41 31

我们本来希望通过 wxs 提升速度,结果发现 wxs 不符合预期。。现在去掉 wxs,数据又提升了一些

@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Sep 4, 2019

@chenjigeng 不知道你了不了解微信小程序模板渲染的一些原理?我们现在性能问题有些摸不着头脑

@chenjigeng

This comment has been minimized.

Copy link
Author

@chenjigeng chenjigeng commented Sep 5, 2019

@Darmody 你可以描述下,我看下能不能帮上忙

@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Sep 5, 2019

@Darmody 你可以描述下,我看下能不能帮上忙

非常感谢。目前有以下几个问题:

  1. 如果我把每个组件的属性都写满,就会导致渲染卡顿,把属性写少了以后,就好了很多。
  2. 因为我们要动态渲染节点,所以每个组件都是提前定义成一个模板,然后根据 data 中的 type 通过 <template is="{{type}}" /> 决定渲染哪一个模板。这种方式也比直接写死模板性能要差。
  3. 我们用到 wxs 来处理我们 setData 的数组,之后我发现当 wxs 和 template 配合使用的时候,好像会重复执行 wxs 的方法,所以不知道 wxs 的执行时机是怎么样的,会不会影响渲染。
@chenjigeng

This comment has been minimized.

Copy link
Author

@chenjigeng chenjigeng commented Sep 5, 2019

下面这些都是从我个人理解来说的
第一个问题,由于小程序会将wxml转化为js对象(应该跟VDom是类似)传输给渲染层,因此你如果属性写得越多,我理解传输的对象就会越大越复杂,在重新setData后diff用的时间会越久。所以可能会导致渲染卡顿。

@chenjigeng

This comment has been minimized.

Copy link
Author

@chenjigeng chenjigeng commented Sep 5, 2019

其他两个问题我不太了解,不好评价。

@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Sep 14, 2019

https://github.com/remaxjs/remax-window

长列表组件,解决长列表性能问题

@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Sep 14, 2019

目前长列表是已知的与原生性能差距比较明显的案例,因此我们专门为长列表提供了解决方案

@yinhangfeng

This comment has been minimized.

Copy link

@yinhangfeng yinhangfeng commented Dec 7, 2019

从目前的 benchmark 看性能问题是完全可以接受的,但 benchmark 测试的太理想化了,只渲染了 View Text 的部分属性。我改了一下加了 <View {...props} /> <Text {...props} /> 让模板中渲染所有属性发现总时间增加了1倍以上,情况不乐观...
那个默认值处理函数 _h.v() 有什么意义么,我去掉之后性能有略微提升(10%左右) 除了编译出来的模板里有好多 undefined,好像也没碰到什么问题
还有头条小程序目前是不是几乎不可用啊,由于不支持 wxs 每次 setData 都是提交整棵树

@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Dec 7, 2019

_h.v() 是为了缩减微信模板的大小

@Darmody

This comment has been minimized.

Copy link
Contributor

@Darmody Darmody commented Dec 7, 2019

从目前的 benchmark 看性能问题是完全可以接受的,但 benchmark 测试的太理想化了,只渲染了 View Text 的部分属性。我改了一下加了 <View {...props} /> <Text {...props} /> 让模板中渲染所有属性发现总时间增加了1倍以上,情况不乐观...
那个默认值处理函数 _h.v() 有什么意义么,我去掉之后性能有略微提升(10%左右) 除了编译出来的模板里有好多 undefined,好像也没碰到什么问题
还有头条小程序目前是不是几乎不可用啊,由于不支持 wxs 每次 setData 都是提交整棵树

其实你把原生小程序的属性都写满,也会发现性能变差

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.