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

iOS webview 性能是否很差?

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

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

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

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

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

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

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

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

    这只是站在底层上来看, 但是事实是你不应该一次性处理这么多的数据,而是采用虚拟滚动的方式,只显示可视窗口的数据
    mxT52CRuqR6o5
        21
    mxT52CRuqR6o5  
       135 天前 via Android
    uiwebview 还是 wkwebview
    Features
        22
    Features  
    OP
       135 天前
    @mxT52CRuqR6o5 uniapp 应该 wkwebview
    icyalala
        23
    icyalala  
       135 天前
    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  
       134 天前
    做虚表不就可以了。 你用 uniapp 的 canvas , 还不如用 webview 的 canvas 的性能高。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2506 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 44ms · UTC 15:45 · PVG 23:45 · LAX 07:45 · JFK 10:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.