I am developing a special grid solution for a software product in javascript. The data are collected with a PHP script on the server side and pushed to JavaScript via a JSON array. In my script I have to parse this array and render the grid rows. And here is my problem. If I receive for example 4000 rows, javascript is rendering this very fast, but I think the bottleneck is the browser...
My question is, is it possible to render only the visible parts? I need to scroll to the other information, but the browser does not need to render it if it is not visible. is it possible to render something outside of the viewport?
I need to set width and positions and this is only possible if I added the new element to the viewport and this is very slow by a huge mass on data... How could I solve this problem?
The solution here might be to paginate your data on client side. That way, you can sort your object array with JS and simply insert a section of the data into the DOM at a time.
Client side pagination library options have be discussed here.
DOM updates are the slowest part of the chain. Process the result in memory and insert it into the DOM in one go if you can.
Related
I am getting a list of items in a JSON(through AJAX) and creating the required markup by JS and appending in the view. On the other hand I have seen few examples which do not use this practice, and send the complete or partially complete markup through AJAX and then simply append them to the document. So definitely the markup is being generated on the server.
So I am curious which one is the better approach and why. One thing I can clearly see is that the later approach does not expose the JSON structure to the UI.
You're right about exposing the json structure but perhaps the main thing to consider is loading times, both client side and server side. If the server is dedicated and powerful enough, generating the markup in the server will be fast and will keep the site snappy on the client side.
If not, you'll want the client to do as much of the processing as possible. Generating markup on the client side is not a bad thing. The popukar angularjs framework builds markup on the fly client side and is very effective.
The choice depends on several factors like
what we are trying to achieve - Requirement must be picture clear.
what is the amount of work involved with these choices alone
which choice will have better performance
and in few scenarios which choice will get the job done quick. - where performance is compromised over delivery
Lets take an example to explain better.
1) Create a table to display all the details of employee.
Here since this is a stand alone table we don't have to worry about passing a JSON and then writing logic inside the JS to build the table. This can be done quickly without the need of JS. -- HTML Wins
2) Create a table to display all the details of employee. Also build a dynamic bar graph to display the details of the employee group on click of any row in the table.
Here the scenario is to build a table also on click of any table row get the employee group and generate a bar graph to show total employees in that group or may be any other stuff.
Here if we have built out table with just HTML then to get the data for the bar graph either we need to make another server call OR do a for loop of all tr's and then extract data from each cell by cell which is a pain.
If you use JSON to dynamically build the table structure, We can use the same JSON data and then build the graph and quick without other overhead, As we have the data ready to manipulate. -- JSON wins
This is just a small example. Also this concept is totally debatable, it is choice of the developer and what he is comfortable with, along with few other factors as mentioned above. I think you get the big picture. Hope this is helpful.
I have a huge array(4MB) data on the server side. right now I'm using jquery getJSON method to get the array data and render the whole array on the browser. It turns out getting the array data is too slow. Probably the main time is spent on JSON parsing,probably not.
What is the best/fastest way to get such array kind of data from server?
Four MegaBytes is a lot of data to be sending client side in all one go? Rather than trying to speed up how fast JavaScript can process JSON, i suspect your best bet will be to figure out some tactics to break the data up a bit more (so you can work with less at a time).
I mean, do you really need all of it at once? Its probably worth looking in to adding some server side filtering to the JSON being returned so as to try and limit it only to the data needed to do whatever you apps supposed to be doing?
For example, if your planning to display a massive list of products, it may be worth just loading the first 50-100, then as the user scrolls down the page make a second call to load the next 50-100 etc?
Is there a convenient way to load the order of a stored jQuery UI Sortable list?
I'd prefer not to do this server side (extra complication/work for the server), and since the only users that would be resorting the list will have javascript, might as well utilize javascript to reorder it on page load.
The desired scenario:
All data is stored as a normal javascript array using persistjs or sent to the client on page load (as a native array).
The list should be static HTML (friendly to non-js clients) (and should not be appended to an empty list, as other users in previous questions suggest)
If there's no stored preference, nothing happens. The normal list is just left as is.
Any ideas? I think this question will benefit a LOT of users, so I'm hoping for a very elegant, simple solution (no messy hacks like deleting a stock list then appending the configuration to a new one). Preferably something that just looks at an array of IDs and (as best as possible (some items may be added, some may be removed)) and puts them in the same order.
Thanks! =]
You will have to reorder it after the page loads the way you want it. And you will have to build the array for the client side ordering on the server side any way.
I think it is better to just show the sortable items in the way they should appear on the server side. The list should be static HTML (friendly to non-js clients) you said that, right?
If you really insist to do it on the client browser (with which I disagree), read that - jQuery.sortable. change the order by JS
I need to transfer a large amount of data from server to client and then, with JavaScript (jQuery) generate a lot of tables, divs and other know and unknown html elements .
When I was trying to generate those tables and divs on client side a had a couple of for loops and I was creating and appending elements on the fly.
I soon discovered that it takes a lot of time to generate all those elements and show them so I generate HTML on server side with HtmlTextWriter then I convert it ToString() and append that string on client side.
It is much faster but it is "seljacki" as we would call it in my language (the closest translation is "not elegant solution").
So I wanted to ask does anyone have some more elegant solution to suggest and is this method that I'm using completely wrong or it could pass?
Thanks to everyone.
You don't show your code here, but I'd guess that in your loop you are repeatedly appending rows to a table or whatnot as you iterate through the results. If so, the bottleneck is not actually generating the HTML but redrawing the content each iteration. Try assembling the entire HTML to add in memory first, then use a single append() or html() call to update the document.
I would continue to pass the data to the client side and create the html. I've just started playing around with jQuery templates and so far they are awesome. Since it is obviously going to be a little slower creating the elements on the client side why not just create and/or load them as needed. The user can only see so much at a time so why make them wait for something they may never see.
I am continually pulling in a list (over 200) entries from a remote server and showing them in a table (many pieces of data per row). The data changes and fluctuates over time. What's the most efficient way in JS to render this to the screen. As the data changes do I simply wipe my DOM and re-render with the new data; do I have a list of ids that will simply update the correct tr dom entries?
Its already sorted and filtered to be the correct information (server side) so its just displaying it to the user I am concerned with.
Any suggestions would be helpful. I am using jQuery for my requests but that can be changed. I need to know the quickest (latency wise) way of pulling this large dataset and displaying it in a tabular format.
Edit: Pagination is not possible in this scenario.
Edit2: The backend is Python (WSGI) running in a load balancer and is capable of flushing out 600 reqs / second. The data is only available as JSON and the backend is more of an API.
Are you using HTML tables? Sometime ago I crossed a Microsoft blog from the IE team stating that rendering tables are slow. Very slow. Re-rendering the whole table everytime will probably be slower than updating its values, but that is just my guess.
In fact, my opinion here is that updating values will be faster than re-rendering elements in the page. To optimize your latency, you could keep a hash of objects mapped by, so you don't have to lookup the DOM everytime you update the values.
I quite like the 'Live Image Search' which provides more data as you scroll down.
If your data list is getting really large, consider not displaying all of that data to the user at one time (if that is possible in your situation). Not only will the user get lost looking at that much data, but the browser will have to render the whole list and slow you down.
You don't mention what server side technology you are using. If you are in .Net, there are a couple ASP.Net controls that use a data pager (like a grid view). There is also a PagedDataSource object you might look into using (which can be used with any ASP.Net control that has a DataSource property). Both will break up your data into pages, and only the viewed page will be rendered at one time. This decreases latency dramatically.