H5动静分离

1. 动静分离的实现思路（类似于iOS、安卓的思路，后台提供数据接口，前端用ajax异步请求json数据，再把json数据渲染到页面）

动静分离是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。

动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。

1.1 静态资源部署至CDN上

我们的方案是直接将静态资源全部存放在CDN服务器上。因为之前项目中的JavaScript,CSS以及img文件都是存放在CDN服务器上，将HTML文件一起存放到CDN上之后，可以将静态资源统一放置在一种服务器上，便于前端进行维护；而且用户在访问静态资源时，可以很好利用CDN的优点——CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

1.2 后端API提供数据

后端应用提供API，根据前端的请求进行处理，并将处理结果通过JSON格式返回至前端。目前应用主要采用Java平台开发，因此应用服务器主要是Tomcat服务器，现在也开始有部分应用采用 node进行开发，应用服务器也开始使用node服务器。

1.3 前后端域名

动静分离因为静态资源和应用服务分别部署在不同的服务器上，因此会面临域名策略的选择。

• 相同域名

采用相同域名下，用户请求api时可以避免跨域所带来的问题，相对开发更为快速，工作量也相对小一些。

• 不同域名

前后端采用不同域名时，需要前后端开发时兼容跨域请求的情况，开发量相对上一种会稍多一些。解决跨域方式最常用的方式就是采用JSONP，还有一种解决方式使用CORS（HTTP访问控制）允许某些域名下的跨域请求。目前在我们的项目中JSONP方式更多，CORS因为需要浏览器支持，因此只会在APP内嵌HTML5，且需要POST方式时中使用。

采用不同域名的方式优点也是非常明显的，不同域名采用两个域名服务器，不同的域名服务器根据请求的不同采用不同的负载均衡策略；而且不同域名也可以邮箱方式前端携带过多的Cookie。

2. 动静分离的实现优缺点

2.1 优点

• api接口服务化：动静分离之后，后端应用更为服务化，只需要通过提供api接口即可，可以为多个功能模块甚至是多个平台的功能使用，可以有效的节省后端人力，更便于功能维护。
• 前后端开发并行：前后端只需要关心接口协议即可，各自的开发相互不干扰，并行开发，并行自测，可以有效的提高开发时间，也可以有些的减少联调时间
• 减轻后端服务器压力，提高静态资源访问速度：后端不用再将模板渲染为html返回给用户端，且静态服务器可以采用更为专业的技术提高静态资源的访问速度。

2.2 缺点

• 不利于网站SEO（搜索引擎优化）:搜索引擎的网络爬虫一般是根据url访问页面，获取页面的内容后去掉没用的信息例如：CSS，JavaScript，然后分析剩下的文本内容；动静分离架构模式前端数据即在是由JavaScript来完成，这就会导致网络爬虫得到的信息部分丢失。在开发中可以采用前端缓存不经常变化数据的方式来解决，只有哪些经常发生变化的数据才每次向后端请求。

• 开发量变大，前后端交流成本升高：后端api返回的数据，往往是有自身逻辑在内的，比如返回数据中的包含status（1-处理中，2-处理成功，3-处理失败），前端需要理解status的不同含义，对应的前端操作需要理解（如，status =1 or status = 2，不可提交）。

• 在业务高速发展时需要慎重考虑：因为开发量变大，如果在业务开始阶段，缺乏前端又要求开发速度很快，就需要慎重考虑这种方式的实现成本对业务发展的影响。

转自：http://blog.brucefeng.info/post/static-backend-asolate