I have a JSF page with PrimeFaces 5.1 and I'm experiencing performance issues in a complex page. The page has a common design: a paginated datatable, a tree for filtering, a panel with the selected item details and a menu with some actions on that item. The majority of these components are provided by PrimeFaces.
Profiling the application, I concluded that the DB queries are not the bottleneck but rather the restore view and render response phases. Moreover, the major factor in the delay seems to be the number of JSF components as opposed to the amount of data stored in the backing bean. Even AJAX requests with partial processing and rendering will take time in those phases.
How can I reduce the processing time, specially in the AJAX requests?
My 'short list':
Use a recent version of your JSF library (especialy Mojarra > 2.1.21)
Use partial processing (process="#this") (already mentioned by you)
Don't use validation on ajax requests (immediate=true)
Use partial submission (partial-submit="true")
Be selective in what you update (Not an #form)
Don't do any amount of work in a getter (and if you do, do it lazy)
Don't use inline editing in the datatable
Use native components in the datatable if you do cannot do 7
Don't use loooooooooong select lists
Use lazy loading for filtering, sorting and paging in datatables and use a page size value that is moderate (tnx #Vrushank, I forgot this)
Don't use partial state saving in Mojarra with complex pages
Related
I have various tables with the following size : 12 columns and up to 1800 rows. It takes 8 seconds to render it to the user. I currently use h:dataTable. I tried ui:repeat to get the row data from a Java List object, managed by JSF. Although this works fine, the 8 seconds to render the table is unacceptable. I'm trying to find other ways to do this, but need to keep JSF as my controller for action buttons on the page. In other words I want to create the 'table markupto send to thepage myselfand then still associate actions onh:commandButtons` to the managed bean methods. Is there a way to do this?
The only ways I can think of is to use jquery or ajax to create the table markup, although I am new to technologies other than JSF for UI development.Maybe then I would somehow pass that to the client for render. The only problem is I don't know how to generate the markup from my list, and second how I would inject it between h:commandButtons that are in my XHTML file currently.
Does any one know how I can solve this without having to completely rip OFF JSF? One main problem I have is that the business requirement that says we can't page the datatable (i.e: Next / Back buttons displaying 100 at a time for example). So, possibly I was thinking I could do this by Ajax calls to the server and get 100 rows at a time after page ready, and append new rows behind the scenes to the user. This would be a "perceived" speed of load, but I don't know how to do this at all.
8 seconds isn't bad for a whopping 1800 rows on 12 columns. 10~100 rows is done in less than a second, right?
Before continuing with this, are you absolutely positive that all those 1800 rows are supposed to be shown at once? Isn't this very user unfriendly? Wouldn't the user have to need Ctrl+F to find the information it is looking for? Isn't that annoying? Why don't you introduce filtering (a search field) and pagination exactly like as Google is doing to present the zillion of results in a sane and user friendly manner?
Anyway, you could consider using "On-Demand data" option of PrimeFaces <p:dataTable>, wherein the data is loaded by ajax during scrolling via <p:dataTable liveScroll="true">. See also the showcase example. No homegrown code nor manually fiddling with jQuery necessary. PrimeFaces has done it all under the covers.
It you don't want to use PrimeFaces for some reason, then you could consider using OmniFaces <o:componentIdParam> in combination with some jQuery "live scrolling" plugin. See also the last example in its (snapshot) showcase page for a kickoff example (which should easily be adapted to be triggered by hitting the scroll bottom instead of by clicking).
I have an application that is making extensive use of telerik controls and am looking for an example/demo of Telerik MVC grid that uses server binding to display the initial grid and then allow inline editing using ajax. I have a selection that is returning a lot of data and erroring out at the maxJsonLength. The code to configure the grid would be helpful and I should be able to fiigure out the rest. I think I saw an example somewhere of an ajax bound grid that used server binding for the initial load but I can't find it.
Having a server-side bound grid with ajax editing is possible. However you first need to solve the maxJsonLength problem. The grid needs to serialize the first page of data (which is initially displayed server-side) as JSON so it can be then edited on the client-side. It seems that you are serializing too much data which hits the maxJsonLength limit. I can think of two ways to deal with this:
Use a ViewModel and serialize only the properties which are bound to the grid. This will reduce the total JSON size.
Increase the maxJsonLength. This however is not easy as setting it from web.config does not work in ASP.NET MVC. You need to create a custom JsonResult object with its own JsonSerializer. This code library project shows how.
You have mentioned Telerik in your title but not in main question, so I assume that you are okay with other grid controls.
In that case you can try Jq grid, it's very flexible and easy to use. I have been using it for some time now and find it very useful.
For your particular case see below link
http://www.trirand.com/blog/jqgrid/jqgrid.html
Since a few weeks we have performance problems in our web applications. First we thought the problems belongs to large DOM. Large DOM isn´t really good but thats not the main perfomance problem.
The problem are the composite components. The last weeks we developed core composite components to reduce code redundancy and have centralized places for changes. We replaced each individual implementation within our application(s) with the composite component.
First test case:
We´ve created a single page with a commandButton, a outputText and 50 composite components that contains a p:dialog. Click on the button just updates the outputText component (Ajax).
The update takes about 1.5 seconds.
Second test:
Same page with commandButton and outputText component. Instead of using the composite components we´ve added the p:dialogs directly to the page.
The update takes 0.06 seconds.
Is there something wrong with using composite components? I can´t find similar threads that are related to performance problems with composite components.
There were some performance bugs in Mojarra version up to 2.1.21, so use myfaces, until mojarra bugs get fixed, For more info visit http://blog.oio.de/2013/05/06/jsf-performance-tuning/
Hy guys.
As you know the gridview control is super heavy and reduces performance of the page, as the viewstate length is higher.
I'm trying to get a alternative way to not use default asp.net gridview webforms.
In asp.net mvc we can pass a model for example with Examples[] and in the view iterate over this array and build a
grid and using a number of pages as a anchors than when clicked do a request to a one controller and retrieves json with content of the next 10 tuples in database.
My question is, what is for you guys the best way/more efficient to implement a gridview with paging in webforms?
We use classic AJAX calls and javascript to render and filling the gridVeiew. We are also using the jQuery gridviews now. I am aiming at the reduction of data transfered if we are using a asp:gridview inside a ajax:updatePanel.
Unless you plan to use the fill GridView functionality, I usually prefer rendering the UI out as HTML TABLE using a asp:Repeater control.
HTH.
A pleasant user experience requires a page to load very fast. This can be difficult when there is a large query taking place or when a web service is being used.
I deally, the entire page should be loaded first with loading images everywhere a cumbersome task takes place.
In ASP.NET, this can be accomplished using update panels and a 1 second trigger. The trigger would load some data and then the updatepanel will the update. This approach may be less popular if you do not require entire asp.net page life cycle events to fire. With this approach, allot of methods will fire consuming more resources and time. What if you simply want to display data?
Another aproach would be to create an .ashx httphandler that returns a representation of data in html format. A timer would go off one second after the page loads which triggers a div panel to be populated with the html returned from the .ashx handler. This would bring high performance but you would lose postbacks and viewstate. I suppose that is expected when losing the asp.net page-life cycle.
How would you go about creating a delayed task that uses viewstate and postback if possible that brings great performance?
Maybe creating an http handler to a custom extension, and in the implementation of the handler return the data (or pre-formatted html, json, or xml) that you then insert into an html element of the container page with a javascript ajax call.
Hugo