V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yulanggong
V2EX  ›  程序员

关于小程序的两个猜测: 1. 性能体验和 H5 几乎持平, 2.不能做出流畅的游戏。

  •  3
     
  •   yulanggong ·
    yulanggong · 2017-01-11 09:57:40 +08:00 · 12084 次点击
    这是一个创建于 2855 天前的主题,其中的信息可能已经有所发展或是发生改变。
    1. 之所以性能和 H5 持平是因为他本身就是 H5 + JSBridge , 而不是 React Native 或 Weex 的 JS + Native 的方式。
    2. 因为微信没能开发出足够流畅的游戏引擎,就假借各种公众号之口说苹果不让做游戏。(前期还有宣传苹果不让小程序做直播,如今疼讯家直播就上了小程序。)
    第 1 条附言  ·  2017-01-11 13:17:48 +08:00

    引自官方说明

    三端的脚本执行环境聚以及用于渲染非原生组件的环境是各不相同的:

    • 在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中,是由 WKWebView 来渲染的,环境有 iOS8、iOS9、iOS10
    • 在 Android 上,小程序的 javascript 代码是通过 X5 JSCore来解析,是由 X5 基于 Mobile Chrome 37 内核来渲染的
    • 在 开发工具上, 小程序的 javascript 代码是运行在 nwjs 中,是由 Chrome Webview 来渲染的
    74 条回复    2021-01-14 17:24:05 +08:00
    Ariagle
        1
    Ariagle  
       2017-01-11 10:04:00 +08:00 via iPhone
    游戏收入才是苹果商店大头。
    murmur
        2
    murmur  
       2017-01-11 10:07:25 +08:00
    即便是 2017 ,你可以回想下你在手机上玩到的 h5 游戏最好的是哪个,对于我来说,当然是 flappy fog ,其余的无一例外 native
    murmur
        3
    murmur  
       2017-01-11 10:07:46 +08:00
    更正一下,是众筹的小鸟
    em70
        4
    em70  
       2017-01-11 10:12:58 +08:00 via Android
    小程序不是 HTML5
    yulanggong
        5
    yulanggong  
    OP
       2017-01-11 10:13:38 +08:00
    @murmur 所以猜测不是苹果不让,是微信为了遮羞。
    2zH
        6
    2zH  
       2017-01-11 10:15:42 +08:00   ❤️ 2
    小程序的性能在大范围动画上还不行,很卡
    murmur
        7
    murmur  
       2017-01-11 10:23:34 +08:00
    @em70 那你用 react native 开发一个游戏咯,小程序不就是 reacT naTive 么
    arron
        8
    arron  
       2017-01-11 10:28:15 +08:00   ❤️ 1
    @em70 我昨天在 iOS8 上看了一下,小程序是启动了一个 WKWebView 来运行的。能执行 alert ,可以确定小程序是运行在 webView 容器里的, 也就是用的 HTML 。
    loading
        9
    loading  
       2017-01-11 10:29:12 +08:00
    忽略主题
    lynnX
        10
    lynnX  
       2017-01-11 10:30:46 +08:00
    苹果和微信有协议 不允许上游戏
    sodatea
        11
    sodatea  
       2017-01-11 10:30:46 +08:00
    @murmur 谁告诉你小程序是 React Native 的?想当然可不好。
    murmur
        12
    murmur  
       2017-01-11 10:31:38 +08:00
    @sodatea 看我的拼写 为什么 T 是大写的呢
    murmur
        13
    murmur  
       2017-01-11 10:34:26 +08:00
    @arron 那就有意思了,如果他的容器真是 WebView 那性能还不如 Weex 呢
    不过最终还是要用安卓或者 IOS 源生的调试工具看最后渲染出来的是组件还是 html dom 元素
    能执行 alert 不代表就是混合应用啊
    hasbug
        14
    hasbug  
       2017-01-11 11:04:27 +08:00
    貌似有人提到动画的局限性,所以,我认为楼主说的在理
    leafleave
        15
    leafleave  
       2017-01-11 11:07:21 +08:00 via Android
    即使能做出来游戏,费的流量也不会比直接下载少,不值。
    mooncakejs
        16
    mooncakejs  
       2017-01-11 11:09:57 +08:00
    @arron
    @sodatea
    小程序比单纯的 HTML5 好的地方是可以“渐进增强”,即使现在是 webview 做的,完全可以升级到 native 。
    ivmm
        17
    ivmm  
       2017-01-11 11:12:59 +08:00
    其实我觉得,不会是因为协议问题吧。
    ivmm
        18
    ivmm  
       2017-01-11 11:13:39 +08:00
    @ivmm

    如果 iOS 平台没有微信、 QQ ,卧槽,那估计也是废了。

    应该不是协议的问题,是性能不足,动画一多就跪
    yulanggong
        19
    yulanggong  
    OP
       2017-01-11 11:20:54 +08:00
    @mooncakejs 渐进增强并不容易,现在小程序 native 的部分包括 tabbar , toast , alert 等脱离页面内容的东西,页面内并不能渐进增强。要么彻底换掉,要么用 webview 。
    Bown
        20
    Bown  
       2017-01-11 11:59:48 +08:00
    Android 上打开开发者模式的显示布局边界可以看出某些控件(地图视频 Tab )是原生的,而且小程序规范语法有审核,普通 HTML5 加载到微信的 WebView 少不了各种检查预处理什么的,性能应该会好点吧
    arron
        21
    arron  
       2017-01-11 12:15:16 +08:00
    @murmur 意思是用 cycript 可以把那个 WebView 容器选出来执行 HTML 相关的 js 代码, alert 能跑,那么其他 dom 自然没问题,虽然没细究,但是可以肯定。因为如果用 cocoa UI 去渲染,那么只需要用 JavaScriptCore 就可以了,根本不需要 WKWebView 。小程序这一套用 WebView 来渲染比用原生去做要好处理得多,别的不说,就 canvas 那一套规则就不容易搞。至于性能怎么样,就看使用场景了。
    xjp
        22
    xjp  
       2017-01-11 12:21:19 +08:00 via iPhone
    小程序是 native+html 结合的控件
    spark
        23
    spark  
       2017-01-11 13:01:08 +08:00
    游戏可以做,有 Canvas 。
    体验嘛,见仁见智。
    Vanessa
        24
    Vanessa  
       2017-01-11 13:08:07 +08:00
    所以小程序应该降温了么? 但我还是做了一个, https://hacpai.com/tag/book_share ,需要体验的可前往 https://hacpai.com/register?r=Vanessa 进行注册
    yulanggong
        25
    yulanggong  
    OP
       2017-01-11 13:31:36 +08:00
    morethansean
        26
    morethansean  
       2017-01-11 14:03:45 +08:00
    @murmur
    @arron

    问了内部的人,是 native 的。大概就是 native + html 结合吧,像楼主 append 里列的 非原生组件 的渲染。
    em70
        27
    em70  
       2017-01-11 14:25:13 +08:00 via Android
    @yulanggong

    @murmur

    @arron

    跑在浏览器里的不一定就是 HTML,小程序的渲染是微信自己用 js 开发的一套渲染引擎,没有用 HTML 渲染,效率比 HTML 高得多
    phoneli
        28
    phoneli  
       2017-01-11 14:43:42 +08:00
    @em70 对的。
    arron
        29
    arron  
       2017-01-11 15:03:43 +08:00
    @morethansean
    跟安卓一样, native 那是顶部 navigation , alert , actionSheet 之类的。内容部分就是 HTML 。你那内部人估计也没搞清楚。
    @em70 你猜的?

    证据:

    [choose(WKWebView)[0] evaluateJavaScript:"document.getElementsByClassName('desc')[0].innerHTML='Im webView'" completionHandler: nil];



    arron
        30
    arron  
       2017-01-11 15:11:11 +08:00
    @em70 你不要告诉我小程序在 webView 容器里面基于 HTML 开发出了一套不需要 HTML 渲染,效率比 HTML 高得多的 UI 引擎!
    em70
        31
    em70  
       2017-01-11 15:18:31 +08:00 via Android
    @arron 只是用了 webview 里的 js 引擎,用纯 js 绘制一个视觉控件,不行吗?
    em70
        32
    em70  
       2017-01-11 15:20:52 +08:00 via Android
    @arron
    就像页游,用 flash 渲染的,也没有用 HTML
    sujin190
        33
    sujin190  
       2017-01-11 15:23:35 +08:00
    奇怪,早期的文档中确实写了是使用类似 reactnative 的方式渲染的,现在怎么没有了,不过真说起来这性能真的是不行,用 webview 渲染还真有可能。。
    arron
        34
    arron  
       2017-01-11 15:25:22 +08:00
    @em70 楼主补充了。 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/details.html?t=201715
    iOS WKWebView , Android Mobile Chrome 。在 WebView 里面你不论是写 HTML 还是用 js createElement 那是一样的。谈不上性能差。况且小程序就是写的 HTML ,那个 wx-view 跟 div 是一个效果。
    funCoder
        35
    funCoder  
       2017-01-11 15:37:15 +08:00
    试试用 Chrome 去调试 WebView 看看; https://geminiwen.xyz/2017/01/10/mini-program/
    em70
        36
    em70  
       2017-01-11 15:42:16 +08:00 via Android
    @arron 你对 js 理解太局限了, js 并不是非要依赖 HTML 的,和其他语言一样,也是具备图形绘制能力的,完全可以自己绘制一个自己的界面。
    jhdxr
        37
    jhdxr  
       2017-01-11 16:05:06 +08:00
    @em70 js 的确并不依赖 html ,执行的时候也只需要 JavaScriptCore ( iOS 平台)即可,但小程序『是由 WKWebView 来渲染的』,那很明显是(部分)转成了 html ,最终由 webview 来渲染的。

    之所以我加了个部分,是因为有些组件(例如上面有人提到的地图)就是 native 的


    @sujin190 我也记得我以前看到过是全部以 native 渲染的,估计在实现上踩坑了,然后又得赶着上线,只能先这么用了
    em70
        38
    em70  
       2017-01-11 16:24:17 +08:00 via Android
    @jhdxr WebKit 才是 HTML 渲染引擎, webview 只是一个集成多种引擎的容器。小程序如果是 HTML 的,应该可用 window 和 document 对象,但并不支持,所以也不能用 jQuery
    rogerchen
        39
    rogerchen  
       2017-01-11 16:43:17 +08:00
    @jhdxr
    想要全 native 渲染基本就靠企鹅无限制的堆人力去做 binding ,而且 iOS 一放 beta 就开始全组加班的画面是不是太美了。。。
    不过大厂有的是钱,说不定就这么搞 2333333
    morethansean
        40
    morethansean  
       2017-01-11 16:48:42 +08:00 via Android
    @arron 再次确认了一下,是 native
    d553296416
        41
    d553296416  
       2017-01-11 17:00:22 +08:00   ❤️ 2
    楼上一群人连 jscore 和 x5 是什么都不知道。。。所以想当然的说是 html 。。因为他们只知道 html ,,他们觉得 webview==html , 无知是可怕的,可怕的是无知还要说出来
    arron
        42
    arron  
       2017-01-11 17:33:28 +08:00   ❤️ 1
    @em70 你想多了,在 WKWebView 里面只有一个渲染视图引擎,就是 WebKit 。你举出第二个来?小程序不能用 window , document 是小程序屏蔽了,不让你用。我前面那两张图就是测试了,就是在微信的那个 webView 实例里面,用 document 去修改视图。你要是还是觉得不是 HTML ,你可以说一下小程序的实现原理。

    @morethansean 官方文档里写了, https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/details.html?t=201715 iOS 是由 WKWebView 来渲染的。

    @d553296416 你以为的 jscore 和 x5 是什么? X5 基于 Mobile Chrome , Mobile Chrome 是什么?浏览器啊,你现在告诉我浏览器跑的不是 HTML ?你来解释一下小程序的实现原理。
    greatghoul
        43
    greatghoul  
       2017-01-11 17:39:01 +08:00
    小程序其它是用易语言做的。
    serve99
        44
    serve99  
       2017-01-11 17:43:15 +08:00
    @d553296416 人外有人,山外有山,你说话的语气,真让人受不了
    zhchyu999
        45
    zhchyu999  
       2017-01-11 18:54:18 +08:00
    不让用 window 或者 document 可能是因为用原生的方式不太稳定,先用 webview 用着,但是保持以后 reactnative 语法的兼容性.
    echohanyu
        46
    echohanyu  
       2017-01-11 20:02:02 +08:00
    有直播类的小程序?我正在做这个产品规划。
    nashxk
        47
    nashxk  
       2017-01-11 21:33:30 +08:00
    就流畅度, Android 上的小程序比 H5 好太多了。。。
    ic3z
        48
    ic3z  
       2017-01-11 21:36:29 +08:00 via Android
    大 web 一统天下指日可待。
    jhdxr
        49
    jhdxr  
       2017-01-11 21:41:20 +08:00
    @d553296416 好大的口气,没看见 LZ 的 append 吗?『是由 WKWebView 来渲染的』『是由 X5 基于 Mobile Chrome 37 内核来渲染』,我们讨论说是 html 是基于这一点来判断的。既然你那么厉害,那你来告诉我, webview 除了渲染 html ,还能渲染神马?别告诉我是 css 和 js 。装逼是要给出干货的,不然你就是傻逼了
    alexapollo
        50
    alexapollo  
       2017-01-11 22:06:59 +08:00
    不管如何,小程序的体验确实比一般的 HTML5 应用好非常多
    HLT
        51
    HLT  
       2017-01-11 22:11:36 +08:00
    就是 native 加 html
    sujin190
        52
    sujin190  
       2017-01-11 22:53:42 +08:00
    @jhdxr 这个解释非常合理
    xuboying
        53
    xuboying  
       2017-01-11 23:07:01 +08:00 via Android
    初代苹果不允许三方 app 。微信完成了这个轮回。
    xlvecle
        54
    xlvecle  
       2017-01-11 23:24:50 +08:00
    @arron 好歹上了个 cycript 的运行时分析,支持方都是靠脑补
    lan894734188
        55
    lan894734188  
       2017-01-12 00:38:50 +08:00 via Android
    感觉就是 super webview
    d553296416
        56
    d553296416  
       2017-01-12 01:01:08 +08:00
    @jhdxr 还真的是 js 。。。
    d553296416
        57
    d553296416  
       2017-01-12 01:02:27 +08:00
    本身就是下发 js 代码 通过 x5 或 jscore 解释器 最终调用的原生组件啊。。。
    jhdxr
        58
    jhdxr  
       2017-01-12 01:54:58 +08:00
    @d553296416 你想说的是像 react native 那样吗?那的确和 html 没关系,人家也没用的 webview ,就只是 jscore 解释运行而已。但是你看清楚了小程序说的是『运行在 JavaScriptCore 中』『由 WKWebView 来渲染』,换句话说,最终调用的还是 webview ,那自然很合理的就能推测是翻译成了 html 。而且 29 楼 @arron 也给了例子,你要是调用的是(除了 webview 以外的)原生组件,哪来的 document 给你改?
    tenca
        59
    tenca  
       2017-01-12 02:29:07 +08:00
    小程序的产品定位就不是为了做游戏
    leefly
        60
    leefly  
       2017-01-12 09:02:11 +08:00
    @arron 这个是怎么看的 😳
    jiongxiaobu
        61
    jiongxiaobu  
       2017-01-12 09:13:58 +08:00 via iPhone
    大概主要运算单独一个 js 线程了吧, ui 就不会被 block 了
    Mbin
        62
    Mbin  
       2017-01-12 09:21:58 +08:00
    哪来那么多争论的,就现在使用体验来看,不管是 ios 还是 Android , H5 都比小程序差了一大截-_-
    arron
        63
    arron  
       2017-01-12 09:50:40 +08:00
    ibufu
        65
    ibufu  
       2017-01-12 10:49:32 +08:00
    小程序是一个产品,不是什么技术解决方案,它的目的是建立一个属于腾讯的庞大生态圈,技术什么的都是次要的。
    之所以小程序的开发语言高度抽象,就是为了将来可以无缝切换升级底层技术。
    yatessss
        66
    yatessss  
       2017-01-12 11:30:37 +08:00
    不是微信实现了一套 jsbridge 嘛 难道我想错啦。。。。
    faywong8888
        67
    faywong8888  
       2017-01-12 11:31:11 +08:00
    @arron 正解,我早上起来写了一篇博客——[纠正对微信小程序的一个认知]( http://faywong.github.io/2017/01/12/weixin_xiaochengxu_01/),观点就是目前的小程序主要就是 native 。
    faywong8888
        68
    faywong8888  
       2017-01-12 11:33:27 +08:00
    @faywong8888 手抖,敲错了,是:[纠正对微信小程序的一个认知]( http://faywong.github.io/2017/01/12/weixin_xiaochengxu_01/)
    damngood
        69
    damngood  
       2017-01-12 11:47:48 +08:00   ❤️ 1
    我的一些猜测:

    应该就是普通的 Web 技术来实现的, 比普通的 web app 体验要好的原因是小程序他有自己的一套框架, 如果框架既定的话,微信就比较容易来实现一些性能优化.
    而常规的 web app 体验的好坏和开发者的水平有直接的关系.
    我相信能力强的开发者做出来的 web app 体验未必会比小程序差多少.

    还有一个重要的原因在于 native 环境可以对 web 的一些关键步骤做增强

    比如我现在负责实现公司的 native-to-web bridge, 在启用 bridge 后体验确实会好不少.
    而且还有很多优化的余地, 比如把资源放在本地,然后采用某种策略来动态更新本地资源而不依靠 browser 来更新资源, 效果应该还会好不少. 这一步是我现在正在尝试的方向

    还有一句话想说: NO Magic !不必要过分迷信和臆想, 都是可以通过自己分析出来的嘛....
    zheqi
        70
    zheqi  
       2017-01-12 16:52:11 +08:00
    产品考虑业务,总裁考虑战略,我们程序员才考虑性能。
    d553296416
        71
    d553296416  
       2017-01-17 01:33:05 +08:00
    @jhdxr rn 就是用了 webkit 渲染的啊。。 wk 就是 webkit 里面的啊,但 rn 不是 html5 啊。。。。。大哥你是得有多菜。。。。
    xu33
        72
    xu33  
       2017-01-22 17:10:29 +08:00
    @d553296416 看到这里可以确认你是无脑喷了
    CDuXZMAPgHp1q9ew
        73
    CDuXZMAPgHp1q9ew  
       2018-01-02 15:55:01 +08:00
    挖坟
    towry
        74
    towry  
       2021-01-14 17:24:05 +08:00
    再挖
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3377 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 11:35 · PVG 19:35 · LAX 03:35 · JFK 06:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.