上一篇我们聊了从CS到BS过渡阶段，大家对于基于Web的组件化尝试。今天，我们继续聊一下前端和后端的分离之路。
早期互联网和企业软件阶段，用户对体验的要求并不高，很多后端工程师也写前端代码，甚至很多业务逻辑都直接写到JSP或者ASP文件中。互联网和移动互联网的快速发展，让产品和设计封神。产品、设计、前端、后端等各个岗位也逐渐分工细化。
不同JSP页面的逻辑代码和数据，既有可以公用的部分，也有各自独特的部分。公用的部分，我们需要抽象出来复用。其中逻辑代码部分就抽象为了服务，数据模型部分就抽象为了数据对象。每个页面独特的部分也被抽象出来。我们会发现公用部分和独特部分，随着各自解决问题的不断变化而演化。甚至催生了不同工种的细化。
公用部分要解决可复用、高可用、高性能、可扩展性、数据一致等问题，逐渐朝着服务化方向演进。独特部分要解决用户不断变化的审美体验问题，逐渐朝着前后端分离的方向演进。
页面独特部分包括业务逻辑代码、页面数据和展示逻辑三个方面。我们当然希望展示逻辑能独立出来，这样就可以让专业的设计同学专注在用户体验上。于是我们让设计同学设计出PSD文件，然后前端同学根据设计图编写Html和JS代码，最后由后端同学根据Html代码编写JSP代码和Controller代码。甚至后端同学只提供接口，页面完全是前端同学编写。
我们单独来看展示部分。从用户体验上来说，页面加载要快，用户操作要流畅，这是对前端页面最基本的两个要求。但是想做好不容易，下面分别来说。
首先说一下加载要快的问题。Html在展示的时候，浏览器引擎是顺序加载的，其中单独引用的JS、CSS和图片文件会启动另外的Http链接去加载。多链接加载有优点也有缺点。优点是资源并行加载，整体加载速度会有提升。缺点是建立Http链接本身也会消耗时间，如果域名不一样，还有域名查找的消耗。因此资源文件需要分开加载，但是要注意不要分太多。
了解了加载的原理，我们再分别看一下各种资源文件的优化思路。
我们先得看页面上有哪些大块的资源，图片首当其冲。图片就有很多可优化的点。比如图片的尺寸是不是可以小一点呢，是不是可以根据屏幕大小自动适配呢；在不影响用户感官的情况下，图片是不是可以用压缩比更高的格式呢；如果图片很多、尺寸很小，是不是可以把几个图片合并到一个大图上；图片有没有利用CDN资源等等。做好图片的优化不容易。
其次是JS和CSS资源文件，压缩肯定是少不了的。再就是考虑页面的代码和数据的安全，我们还要做代码的混淆。与图片相同，我们也需要考虑不要分太多文件，考虑合并JS或者CSS文件。另外，同一个JS和CSS库文件，可能不同的页面需要的部分是不一样的，如果能按需加载，也能大幅提升网页加载的效率。
总结一下，前端开发有自己独特要解决的问题，也需要单独的开发上线流程。从最开始的设计到开发、测试、切图、混淆、打包、更新、版本管理等等。解决问题的变化，促使了前后端的分离。到底如何分工更合理，甚至到今天还有争论。
网友评论