iOS webview 性能是否很差?

2022-07-21 13:33:59 +08:00
 Features
用户 Uniapp ,在 scroll-view 里放了个列表,
每 10 秒更新一次数据
数据是每行 20 列的 waterfall

有 5000 条数据,硬性要求是不能分页

测试机型:iphone 6sp ,iphone xs max
发热特别厉害,10 分钟后热的无法正常操作了

测试机型:
HW mate20,红米 9A,vivo u1x ,使用正常,不管用多久都不热

我的解决方法是用 canvas 绘制列表,流畅度提升了很多,而且不热了

为啥 iOS webview 性能这么差呢?
2475 次点击
所在节点    问与答
24 条回复
gainsurier
2022-07-21 13:36:31 +08:00
稳定性和性能是两回事...
kop1989smurf
2022-07-21 13:39:03 +08:00
之前做过跨平台应用,架构是 native app 套壳。
使用 xcode 实现的 wkwebview ,性能和安卓的 webview 没发现本质区别。

楼主是怎么排除 uniapp 本身的问题的?
Features
2022-07-21 13:41:23 +08:00
@kop1989smurf
我用 vue 构造一个这样的页面,然后用 xcode 打包成 webapp ,一样也会发热
所以基本排除 Uniapp 的问题
qrobot
2022-07-21 13:43:04 +08:00
@Features DOM 节点太多导致的
Features
2022-07-21 13:43:05 +08:00
@gainsurier 这应该算性能问题吧? 占用了大量 CPU/GPU 资源,导致发热
Features
2022-07-21 13:43:56 +08:00
@qrobot 嗯,这个我知道,主要对比了安卓
有什么优化的办法吗?
写这个 canvas 写了我一天。。。
murmur
2022-07-21 13:45:47 +08:00
大量数据不能分页都要虚假滚动,这不是常识吗
qrobot
2022-07-21 13:47:07 +08:00
@Features 考虑虚拟滚动。 例如 react-window
Features
2022-07-21 13:50:06 +08:00
@murmur
@qrobot
谢谢,我研究下
paradoxs
2022-07-21 13:53:16 +08:00
我记得 webview 很久之前就不能用了啊
现在要用 wkwebview
qrobot
2022-07-21 13:53:24 +08:00
@Features 即使你用 canvars 画 效果也是 (n * t) 的效率 n 表示多少条数据 t 表示一条数据渲染的时间. 如果你的一条数据渲染要 0.1s 一共 1000 条数据, 那么渲染的时间需要 (0.1 * 1000) = 100 秒 cpu 当然很吃紧啊,你现在用 canvars 只不过是提升了渲染时间, 以前是 0.1s 渲染, 现在变成了 0.0001 * 1000 = 0.1s 你以为解决了问题, 随着基数变大有 10w 条数据的时候 0.0001 * 100000 = 10s 问题就又出来
qrobot
2022-07-21 13:56:09 +08:00
@Features canvars 相对 dom , 没有盒模型,也没有文档流进行处理,浏览器也就不会进行复杂的 Layout 了,所以你才感觉到快了
tabris17
2022-07-21 13:56:57 +08:00
safari 里面跑热不热?
C603H6r18Q1mSP9N
2022-07-21 14:04:54 +08:00
这种大数据量 用 nvue 吧
Features
2022-07-21 14:16:29 +08:00
@tabris17 完全不热啊,就是离大谱。。。
Features
2022-07-21 14:17:12 +08:00
@shanghai1998 主要这个页面有几个地方必须要用 canvas 绘制一些动画
nvue 对 canvas 支持太差了
Features
2022-07-21 14:17:38 +08:00
@shanghai1998 而且 nvue 也是热,没有什么改善,我试过了
Features
2022-07-21 14:18:30 +08:00
@qrobot 慢一点倒是无所谓,就是不能太热了
搞得比原神还热就离谱了
qrobot
2022-07-21 14:21:22 +08:00
@Features 渲染就需要使用 CPU/GPU 进行处理,CPU/GPU 处理的本子就是 电子进行移动, 高速的移动就会产生热量, 除非你把手机功耗降低, 这样就会降低热量了。
qrobot
2022-07-21 14:26:42 +08:00
@Features

你要想解决发热问题很简单, 把电压降低(换低压的 CPU/GPU )但是性能会变差
如果你要想解决速度问题,将电压提高(换标压的 CPU/GPU )速度就会快,但是发热会严重

这只是站在底层上来看, 但是事实是你不应该一次性处理这么多的数据,而是采用虚拟滚动的方式,只显示可视窗口的数据

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/867733

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX