Extjs4 中 bufferedrenderer 的基本使用和介绍

   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的详细实现文档。

随着Ext JS 4.2 Beta的发布，我们改善了很多内容。你可以在论坛公告里阅读修改细节。本文中，我们将着重介绍性能提高的表格(Grid)控件。

在以前的博文《Ext JS 4.1 性能说明(Ext JS 4.1 Performance) 》和 《优化Ext Js 4.1应用（Optimizing Ext JS 4.1-based Applications）》中，我们已经提高了表格控件渲染缓冲的兼容性。Ext JS 4.2又增强的表格控件的缓冲渲染性能，并允许在更多情况下使用并减少配置内容。这项优化大幅度增强响应式应用中的大数据展示。

Ext JS 4.1 和 4.2 的表格控件对比

在Ext JS 4.1中，当用户每次滚动缓冲区（浏览到缓冲内容之外的内容），表格控件都会重新渲染。比如，一个表格控件有50行，当前展示100-150行。用户向下滚动到105行，表格控件会重新渲染105-155行。

滚动缓冲区后，Ext JS 4.1会抛弃所有行列，重新生成缓冲区内容。

Ext JS 4.2 只会添加或删除你滚动到的行列，之间的行不受影响。

Ext JS 4.2对改变表格控件的展示进行管理。参照之前的例子，4.2的表格控件将删除100-104行（不再可见，滚回会重新添加）和添加151-155行作为新元素。这项优化非常明显地降低渲染延迟，随之性能提高。

我们用一个2000行自动下滚的表格测试性能。统计在IE8（Windows XP, 1.8G 酷睿 Thinkpad, 1G内存）上2000行从顶部滚到底部所需时间。Ext JS 4.2降低了2倍（甚至更多）的渲染延迟 - 更佳平滑地滚动。

Ext.grid.plugin.BufferedRenderer

Ext JS 4.1中为了使用表格空间的渲染缓冲，我们必须手动的定义带有缓冲配置的数据集，才能与页面滚动交互。就是如下的代码：

// Ext JS 4.1 定义缓冲数据集
var store = Ext.create(‘Ext.data.Store‘, {
    // 允许用缓冲数据交互
    buffered: true,
    pageSize: 50,
    data: dataJson,
    model: ‘Employee‘,
    proxy: {
        type: ‘memory‘
    }
});
                                                                                                                    
var grid = Ext.create(‘Ext.grid.Panel‘, {
    store: store,
    loadMask: true,
    //etc...
});

当然缓冲也是提高数据集性能很方便的方法。也就是说，数据集会监听数据是否显示。当一些控件共享数据集时，定义缓冲反而会引起问题。

而且，缓冲的数据集在用户修改表格数据的时候会出现问题。因为只有渲染的数据保存在数据主集合中（没渲染的在隐藏的私有页面映射中），修改和同步数据才会生效。

Ext JS 4.2通过引入Ext.grid.plugin.BufferedRendererplugin该插件解决了这个问题。该插件允许定义的的数据存储忽略其显示-网格组件目前是对缓存显示的数据进行独自响应的。

// new Ext JS 4.2 Ext.grid.plugin.BufferedRenderer
    Ext.require([
        ‘Ext.grid.plugin.BufferedRenderer‘
    ]);
    var store = Ext.create(‘Ext.data.Store‘, {
        pageSize: 50,
        data: dataJson,
        model: ‘Employee‘,
        proxy: {
            type: ‘memory‘
        }
    });
        
    var grid = Ext.create(‘Ext.grid.Panel‘, {
        store: store,
        loadMask: true,
        plugins: ‘bufferedrenderer‘,
        //etc...
    });

配置

BufferedRenderer插件可以简易配置渲染视区外的数据行，也就是从数据源（远程或本地）缓冲几页数据。

Ext JS 4.1.x中的“trailingBufferZone”和“leadingBufferZone”配置参数执行的操作相同——但现在他们依赖于插件而不是数据集（和以前一样，数据集是需要的——但现在相同配置的插件是必须的）。你可以创建一个大的数据表用于滚动而不用刷新，也可以是保存多页内容在内存中加快滚动时的刷新。

（译者注：当前可见的表格内容为Rendered Table，回滚时的缓冲区称为trailingBufferZone，下滚时的缓冲区即leadingBufferZone，具体可见上文提到的博文《优化Ext Js 4.1应用（Optimizing Ext JS 4.1-based Applications）》中配图）

BufferRenderer插件还可以添加一个“variableRowHeight”属性，当数据内容大小不可预测时（根据单元格渲染或字符间距计算实际值）。默认值false，以优化表格控件的性能。（注意：这个特性很像“grouping”（分组），RowExpander插件会默认设置这个属性）。

下载 Ext JS 4.2 Beta

查看Ext JS 4.2示例

可以通过示例来查看BufferedRenderer 插件是如何工作的。下载最新Ext JS 4.2.0 SDK，打开下面一些关于Grid的示例：

• Infinite Scrolling Grid (infinite-scroll.js)

• Infinite Scrolling Tuner (infinite-scroll-grid-tuner.js)

• Buffered Scrolling (buffer-grid.js)

• Variable Height Rows (var-height-rows.js)

本文出自 “插上javaScript的翅膀” 博客，请务必保留此出处http://shimengwen.blog.51cto.com/2448562/1360824