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

微信端 h5 页面开发,如何选择轻量级的框架

  •  
  •   goodlord · 2016-11-17 17:09:39 +08:00 · 9957 次点击
    这是一个创建于 2927 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我已经开发了一个类似有赞的微店店铺,在微信 app 里扫码打开,后端用的 spring ,前端用的 bootstrap 4 , angular 1.4 ,自己手写 css 和 html 。问题是首页加载比较慢,所有的 js 都在首页加载了,听说 angular 框架是重量级的。所以上网搜索了一些框架: angular 2 , ionic : https://github.com/driftyco/ionic , mobile-angular-ui : https://github.com/mcasimir/mobile-angular-ui

    angular2 是移动优先的, ionic 里用到了 angularjs 2.2.1 版本,但是它提供的控件啥的我这个网站貌似用不到, mobile-angular-ui 好像也要引用 angularjs ,不知道啥版本,它能提高网站的响应速度吗?还有推荐 react.js , vue.js 的。

    请教各位,我该使用哪个框架来获得最好的加载速度和响应速度以及性能?

    26 条回复    2016-11-19 11:29:49 +08:00
    lhx2008
        1
    lhx2008  
       2016-11-17 17:17:04 +08:00 via Android
    weui ?
    JohnLou
        2
    JohnLou  
       2016-11-17 17:19:11 +08:00
    写原生,相信哥。
    anubiskong
        3
    anubiskong  
       2016-11-17 17:28:37 +08:00
    如果是我, 最多用个 backbone
    永远不要小看安卓兼容性的垃圾程度, 不要使用任何新奇的技术, 除非它本身是用来解决兼容性的.
    angular2 我在实际项目中间接的用过, 这种屎一样的东西不想再碰了, 无论是兼容性还是使用的体验各个方面.
    微信内的电商项目明显是业务侧重, 所以你别想着用新技术了, 把重点放在业务层面的实现上会让你轻松很多, 光是业务层面就够坑爹了
    祝项目顺利
    rockdai
        4
    rockdai  
       2016-11-17 17:32:34 +08:00
    原生,样式可以 weui
    dqh3000
        5
    dqh3000  
       2016-11-17 17:43:44 +08:00
    是哪的问题,加载速度还是响应速度,你可以测试啊

    我觉得响应速度如果没用很复杂的东西的话应该差不多太多吧

    加载速度也有网络因素的,如果是要减小文件体积,那有各种方法的,例如模块分割, gzip ,提高服务器带宽,这些可能都比换框架快吧?

    如果一定要换,也得证明瓶颈在框架吧
    learnshare
        6
    learnshare  
       2016-11-17 18:05:55 +08:00
    页面不复杂的话, jQuery 也无妨
    jarlyyn
        7
    jarlyyn  
       2016-11-17 18:35:08 +08:00
    问题是慢,还是大。
    murmur
        8
    murmur  
       2016-11-17 18:38:18 +08:00
    微信端不就是偏浏览么,你真想做成 app 啊,那基本没戏的
    没几个人有招行那个魄力,人家的东西就是纯服务的,你封了也不怕人家照样有客户端撑着
    lijsh
        9
    lijsh  
       2016-11-17 19:03:52 +08:00
    用什么工具和业务场景有关,如果逻辑简单的话原生足矣;但店铺这种应该上框架的了, angular 和 bootstrap 其实也没什么不对,很多微信端的 app 都用,想快一点可以看看工程上有什么可以做的:
    bootstrap 有 angular 版本的组件集 https://angular-ui.github.io/bootstrap/ ,建议原生 bootstrap 只引入 css ,其它组件用这个;
    首屏是重中之重, index.html 可以给一点初始元素,先把首屏内容渲染出来。
    做好打包工作,看看有没需要按需加载等等。
    lijsh
        10
    lijsh  
       2016-11-17 19:05:12 +08:00
    移动端的话 vue 更轻量,我们的移动项目也在用。
    goodlord
        11
    goodlord  
    OP
       2016-11-17 19:55:58 +08:00
    @anubiskong ,现在业务层的逻辑不复杂,处于 demo 阶段,以后可能会慢慢变得复杂。新技术对安卓手机的支持很不好吗?
    goodlord
        12
    goodlord  
    OP
       2016-11-17 20:02:03 +08:00
    @dqh3000 ,瓶颈确实可以调试,但是 angular1.x 已经是公认的重量级的框架了,给人的印象就是不适合移动端的开发。 angular.min.js 142kB, 用时 27ms, angular-ui-router.min.js 28.2kB,用时 25ms 。所有的 js 都在首页加载了。
    goodlord
        13
    goodlord  
    OP
       2016-11-17 20:07:03 +08:00
    @lijsh ,没感觉很多 app 在用这个,现在只用了 bootstrap.min.css, 4.0 版本的, bower 安装 bootstrap 后出现了你说的 angular-boostrap 文件夹,应该对应你给的链接了,你说的先给一点初识元素不是很懂, vue 好像国内的人用的比较多,你觉得如果用 vue 或者 angular2 会不会带来性能提升?
    goodlord
        14
    goodlord  
    OP
       2016-11-17 20:08:08 +08:00
    @jarlyyn ,首页加载慢,主要是有很多图片,图片压缩过还是大,有一些图片有几十 KB 。
    jarlyyn
        15
    jarlyyn  
       2016-11-17 20:11:43 +08:00
    如果是 js 的问题,可以用 requrie.js
    速度慢可以考虑用 cdn

    前端永远会处在一个不断重构的过程中。

    没有必要的话,不需要强行上新技术。等你坑踩遍了,更新的坑又出来了。

    一般来说, backbones+jquery/zepto,足够对付一般的应用了。

    最后,没必要 bootstrap
    anubiskong
        16
    anubiskong  
       2016-11-17 21:55:56 +08:00
    @goodlord 我是个半吊子程序员和产品经理, 不懂算法也不懂架构, 只是用过的东西很多所以有些许自己的观点, 另外接触了个别大牛也是深有感触. 要说唯一从 10 年从业中学到的, 就是"简洁". 无论什么需求什么行业甚至是 IT 以外的生活做人方面深深的体会到简洁的好处. 前端已经不是 5 年前那种荒芜之地了, 在现在这规范已经比较成熟的年代, 用用 jquery backbone underscore 啥的就可以把 js 包装成很好的工具了, css 方面用上 less/sass 就是如此, 再添加新东西进去都是没必要的. 什么 google 什么微软甚至于苹果, 这 10 年来我见过他们搞的像样的东西就是 webkit, 其他都是屎
    zhouquanbest
        17
    zhouquanbest  
       2016-11-17 23:25:20 +08:00
    没太大必要针对微信选择框架吧
    平时 H5 喜欢什么就什么咯

    而且微信兼容性挺好的 TBS ( Android 公测)已经 3.0 升级到 Chrome52 内核那个版本了
    jimyan
        18
    jimyan  
       2016-11-17 23:28:53 +08:00 via Android
    vue
    finely
        19
    finely  
       2016-11-17 23:58:36 +08:00 via Android
    vue 很轻量,兼容性也不错
    em70
        20
    em70  
       2016-11-18 01:46:20 +08:00 via iPhone
    微信小程序马上出来,还做 HTML5 会死得很难看
    dqh3000
        21
    dqh3000  
       2016-11-18 10:10:37 +08:00
    @goodlord 图片可以 lazy load ,我没有反对你换框架,我只是说明确原因在哪

    所有的 js 加载都在首页,是指模块的加载吗?如果这样要考虑怎么分开,我现在用 react ,模块分开主要是基于 webpack 的延迟加载
    zhihaofans
        22
    zhihaofans  
       2016-11-18 11:16:12 +08:00 via Android
    @em70 微信不也是 html5 吗。。。
    em70
        23
    em70  
       2016-11-18 12:38:13 +08:00 via iPhone
    @zhihaofans 小程序不是 HTML5
    goodlord
        24
    goodlord  
    OP
       2016-11-18 16:18:56 +08:00
    @dqh3000 所有的 js 和 css 都在首页引入了,跳转到其他页只是 html 里的 body 被替换了,用了 ui-view 指令。网上说了: Angular 以及所有前端 SPA 程序,都有一个通病:首次加载太慢,要下载完所有 js 和 css 才能渲染出完整的界面来。 React 通过虚拟 DOM 解决了此问题,而 Angular 2 则通过独立的服务端渲染引擎解决了这个问题。不知道是不是真的。你觉得 react 好用吗?
    dqh3000
        25
    dqh3000  
       2016-11-18 16:36:04 +08:00
    @goodlord

    这样理解是不对的,没有“一定必须”下载所有 js 和 css 才能渲染出完整界面的说法

    就例如你的网站有 100 个页面,这是很可能的吧,然后每个页面可能都有独立的业务逻辑, css 样式,如果一个 SPA 应用都必须一开首页就把所有 100 个页面的所有逻辑( JS 代码)和 css 样式都下载下来,然后才能用,那 SPA 早就没人用了~~

    现在很多框架都能服务端渲染的,不止 Angular 2 ,这个确实解决了一些问题,不过也带来了另一些问题~~

    我的意思是,如果这个是加载速度的问题,那有也就无非是服务端渲染,或者各种模块独立,各自延迟加载等方法。

    如果是渲染速度有问题,那基本上没什么解决办法了,用更轻量级的框架好了……例如不用框架
    Pan940425
        26
    Pan940425  
       2016-11-19 11:29:49 +08:00
    歪个楼,每次看到把“ html5 ”缩写成“ h5 ”的时候,我都特别想问一句,你们让“ java8 ”情何以堪。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2905 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 03:53 · PVG 11:53 · LAX 19:53 · JFK 22:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.