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

ajax没有刷新页面，已经是一个熟悉的东西，可能是网页首页有一个js的方法，通过ajax请求服务器的分页数据接口，获取数据，然后在页面上创建HTML，向用户显示，类似如下：
功能getpage（PageIndex）{
Ajax（{
网址：RemoteInterface.cgi，
方法：获取，
数据：{页索引：PageIndex }，
回调：回调
}）；
}
函数回调（DataList）{
/ /待办事项：创建HTML结构，根据返回的数据的数据用户。
}
在这，remoteinterface.cgi是一个服务器端的接口。在我们有限的空间，这样的代码可能是不完整的，只是表达的意义。

UI，可能有各种风格的分页控件，大家也比较熟悉，比如：
但这都是getpage（页索引），用户点击控件触发这里的方法，这getpage方法可能不那么简单。

如果用1的代码片段的书面依据，我们可以想象，当用户点击页面，会要求remoteinterface.cgi，忽略数据可更新的情况下，除了第一次，每一getpage后（1），getpage（2）、（3）getpage远程接口触发请求等。从网络中的数据流量，其实都是不必要的。当页面第一次请求可以在网页上的一个缓存的形式使这些数据，如果用户在回顾之前的翻页很感兴趣，getpage方法首先要检查是否本地缓存包含页面的数据，如果有的话，是显示给用户的，而不是调用远程接口。按照这个思路，我们可以修改代码片段1如下：
无功pagedatalist = { }；
功能getpage（PageIndex）{
如果（pagedatalist { PageIndex }）{ / /如果本地数据列表包含当前页面请求数据
ShowPage（pagedatalist { PageIndex }）/直流数据显示
}
其他的
{
Ajax（{
网址：RemoteInterface.cgi，
方法：获取，
数据：{页索引：PageIndex }，
回调：回调
}）；
}
}
函数回调（PageIndex，DataList）{
pagedatalist PageIndex } = { DataList； / /数据缓存
ShowPage（DataList）； / /数据显示
}
功能ShowPage（DataList）{
/ /待办事项：创建HTML结构，根据返回的数据的数据用户。
}

这将节省时间的网络请求来回，更重要的是，节省了宝贵的网络流量，减少接口服务器的负担，降低网络速度和接口服务器的压力条件下，这种必要的改进可以显示出明显的优化效果。著名的雅虎34，第一是减少HTTP请求数。Ajax异步请求无疑也在HTTP请求的范围。小访问Web应用程序可能不觉得有必要，但想象一下，如果有这样的一页：一天1000万次，平均每个用户会翻5页，其中一页重复。这样一个页面，根据代码片段1，将触发50米数据请求每天万次，并根据代码片段2，它至少可以减少1000万的要求，每一天。如果为每个请求的数据量是20kb，它可以节省1000万×20kb = 200000000kb对190g交通网络。这样，资源节约是相当可观的。

如果你想走得更远，数据缓存方法在代码2是值得商榷的。我们以前认为分页数据的时效性是可以忽略的，但实际应用的时效性是一个不可回避的问题。毫无疑问，缓存将导致时效性降低，而真正的缓存方案也应依靠分析和权衡应用的时效性要求。

对于通常不强调及时性的内容，页面上的缓存应该是可以接受的。用户不会在一个页面上的所有时间，在页面之间的跳转，所以更新数据时可获得重装。此外，如果用户刷新页面的习惯，他可以选择刷新页面时，他特别想看看表数据的更新如果追求完美，你也可以考虑设置一个时间范围，例如5分钟。如果用户停留在当前页面超过5分钟，他会读缓存页面上的第一个5分钟，然后请求服务器的数据再5分钟后把网页。

在某些情况下，如果我们能够对数据的更新频率预测，如多少天可能会有一个数据更新，甚至考虑使用本地存储的时间间隔触发一个请求给服务器，所以请求和流量的数量来节省更彻底。当然，什么样的缓存方法应用最终取决于时效性的要求，但原则仍保存请求和流量，并尽可能节约，特别是大型页。

一类具有高时效性要求的数据，缓存是完全不适用的，当然不是，不过这个想法已经被改变。一般所谓的改变可能是主要的增加，减法，或更改列表中的数据，但是数据的绝大部分保持不变。在大多数情况下，很适合做缓存一段时间内。

如果你需要实时更新的数据，你可以很容易的想到利用定时器，如执行getpage（PageIndex）每20秒刷新列表。但只要我们把前1000万页访问的假设，我们会发现，这是一个超级恐怖的事情。根据访问量和重试次数，服务器压力巨大。我想请你们看看Gmail，163邮箱、新浪邮箱处理邮件列表页。他们几乎同时满足我们先前的假设：超大的日常访问、数据的实时更新，等等，网络数据包捕获工具的分析不难发现，他们多次请求同一页面中的用户数据，不会让一个请求给服务器，以确保及时通知用户更新邮件列表时，更新信息，定期和重复的异步请求可以使用，但这一要求，只能是一种状态查询，而不是刷新列表。只有当我们对MES的更新状态我们将启动请求获取更新的数据，或者状态查询的接口在更新时将直接返回更新的数据。事实上，163个邮箱和定时查询之间的时间间隔比较长，大约两分钟。新浪邮箱之间的时间间隔较长，约5分钟。我们可以看到他们正在设法减少请求数量，但这种处理方式可能不是单方面单方面完成的，而且实现计划需要与后台接口整体考虑。

现在让我们看看在代码2数据缓存。不再讨论的要求和交通数量的储蓄，让我们看看有什么值得在前端实现研究。根据代码片段2原理处理方法、原始数据存储，当再次调用，ShowPage（数据）再根据HTML重建数据结构显示给用户，但在这个过程中我们创造的结构已经完成，不考虑创造结构的第一时间。节约直接结构可减少JS的重复运算，特别是在复杂的结构更是值得考虑的。再次，结构在页面上创建一个页面，摧毁一次又一次创造了一个新的结构，和资源消耗，可以先创建好后，你又不破坏页面，只有隐藏它通过控制CSS样式，当重复页面只有在创作中的结构控制显示或隐藏彼此

最后，这里讨论的方法不一定适用于所有情况，但可能有点启发性，其中一个或两个可以在适当的时间进行尝试。同时，如果这个想法是发散的，或者不仅可以用于无刷新分页。