1.Web的本质
web的本质是什么?web世界的两大主角 request & response 几乎说明了一切,客户端(浏览器)向服务器发起一个请求(request),服务器在收到请求后返回一个响应(response)给客户端,客户端接收到服务器的响应后把结果展示给用户。浏览器作为万千客户端中最流行最标准的一种,为开发人员做了绝大部分底层工作,使得我们只需关注Web的前端与后端。
后端通常负责数据存取相关的工作,前端通常负责展示结果给用户。不同的应用场景下,前端与后端的复杂度可能存在不同。比如在我们的开票系统中,查询开票数据、处理用户的开票请求都是后端去完成的,前端只负责在页面上展示后端的处理结果。而在一些网页游戏中,前端可能比后端复杂。比如某个游戏的场景里,游戏主角去打一个怪,使用了各种技能,最后把这个怪打死了。在这个过程里,对于后端来说,可能只需要把主角打的怪的数量加1,主角的血加1,主角的分数加1。而前端这个时候可能需要根据用户的技能来渲染各种特效,可能还需要经过一些算法来判断给对方的伤害值。
比较了上面的两种应用场景之后再来看看我们的业务系统。在我们的系统中,有些是不需要前端的,比如Job和MQ的listener。这类系统的交互对象是另外的系统,此时只需要处理完业务逻辑就可以,不负责展示结果给用户。而像账单这类负责展示数据给用户的系统则对前端的要求较高,这类系统的交互对象是人,所以这类系统对用户体验、性能等指标要求都比较高。
在我们公司的应用中,web系统(运行在tomcat容器中)包含service、mq和web。其中service和mq都不需要用户界面,一般只有web需要开发网页作为用户界面。APP的后端也是web,但这类web通常只提供标准的http接口,安卓客户端和iOS客户端通过http接口和后端系统进行交互,此时的用户界面由客户端提供,此处暂不讨论。
2.影响Web性能的因素
影响web性能的因素很多,可以参考经典问题:从输入网址到浏览器显示页面发生了什么
这个经典问题中的任何一个环节都可能影响用户的体验,通常来说优化思路有以下几种:
前端
- 静态资源走CDN
- 压缩&合并静态资源(js&css&图片)
- 缓存
- 启用GZIP支持
- css放在html顶部,js放在html底部
后端
- 多数据中心部署
- SQL层优化
- 合理的JVM参数设置
Web性能优化方案很多,但是实际上我们的Web系统QPS并不高(账单首页每天不到1W,其他web系统访问量更低),并且线上环境几乎都考虑了以上问题,所以以上的各种优化点并不用开发者太关心。相比之下,我们更关心的是开发效率。
3.Web前端开发技术选型
在Web性能并非关键问题的情况下,通过使用合适的框架可以明显提高开发效率。直白点讲,提升开发效率的宗旨就是:能一行代码搞定的事情就不要写更多的代码了!!!
以下列举几种适合我们公司web前端开发的技术选型方案
- A.jQuery
毋庸置疑,jQuery作为资深的JavaScript框架在操作Dom方面有着不可替代的地位,特别是其对ajax接口的封装简化了ajax操作。但jQuery也有其局限性,比如在双向数据绑定方面。 - B.Vue.js
vue.js在GitHub上有近60K的star,入门门槛低简单易上手,可以极大简化前端开发的一些操作。结合jQuery使用简直perfect。参考文档 http://cn.vuejs.org/v2/guide/ - C.layui
layui是国内的一款开源库,其中包含了弹层组件、日期组件、分页组件和符合现代审美的css库。这次开发提报系统中90%以上的css类都来自layui,简直不能更省心。 主页 http://www.layui.com/ - D.Handlebars 模板引擎
Handlebars在PC账单前端项目中已有使用,主要是结合弹层使用。详情参考文档 http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html
各种JS模板引擎对比数据参考 http://blog.csdn.net/wuchengzhi82/article/details/8938122
此外,对于前后端分离的项目,前端项目需要压缩上传至CDN,目前的开发环境已提供这个功能。