V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Features
V2EX  ›  问与答

iOS webview 性能是否很差?

  •  
  •   Features · 2022-07-21 13:33:59 +08:00 · 2281 次点击
    这是一个创建于 617 天前的主题,其中的信息可能已经有所发展或是发生改变。
    用户 Uniapp ,在 scroll-view 里放了个列表,
    每 10 秒更新一次数据
    数据是每行 20 列的 waterfall

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

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

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

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

    为啥 iOS webview 性能这么差呢?
    第 1 条附言  ·  2022-07-21 14:27:58 +08:00
    多种测试场景:
    1.打包成 h5 ,使用 Safari 测试 ---- 不热
    2.使用 vue 构造本页面,打包成一个 h5 页面,使用 xcode 打包成一个 webapp ---很热,无改善
    3.使用 nvue ----很热,无改善
    4.使用 swiper 做假分页,异步加载 ----小热 但是使用体验很差,验收不通过
    24 条回复    2022-07-21 23:50:49 +08:00
    gainsurier
        1
    gainsurier  
       2022-07-21 13:36:31 +08:00
    稳定性和性能是两回事...
    kop1989smurf
        2
    kop1989smurf  
       2022-07-21 13:39:03 +08:00
    之前做过跨平台应用,架构是 native app 套壳。
    使用 xcode 实现的 wkwebview ,性能和安卓的 webview 没发现本质区别。

    楼主是怎么排除 uniapp 本身的问题的?
    Features
        3
    Features  
    OP
       2022-07-21 13:41:23 +08:00
    @kop1989smurf
    我用 vue 构造一个这样的页面,然后用 xcode 打包成 webapp ,一样也会发热
    所以基本排除 Uniapp 的问题
    qrobot
        4
    qrobot  
       2022-07-21 13:43:04 +08:00
    @Features DOM 节点太多导致的
    Features
        5
    Features  
    OP
       2022-07-21 13:43:05 +08:00
    @gainsurier 这应该算性能问题吧? 占用了大量 CPU/GPU 资源,导致发热
    Features
        6
    Features  
    OP
       2022-07-21 13:43:56 +08:00
    @qrobot 嗯,这个我知道,主要对比了安卓
    有什么优化的办法吗?
    写这个 canvas 写了我一天。。。
    murmur
        7
    murmur  
       2022-07-21 13:45:47 +08:00
    大量数据不能分页都要虚假滚动,这不是常识吗
    qrobot
        8
    qrobot  
       2022-07-21 13:47:07 +08:00
    @Features 考虑虚拟滚动。 例如 react-window
    Features
        9
    Features  
    OP
       2022-07-21 13:50:06 +08:00
    @murmur
    @qrobot
    谢谢,我研究下
    paradoxs
        10
    paradoxs  
       2022-07-21 13:53:16 +08:00
    我记得 webview 很久之前就不能用了啊
    现在要用 wkwebview
    qrobot
        11
    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
        12
    qrobot  
       2022-07-21 13:56:09 +08:00
    @Features canvars 相对 dom , 没有盒模型,也没有文档流进行处理,浏览器也就不会进行复杂的 Layout 了,所以你才感觉到快了
    tabris17
        13
    tabris17  
       2022-07-21 13:56:57 +08:00
    safari 里面跑热不热?
    shanghai1998
        14
    shanghai1998  
       2022-07-21 14:04:54 +08:00
    这种大数据量 用 nvue 吧
    Features
        15
    Features  
    OP
       2022-07-21 14:16:29 +08:00
    @tabris17 完全不热啊,就是离大谱。。。
    Features
        16
    Features  
    OP
       2022-07-21 14:17:12 +08:00
    @shanghai1998 主要这个页面有几个地方必须要用 canvas 绘制一些动画
    nvue 对 canvas 支持太差了
    Features
        17
    Features  
    OP
       2022-07-21 14:17:38 +08:00
    @shanghai1998 而且 nvue 也是热,没有什么改善,我试过了
    Features
        18
    Features  
    OP
       2022-07-21 14:18:30 +08:00
    @qrobot 慢一点倒是无所谓,就是不能太热了
    搞得比原神还热就离谱了
    qrobot
        19
    qrobot  
       2022-07-21 14:21:22 +08:00
    @Features 渲染就需要使用 CPU/GPU 进行处理,CPU/GPU 处理的本子就是 电子进行移动, 高速的移动就会产生热量, 除非你把手机功耗降低, 这样就会降低热量了。
    qrobot
        20
    qrobot  
       2022-07-21 14:26:42 +08:00
    @Features

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

    这只是站在底层上来看, 但是事实是你不应该一次性处理这么多的数据,而是采用虚拟滚动的方式,只显示可视窗口的数据
    mxT52CRuqR6o5
        21
    mxT52CRuqR6o5  
       2022-07-21 14:32:57 +08:00 via Android
    uiwebview 还是 wkwebview
    Features
        22
    Features  
    OP
       2022-07-21 15:01:37 +08:00
    @mxT52CRuqR6o5 uniapp 应该 wkwebview
    icyalala
        23
    icyalala  
       2022-07-21 18:09:03 +08:00
    iOS 如果使用 WKWebView 性能还是没问题的,它支持 JIT 。
    但小程序逻辑层运行在 JSCore 里,不是 WebView 里的,iOS 的 JSCore 禁用了 JIT ,所以性能很差。
    微信也提到了这点: https://developers.weixin.qq.com/minigame/dev/guide/performance/perf-action-cpu-worker.html
    jones2000
        24
    jones2000  
       2022-07-21 23:50:49 +08:00
    做虚表不就可以了。 你用 uniapp 的 canvas , 还不如用 webview 的 canvas 的性能高。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5368 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 08:00 · PVG 16:00 · LAX 01:00 · JFK 04:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.