一个临时性页面的优化

某一天，经理让做一个有关公司销售业绩的统计临时页面放到电视上，给当天来参观的客户观看。

第一个阶段：

情景：临时性功能，数据量小，sql简单，开发时间短。

对策：所有的东西都放在一个控制器里面，js和css等数据之间写在view层，数据实时查询。

 

公司业绩飞速发展，这个临时页面自从放到电视上之后就再也没有下来（咋有种被坑的感觉(⊙﹏⊙)b），而且按boss要求添加了很多新数据，页面也进行了重新设计。

第二个阶段

情景：数据量增大、sql越来越复杂，在系统负载高峰期，数据实时查询对数据库造成了很大的压力。

对策：优化sql，增加合适的索引；简化SQL，将业务逻辑从SQL分离，小sql快速执行；页面增加数据缓存功能。

 

半年过去了，这个临时功能依旧还活着(⊙﹏⊙)b，公司各个部门都想把自己的数据展示在上面。

第三个阶段

情景：领导要求增加的数据越来越多，数据越来越复杂，查询的sql很大很慢，造成页面打开速度非常缓慢。

对策：由于对当天之前的数据实时性要求不高，所以当天之前的数据采用定时脚本，每天凌晨统计好，存入统计表中，当天数据实时查询定时查询。从view层分离JS、CSS等文件，压缩页面图片、JS、CSS等。

 

一年之后......

第四个阶段

情景：需求激增，需展示的数据越来越多，数据越来越复杂，页面打开非常缓慢，有时候30秒也不一定打开。

对策：缩减主控制器，分离复杂数据；采用延迟加载、局部刷新，页面增加片段缓存。页面加载时，先加载页面整体框架和简单的数据，从而确保页面的打开速度；将复杂数据从主控制器里分离出来，缩减主控制器的加载时间；局部复杂数据等整个页面加载完毕后再通过ajax从后台获取。