Extjs4 在新增了MVC结构这个特外还有一个亮点就是对grid的渲染展示做了重写,也就是Extjs4支持大容量数据表渲染的特点。
我们很清楚,如果很大的数据量在页面进行渲染的时候,不断的操作DOM是十分消耗时长的,而Extjs4 中的bufferedrenderer插件则完美的解决了这个问题,让大数据的加载轻而易举。其中具体的实现原理请看下面的文档,这里只提前简单的介绍一下buffereddrenderer的两个重要特点:
1. 加载特点:
为了保证大数据量的加载而产生对服务器的长时间请求这个问题,bufferedrenderer的设计思路是,分段(类似于分页)加载,每次值请求一定量的数据,并不是一次性全部请求到客服端,需要实现这样的效果只需要在store中设置允许自动分段加载就可以了。
// Ext JS 4.1 定义缓冲数据集
var store = Ext.create('Ext.data.Store', {
// 允许用缓冲数据交互
buffered: true,
pageSize: 50,
data: dataJson,
model: 'Employee',
proxy: {
type: 'memory'
}
});
buffer:true 这表明了让store自动分段加载。这样子每次但滚动条滚动到页面数据块完的时候,Extjs就会自动请求后台,获取下一段数据内容。
2. 渲染特点:
如果仅仅是加载上进行了这样的设置的话,绝对不足以让大数据在页面展示成为一种可以能,因为这样只是减少了和服务器的请求时长,而事实上面临的更大的问题在于页面的加载耗时。
起初或者说一般页面的列表加载都是直接一次性渲染,当需要再次渲染新数据的时候则清除当前也的数据在重新加载新数据。而bufferedrenderer则是采用了单条数据的插入和删除操作,避免了大面积DOM的更新操作。
bufferedrenderer在列表的可视区域以外的上下分别设置了一定量的缓冲区(这个缓冲区的大小是可以根据自己的需求设置的),通过缓冲区的不断插入和删除操作实现了大数据的渲染。
以上是个人看了bufferedrenderer后的一些理解,如有不完整的地方请各位提出,下面是关于bufferedrenderer的详细实现文档。

ExtJS4的BufferedRenderer解决了大数据量渲染问题,通过分段加载和单条数据操作减少DOM更新,提高性能。在4.2版本中,渲染性能进一步优化,减少了渲染延迟。文章介绍了BufferedRenderer的工作原理和配置,提供相关示例链接供参考。
235

被折叠的 条评论
为什么被折叠?



