2014.07.10 性能优化：系统首页展示数据过多，反映太慢

问题：

系统首页展示数据过多，要展示：各种统计数据和图形共计12种，点击后，要等很久才能跳转到页面，反映太慢，体验效果不好。

分析：

首页展示的这12中统计数据，总共占电脑屏幕（分辨率1600 x 900）的7到8屏，实际上点击进入后，第一眼看到的数据只有第1屏的数据，共2种统计数据结果，其余数据虽然已经加载，但是并不会被立即看到。这是不是就浪费了呢？是不是可以在点击时加载第1屏数据，然后滚动鼠标时加载余下数据呢？

解决方式：

先加载少量数据，然后用Ajax来获取余下数据。

1.点击只加载第一屏数据，待进入展示页面后，用js监听滚动屏幕时通过Ajax请求加载数据：进入第2屏即加载第2屏显示数据，以此类推，直到加载完所有数据，再次滚动屏幕时不在加载数据。

结果：

这样做实际上是将一次性加载的等待时间分摊了。

优点：不需要等待太久，可以快速进入展示页；

缺点：滚动屏幕时需要请求数据，页面会有短暂的停顿感觉。