Ajax无刷新分页的性能优化方法

Ajax无刷新分页，已经是一个大家比较熟悉的事物了，大概就是web前端页面上有一个js的方法，通过Ajax去请求服务器端的分页数据接口，拿到数据后再在页面上创建html结构，展现给用户，类似于下面这样：

<script type=”text/javascript”>function getPage(pageIndex){ajax({url:” RemoteInterface.cgi”,method:”get”,data:{pageIndex:pageIndex},callback:callback});}function callback(datalist){//todo:根据返回的datalist数据创建html结构展现给用户。}</script>

其中，RemoteInterface.cgi是一个服务器端的接口。我们这里限于篇幅，涉及的实例代码可能都不是完整的，只为了把意思表达明白。

UI上，可能会有各种款式的分页控件，大家也都比较熟悉，比如：

但无非都是用户点击控件触发这里的getPage(pageIndex)方法，这个getPage方法可能不是那么简单。

如果按照代码片段1的写法，我们可以想象，用户每次点击翻页的时候，都会请求一次RemoteInterface.cgi，在忽略数据可能有更新的情况下，除了第一次，后面每次getPage(1) 、getPage(2)、getPage(3)等等所触发的远程接口请求以及在网络上往返的数据流量，其实都是重复的、不必要的。每页第一次请求的时候都可以把这些数据以某种形式缓存在页面上，用户如果有兴趣回头来看之前翻过的页，getPage方法应该先检查本地缓存当中是否包含该页数据，如果有，则直接重新展现给用户，而不是去调用远程接口。按照这个想法，我们可以把代码片段1修改一下，如下：

<script type=”text/javascript”>var pageDatalist={};function getPage(pageIndex){if(pageDatalist[pageIndex]){ //如果本地的数据列表中包含当前请求页码的数据showPage(pageDatalist[pageIndex])//直接展现当前数据}else{ajax({url:” RemoteInterface.cgi”,method:”get”,data:{pageIndex:pageIndex},callback:callback});}}function callback(pageIndex,datalist){pageDatalist[pageIndex]= datalist; //缓存数据showPage(datalist);//展现数据}function showPage(datalist){//todo:根据返回的datalist数据创建html结构展现给用户。}</script>

这样做一来节约网络请求往返的时间，更重要的是节约宝贵的网络流量和减轻接口服务器的负担。在低网速环境下或者接口服务器运行压力已经比较大的情况下，这种必要的改进更能显现明显的优化效果。大名鼎鼎的yahoo 34条，第一条就是尽量减少HTTP请求次数。Ajax的异步请求，毫无疑问也是在http请求的范畴内。访问量小的web应用或许感觉没有必要，但是想象一下，如果有一个这样的页面：每天访问量1000万次，用户平均翻5页，其中有一页为重复查看。那么这样一个页面，按照代码片段1的写法，平均每天将触发5000万次的数据请求，而按照代码片段2的写法，则平均每天至少可减少1000万次请求。如果每次请求的数据量是20kb，则可以节约1000万*20kb=200,000,000kb 约合190G的网络流量。这样看节约的资源是相当可观的。