goodlord
V2EX  ›  问与答

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

  •  
  •   goodlord · Nov 17, 2016 · 10572 views
    This topic created in 3491 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    如果是渲染速度有问题,那基本上没什么解决办法了,用更轻量级的框架好了……例如不用框架
    Pan940425
        26
    Pan940425  
       Nov 19, 2016
    歪个楼,每次看到把“ html5 ”缩写成“ h5 ”的时候,我都特别想问一句,你们让“ java8 ”情何以堪。。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3731 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 87ms · UTC 04:27 · PVG 12:27 · LAX 21:27 · JFK 00:27
    ♥ Do have faith in what you're doing.