一、静态页面

静态页面,是指互联网架构中,几乎不变的页面(或者变化频率很低),例如:

首页等html页面

js/css等样式文件

jpg/apk等资源文件

二、动态页面

动态页面,是指互联网架构中,不同用户不同场景访问,都不一样的页面,例如:

百度搜索结果页

淘宝商品列表页

速运个人订单中心页

这些页面,不同用户,不同场景访问,大都会动态生成不同的页面。



动态页面,有与之匹配的技术架构,例如:

分层架构

服务化架构

数据库,缓存架构

三、互联网动静分离架构

动静分离是指,静态页面与动态页面分开不同系统访问的架构设计方法。



一般来说:

静态页面访问路径短,访问速度快,几毫秒

动态页面访问路径长,访问速度相对较慢(数据库的访问,网络传输,业务逻辑计算),几十毫秒甚至几百毫秒,对架构扩展性的要求更高

静态页面与动态页面以不同域名区分

四、页面静态化

既然静态页面访问快,动态页面生成慢,有没有可能,将原本需要动态生成的站点提前生成好,使用静态页面加速技术来访问呢?

这就是互联网架构中的“页面静态化”优化技术。

举例,58同城的帖子详情页,原本是需要动态生成的:



浏览器发起http请求,访问/detail/12348888x.shtml详情页

web-server层从RESTful接口中,解析出帖子id是12348888

service层通过DAO层拼装SQL语句,访问数据库

最终获取数据,拼装html返回浏览器

而“页面静态化”是指,将帖子ID为12348888的帖子12348888x.shtml提前生成好,由静态页面相关加速技术来加速:



这样的话,将极大提升访问速度,减少访问时间,提高用户体验。

五、页面静态化的适用场景

页面静态化优化后速度会加快,那能不能所有的场景都使用这个优化呢?哪些业务场景适合使用这个架构优化方案呢?

一切脱离业务的架构设计都是耍流氓,页面静态化,适用于:总数据量不大,生成静态页面数量不多的业务。例如:

58速运的城市页只有几百个,就可以用这个优化,只需提前生成几百个城市的“静态化页面”即可

一些二手车业务,只有几万量二手车库存,也可以提前生成这几万量二手车的静态页面

像58同城这样的信息模式业务,有几十亿的帖子量,就不太适合于静态化(碎片文件多,反而访问慢)

六、实现动静分离的优缺点

优点:


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

缺点:


  • 不利于网站SEO(搜索引擎化):搜索引擎的网络爬虫一般是根据url访问页面,获取页面的内容后去掉没用的信息例如:CSS,JavaScript,然后分析剩下的文本内容;动静分离架构模式前端数据即在是由JavaScript来完成,这就会导致网络爬虫得到的信息部分丢失。在开发中可以采用前端缓存不经常变化数据的方式来解决,只有哪些经常发生变化的数据才每次向后端请求。
  • 开发量变大,前后端交流成本升高:后端api返回的数据,往往是有自身逻辑在内的,比如返回数据中的包含status(1-处理中,2-处理成功,3-处理失败),前端需要理解status的不同含义,对应的前端操作需要理解(如,status =1 or status = 2,不可提交)。
  • 在业务高速发展时需要慎重考虑:因为开发量变大,如果在业务开始阶段,缺乏前端又要求开发速度很快,就需要慎重考虑这种方式的实现成本对业务发展的影响。

七、总结

“页面静态化”是一种将原本需要动态生成的站点提前生成静态站点的优化技术。

总数据量不大,生成静态页面数量不多的业务,非常适合于“页面静态化”优化。