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

ajax+前端模板 VS php 页面做 hybrid app 哪种性能好?

  •  
  •   chshouyu · 2015-05-15 14:56:16 +08:00 · 3036 次点击
    这是一个创建于 3498 天前的主题,其中的信息可能已经有所发展或是发生改变。
    目前越来越多的应用采用hybrid app这种方式,就是ios或者Android做个外壳,里面是web页面
    目前有两种方式:
    1.ajax访问接口,得到数据后用前端模板渲染页面
    2.webview直接加载php+smarty做好的页面

    这两种方式哪个好一些呢?加载速度,性能方面的
    15 条回复    2015-05-15 22:05:06 +08:00
    zythum
        1
    zythum  
       2015-05-15 15:30:13 +08:00
    第一种如果不做资源缓存能慢死你。你想象多少串行请求么.
    chshouyu
        2
    chshouyu  
    OP
       2015-05-15 15:38:44 +08:00
    @zythum 只有一两个接口,大部分数据从一个接口里取
    zythum
        3
    zythum  
       2015-05-15 15:45:51 +08:00   ❤️ 1
    你算下http请求过程. 数据出来的网络耗时过程就知道了

    如果你的js是外链的:
    请求页面->请求js->请求ajax接口->完了
    如果你的js是行内的
    请求页面->请求ajax接口->完了
    请求页面->完了

    怎么着也要慢...

    除非你页面资源做 manifest 那么除了第一次慢还是
    请求页面->请求js->请求ajax接口->完了
    之后就是
    请求ajax接口->完了
    YuJianrong
        4
    YuJianrong  
       2015-05-15 17:43:29 +08:00
    @zythum 对于hybrid app你完全可以把所有静态资源存在app里,这样只有ajax接口请求。

    回到原问题,性能上前端渲染看用什么形式,angular的话就会慢点,react就会快点。后端渲染总的来说还是很快的,但数据刷新不用ajax的话会慢,用ajax的话意味着部分render是PHP后端做部分render是前端ajax,会导致设计复杂度提高。另外如果大量静态资源不缓存在app里的话,抓取耗时会很大。
    说得清楚点就是:

    前端渲染:
    React:
    首次渲染较快,数据更新极快,开发stack简单
    AngularJS
    首次渲染慢,数据更新一般,开发stack简单,学习曲线大
    Backbone:
    首次渲染较快,数据更新稍慢,开发stack简单

    后端渲染:
    纯PHP
    首次渲染较快,数据更新较慢,开发stack简单
    PHP+Ajax
    首次渲染较快,数据更新较快,开发stack复杂
    zythum
        5
    zythum  
       2015-05-15 17:50:09 +08:00
    @YuJianrong 如果js都是静态打在app里面的话更新js不是需要发版?
    zythum
        6
    zythum  
       2015-05-15 17:51:15 +08:00
    @YuJianrong 用hybrid的好处不就是更新迭代快。不需要发版么?
    b821025551b
        7
    b821025551b  
       2015-05-15 17:51:40 +08:00
    @zythum 为什么我感觉第一种比较好,资源(包括js)都封装在客户端,ajax只请求数据
    zythum
        8
    zythum  
       2015-05-15 17:58:51 +08:00
    @b821025551b 我没有做个hybrid开发。但是我还是感觉库代码打包进去ok。但是业务代码打包进去的话如果业务改动或者修改bug,那么就需要发版才能更新。那和native app相比就没有优势了。hybrid的优势是灵活,随时上线,迭代快。如果有什么我没有考虑到的请指出。
    learnshare
        9
    learnshare  
       2015-05-15 18:06:57 +08:00
    展示型页面后端渲染模板(数据交互少),数据交互多的(管理后台等)可以选择前端渲染页面,Ajax 等方式与 API 通信。
    b821025551b
        10
    b821025551b  
       2015-05-15 18:17:57 +08:00
    @zythum 基本功能用到的资源封包进去,数据用ajax调用;经常增加的比如活动这类,整个页面请求url,这样整个开发可以用js实现,之后cordova之类的进行封装,相比native app的优势就是成本低,适合刚刚起步的资金、人员不足的项目。
    zythum
        11
    zythum  
       2015-05-15 18:26:42 +08:00
    @b821025551b 嗯。却是这样没问题。
    chshouyu
        12
    chshouyu  
    OP
       2015-05-15 19:13:42 +08:00
    @zythum 现在有一种形式是,html,css,js打包成一个zip包,客户端会检测这个包的更新情况,下载zip包,在客户端里解压,以file://协议展示页面,web请求只有一个ajax接口
    如果页面有更新,上传新的zip包就可以,这样客户端也不必发版了
    koodai
        13
    koodai  
       2015-05-15 21:01:41 +08:00 via iPhone
    必须收藏,之前绕了好大弯子,走过了,才知道有多冤枉!
    刚开始完全ajax请求json数据,客户端渲染,后来发现有些页面真的代码显得特别冗余,笨拙而丑陋,直接加载远程网页刚方便!
    楼上几名老司机很给力
    YuJianrong
        14
    YuJianrong  
       2015-05-15 21:50:13 +08:00
    @zythum 上面已经说过了,你可以直接更新本地静态文件不用发版。简单来说只要登陆请求的时候发一下本地文件版本号,版本有更新的话就先把更新的文件下载到本地更新一下再继续跑。
    matsuijurina
        15
    matsuijurina  
       2015-05-15 22:05:06 +08:00 via iPad
    我之前先用lumen微框架为公司旧的wordpress项目实现了CRUD API接口,然后用ionic 加 angularjs实现了完整的ajax交互json数据,包括用户注册登录等等,最终开发出iOS+android双版本app....

    最后发现,真的不如直接换一个wordpress响应式模板,套个webview去访问就好。一晚上就能解决的事情。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   889 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:50 · PVG 03:50 · LAX 11:50 · JFK 14:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.