When ever the row number of the lists are high (what I mean is sometimes even only 170-200 rows), on scroll down/up, DataTable refreshes itself somehow and all the custom css, click functions and events are being removed. Moreover the list is sometimes freezing or scrollbar is getting stuck at the bottom.
If I dont use DataTable.groupByColumn(5000) the performance and css is better but I still loose click events on the table.
The reason why I use DataTable.groupByColumn() with an extreme number is the row style. As default the background color of rows are black and white, it is not easy to read and confusing. But anyhow even if I don't use groupByColumn() I am loosing onClick functions when I scroll down on high row number lists...
Is there a way to avoid this 'refresh' or is there an optimal row number to keep in mind when we make development on DataTable ?
As an example I've created 285 row list with random strings to check if the problem is arising from our data structure but unfortunately same problem occurs in example too.
Do we have the chance to optimize it ?
EDIT
I have realized that DataTable uses 'clusterize.js', that's why I have used event delegation instead of giving functions to each row but this time all functions are working delayed depending on the length of the list.
Anybody has any idea ?
As you've found yourself, the DataTable is just a simple wrapper for the Clusterize.js library. Any potential optimizations would therefore have to be discussed with the library's community.
Related
I'm writing a graphic console that highlights different entries and stores things when you input them (in AS3) but I've found that once there are thousands of entries, the program starts lagging and scrolling is slow. If I want scrolling to be animated with acceleration it gets even slower.
How do I move the giant block of objects that are my stored entries up and down?
Do I have to progressively load messages around where the user is looking? How does the scrollbar handle this, then?
you should create a custom container instead TextField, it would be easier to build an accelerated scrolling too,
each log entry would be an extended DisplayObject that holds anything you want just like inflating layouts in android.
the most important part should be reducing Memory usage:
you may only store plain text of log enteries in something like a global array and when scroll position is close enough, generate this layouts, then adding them in container to show, and vice versa for removing far behind chats.
however this proccess stills using much memory during runtime.
so, just according the concept of android's DiskLruCache, it is possible to storing some part of our invisible data which would be too far from our scroll position to disk instead memory, using SharedObject's.
How do I move the giant block of objects that are my stored entries up
and down?
You don't. As you have noticed, when the number Display Objectson the DisplayList greatly increases, the memory overhead increases and the housekeeping details of managing the Display Objectseventually causes performance to suffer. You don't mention any details of how you are implementing what you have so far so my comments will be general.
The way this is handled by various platform list components in Flex, iOS and I assume, Flash, is to only display the minimum number of objects needed, and as the user scrolls, objects are shuffled in and out of the render list. A further optimization is to use a "pool" of "template" objects which are reused so you don't pay a initialization time penalty. There is probably an actual name for this ("...buffering...") technique but I don't know what it is (hopefully some kind person will provide it and a link to a fuller description for how it works).
And as for how it works – you can DIY it, figuring out, as the user scrolls, which objects are moving off-screen and can be recycled, which are going to move on-screen, etc. Of course this all assumes that you have your objects stored in a data structure like and Array, ArrayList or ArrayCollection. As an alternative to coding all this from scratch, you might see if the DataGrid or List components will meet your needs – they manage all of this for you.
Flash Tutorial: The DataGrid Component (youTube video)
Customize the List component
Lots of other examples and resources out there.
(again, I work in Flex where the DataGrid and other list-based components can customized extensively using "skins" and custom item renderers for visual style – not sure if it is the same in Flash)
I have an application based around Pivot Control, where user can dynamically add the pivot items based on the content they would like to see. Each content basically contains a listview that is containing the data retreived asynchronously via winjs xhr object.
The listviews in different pivots might contain different amount of items and while the number is relatively low (up to 20) the performance even with animations is acceptable, but as soon as one of the listview has more than 100 items the sliding between the pivot items get really painful to watch, it just lags.
I've tried to optimize the application via
modifying the listview itemTemplate not through the binding template, but very basic content rendering.. that has helped A LOT for the listview to render quickly
disabling the animations in WinJS.UI
Even though the above measures have helped quite a lot, I can still see that while navigating from the pivot that contains a lot of items in the listview, the application hangs (does I don't know what) and then it slides to the next pivot. This might last up to 5 seconds and it's really not the best UX.
Just to make it clear, the content to show in the listview is being fetched at the time the application is being initialized, so the performance issue is definitely not caused by any possible XHR requests.
Could please anyone tell me what is happening behind the slide-out/slide-in operations as all I would do is just to set the content to dispay=none ! but it takes ages to display the next pivot item.
Thank you!
My question is not language based or OS based. I guess every system is offering some sort of TextOut(text, x, y) method. I am looking for some guidlines or articles how should I implement selection of outputed text. Could not find any info about this.
The only thing which comes to my mind is like this:
When user clicks some point on the text canvas I know the coordinates of this point. I need to calculate where exactly it will be in my text buffer. So I am traversing from the begining of the buffer and I am applying to each character (or block of text) a style (if it has any). After this, I know that after given style the letter has given size. I am adding its width and height to previously calculated X,Y coordinates. In this way, I am traversing the buffer until the calculated position has not reached the point that has been clicked by the user. After I reach the point within range of some offset I have starting point for the selection.
This is the basic idea. I don't know if this is good, I would like to know how this is done for real like for example in Firefox. I know I could browse the sources and if I won't have a choice I'll do it. But first I am trying to find some article about it...
Selecting text is inherently specific to the control which is containing it and the means it stores that text.
A very simple (though questionably inefficient means) is to run the text flow algorithm you are using when clicking on a point and stopping the algorithm when you have reached what is closest to that point. More advanced controls might cache the text layout to make selections or drawing their content more efficient. Depending on how much you value CPU time or memory there are ways to use caches and special cases to make this “hit test” cheaper.
If you can make any assertions (only one font in the control, so every line has the same height) then it is possible to make these tests cheaper by indexing the font layout by lines and then doing simple arithmetic to find out which line was clicked on. If your text control is also using monospace fonts (every character occupies the same width as well as height) then you are in even more luck, as you can jump straight to the character information via a lookup table and two simple divisions.
Keep in mind that writing a text control from scratch is obscenely difficult. For best practice, you should keep the content of the document separate from the display information. The reason for this is because the text itself will need to be edited quite often, so algorithms such as Ropes or Gap Buffers may be employed on the data side to provide faster insertion around the caret. Every time text is edited it must also be rendered, which involves taking that data and running it through some kind of formatting / flow algorithms to determine how it needs to be displayed to the user. Both of these sides require a lot of algorithms that may be annoying to get right.
Unfortunately using the native TextOut functions will not help you. You will need to use methods which give you the text extents for individual characters, and more advanced (multiline for example) controls often must do their own rendering of characters using this information. Functions like TextOut are not built to deal with blinking insertion carets for example, or performing incremental updates on text layouts. While some TextOut style functions may support word wrap and alignment for you, they also require re-rendering the entire string which becomes more undesirable in proportion to the amount of text you need to work with in your control.
You are thinking at a much lower level than necessary (not an insult. you are thinking that you need to do much more work then you need to). Most (if not all) languages with GUI support will also have some form of selectionRange that gives you either the string that was selected or the start and stop indices in the string.
With a modern language, you should never have to calculate pixels and character widths.
For text selection in Javascript, see this question: Understanding what goes on with textarea selection with JavaScript
I've recently been developing an application using tables with a large number (hundreds) of rows. The rows contain tabular data and each row contains two drop down lists as well as link which displays hidden table rows directly below it.
I am currently experiencing lengthy delays when attempting to select a value from the drop down, and when displaying the hidden table rows.
Is the table the source of my problem here?
From what I gather, HTML tables can be appear to be slow to render if widths are not explicitly stated. If they aren't, the browser has to finish loading the contents of the cells before it can calculate the correct widths.
MSDN has some information here on their "Building High Performance HTML Pages" article that may help; they suggest the following (regarding tables specifically):
Set the table-layout CSS attribute to fixed on the table.
Explicitly define col objects for each column.
Set the WIDTH attribute on each col.
The problem is more than likely the rendering of the controls (100 select boxes) rather than the table layout. How many items are there in the drop down list? Does it perform the same way in all browsers on different operating systems?
Sorry to be so vague but generally tables aren't slow to render, but are looked down upon because of their lack of accessibility (although of course much of the idealism is the fact screen readers don't like them).
I can state from experience that it's almost certainly the dropdown lists that are causing the slowness. Tables with hundreds of rows can render almost instantaneously if they only contain text, but add a dropdown list to each row with just a few dozen options, and now even 50 rows will take a noticeable amount of time.
Try to design around the need for dropdowns in the table rows - if this is a form (and why else would you have dropdowns?), have the user select the row they wish to edit, and then put the editable controls only in that row, either via AJAX if you're into that sort of thing, or a more traditional "detail view" approach.
I've not noticed any slowdowns when displaying static tables with a few thousand entries, but adding effects like sorting or dynamic zebra-striping can quickly bog down even a modern browser on a fast computer. Make sure you're not running any JavaScript iterations across the entire table.
Whatever you come up with, test the approach in a couple of browsers on a couple of platforms, with some slower machines. I once had an app that was speedy everywhere except in Safari for Macintosh. It turned out to be something about the way it rendered the dropdowns. There's just no substitute for experimentation. Uhm, I meant testing.
If you know how wide each column should be, try specifying table-layout: fixed in the CSS for the table and see if that makes any difference (it should stop the browser trying to re-render the whole table just because you've toggled visibility on a few rows.)
IE does not handle very large DOMs manipulations well at all.
If you have two selects in each of the rows and a link, and let's assume each select has 5 options that's (((5options + 1select) * 2) + 1 link + 3tds + 1tr) at least 17 DOM items per row. Plus, if I'm not mistaken, ie treats each text item as it's own DOM node. So add another 10 DOM nodes for the drop down text and 1 for the link, that's 28 DOM items per row.
I agree with the others that it's not only your table that is causing the slow loading but the population of the dropdown list as well.
If it helps you can try paginating your table. You can use JavaScript frameworks such as jQuery or extjs for pagination and AJAX.
I have an Access form displaying a tiny amount of data for a certain type of record. Basically it just prints the name on the left and on the right has a bunch of Rectangle controls whose background color I change in the form's OnLoad() function, according to results from a query performed using that record's ID as parameter.
This all worked fine, got my ID/name on the left and 31 boxes on the right, colored if that day of the month is reserved :) But needless to say that function can be completely arbitrary since it's code.
Then I decided to switch to 'continuous form' as to display as many records/items as possible. But alas, it was not to be -- all boxes were colored according to the query/function performed for the first record only. I figured that might be because it's the OnLoad() but changing it to OnCurrent() did not do much either. As it turns out, or that's what I read, the Rectangle intances are shared over the entire form and if I change the BackColor for one of them it changes for that box for each record.
I want to be able to change this according to a query performed on a per-record basis. Is there any way? Up until now I've only been able to find conditional formatting (the feature that's nor available for rectangles nor seems to cater my exact needs?) and kludgy Access 97 text-box hacks.
Thanks in advance :)
You may be coming from an HTML background, where rectangles would be a natural solution. They aren't in Access. I don't think they'll work for you (in fact, "kludgy" could describe the attempt in my humble opinion).
You can however display an image. You'll keep an image for each status ready to call up. I've made visual displays this way. A little later I may be able to post some code, but I think you'll find this plays out pretty simply even if I don't.
ADDED NOTE: I'm glad this looks like it will work for you. You are concerned about "instanced only once" in your comment below. Yes, that's true for rectangles which are unbound controls (because they are designed for mere ornamentation). But you'll be using an image control which is a bound control (see Remou).
Change each rectangle to a text box, Control Source:
=Iif(myConditionIsMet,"ÛÛÛÛÛ","")
The "Û" is the Full Block character in Arial (asc 219).
All unbound controls in a continuous form will be the same; bound controls can be varied using conditional formatting.