How can I improve the performance of the RichFaces ScrollableDataTable control?

Question

First, a little background:

I'm displaying a data set with 288 rows and 8 columns (2304 records) using a ScrollableDataTable and the performance leaves a lot to be desired. An AJAX request that rerenders the control takes nearly 20 seconds to complete, compared to 7 seconds when rendering the same data using a DataTable control.

Metrics captured via Servlet filters and JavaScript show that virtually all of the processing time is spent on the client-side. Out of a 19.87 second request, 3.87 seconds is spent on the server... with less than .6 seconds spent querying and sorting the data.

Switching to a DataTable control cuts the request, response, and render cycle down to 1/3 of what I'm seeing with the ScrollableDataTable, but also removes several important features.

And now the question:

Has anyone else experienced performance issues with the ScrollableDataTable? What's the most efficient way to render large amounts of tabular data in JSF/RichFaces with pinned columns and two-axis scrolling?

Update:

We ended up writing a custom control. Full control over the rendered components and generated JavaScript allowed us achieve a response time comparable to the DataTable. I agree with Zack though - pagination is the correct answer.

Answer 1

I had similar problems a long time ago and ended up writing an applet to display the data that interacted with the page using livescript. My performance problems were the same as what you were seeing. The client took over 30 seconds to render the table data, and the server turned my response around in less than 2 seconds.

Answer 2

This sounds like a bug in the javascript produced to render the table. Have you tried the page in different browsers? Which JSF implementation are you using (RI or MyFaces or something else)?

Answer 3

The bottleneck is most likely in the "Render Response" phase of the JSF lifecycle. It's trying to render too many components for the view at one time.

My suggestion is to use pagination. It should significantly increase your performance because it's rendering smaller portions of the view at a time.

Be sure that your rich:dataTable has the rows property set and also -- if you are doing any column filtering -- make sure that the date table also has the property reRender="paginator" where paginator is your rich:datascroller.