I have 5 tabs of angular material and my heaviest tab consist of 1 ui-grid. If i initialize it with 1000 rows and 50 columns (which should be okay according to their demos), changing the tab from one to another became extremely slow (8-18 second for "non-grid tabs" and 22-crash seconds for "grid tab"). It is slow even if i disable the animation between tabpanel transitions.
Is there any solution to speed up the tabs (or grid)?
Found!
Assigning a very small number to the attribute "exceesRows" is the only way to speed up the ui-grid (and that really helps). Using this, you actually restrict the number of rows to be loaded for each user view. And now i see the slowness has nothing to do with the md-tab.
Related
Is there any way to load the columns lazily. I've a set of 5k columns and 100k rows. I'm using angularjs 1.5.7 and angular-ui-grid ^3.x.
The grid works perfect with 100k rows and 100 columns. But if I tried to load more than 2k columns it takes 10-15 sec to load the page. I'm using infinite scroll module.
It would be great if there is any way to load the columns lazily on demand. Or anyway to extend the ui-grid library.
Thanks in advance!
Try setting the config option columnVirtualizationThreshold to the number of columns of my table:
columnVirtualizationThreshold: $scope.columns.length
Only problem is the issue that the vertical scrolling becomes slower.
See this thread: https://github.com/angular-ui/ui-grid/issues/2784
Difference between angular ng-repeat and angular material md-virtual-repeat?
When should i use one or another?
ng-repeat renders all elements in list, its less performant on large lists.
md-virtual-repeat renders list what is visible on viewport, it doesn't render all elements of list, when user scrolls in case of large lists it then seemlesly renders other elements, this way its performant and should be used when working with large lists.
Angular documentation tells it pretty clearly:
Virtual repeat is a limited substitute for ng-repeat that renders only enough dom nodes to fill the container and recycling them as the user scrolls. Arrays, but not objects are supported for iteration. Track by, as alias, and (key, value) syntax are not supported.
Source
md-virtual-repeat is similar to ng-repeat but it is very useful when you want to load large amount of data.
Consider you have to load a 100,000 records. In this case if it is ng-repeat then it will load all the data initially. So the user may get frustrated while it is loading. If the user wants the first 50 rows of data only, ng-repeat forces him to wait until all 100,000 records load!
To avoid this in material we have md-virtual-repeat. It loads the next set of data when there is a demand for it (the user scrolls for more data)
Ultimately, the loading time is optimized if you use md-virtual-repeat.
The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
Source
ng-repeat loads the entire data set before rendering to the UI. It is extremely useful when dealing with a smaller list. To ensure that it is most effective it is advisable to use track by and or limit to in the ng-repeat expression. A great md-data-table example that uses ng-repeat is Daniel Nagy's table
With a large list of records ng-repeat becomes very much slower. If it is slow the recommended usage is to switch to md-virtual-repeat
md-virtual-repeat specifies an element to repeat using virtual scrolling.
Virtual repeat is a limited substitute for ng-repeat that renders only enough DOM nodes to fill the container and recycling them as the user scrolls.
Source
md-virtual-repeat only loads the data on demand - the user scrolls. It loads the data much quicker when having a large result set. md-virtual-repeat becomes cumbersome when inserting it into a table.
I created a kind of TabControl, in which I activate Pages and depending on the PageNumber I show a table (ng-repeats). This table is an own directive (a selfmade Grid-Directive).
Now I experience, that if I have less tabpages, the application is faster than if I have more tabpages - although all pages use ngIf and are not rendered until the according PageNumber is set.
I believe, it is because ngIf Compiles it's content eventhough it shouldn't but I can't quite get to the point of it when using a profiler. I just see, that "compileNodes" gets called a lot.
Does anyone experience the same? Is there an idea for a workaround?
Edit:
what's also interesting is, that the first time I go to the tabcontroll (link inside a single-page-application) it's faster and the following times it's slower. As if something is remembered although the whole tabbed-control gets deleted when navigated to another content.
Edit 2:
I'm still trying to figure it out. It could even be the ngRepeat as I'm showing my TabControl inside another TabControl which I do with ngRepeat. Interestingly enough: The first time I visit my Page it is fast, then I click to another Page and when I come back it is slow! Does ngRepeat keep some things in cache?? The Browser-Profile tells me that there are some things in jQuery's data_user -> cache which aren't free'd (in Chrome up to 9MB of Data on every click!!)
Since its a tab view use ng-switch instead of ng-if because it has to run through all the cases to display the tab rather jumping to the tab to display.
I have an ng-repeat that consists of an activity item. Activity items consist of a title, description, and type (all strings). I have three input filters (title and description are done via textbox, type is done via select) that are set up with ng-model written as activityFilter.Title, activityFilter.Description, activityFilter.Type.
I have two questions from this:
1) I'm not sure why, but if I type a filter in the Description box, nothing happens (the filter does not occur). When I clear the Description box, the number of activity items doubles and then goes back to the proper number shortly thereafter. I'm assuming that there is a digest cycle period that resets it back to the correct number of items, but any thoughts as to why it would be doubling up when I clear it?
2) There is potential for there to be as many as 1000 activity items in this list. I'm already noticing performance issues when I get to 100 or so items. Is there a better way to do do things then use ng-repeat that will still take advantage of filters?
3) Currently I have the ng-repeat section done with a series of divs. Would it help improve performance if I switched it to an ng-repeat of directives?
I'm using Angular 1.3.x.
Am using angular in this simple search results page and instead of adding jquery masonry for layout and deal with timing issues I decided to give this directive a try since it plays nicely with the ng-repeat.
Unfortunately when I have a large dataset and the ng-repeat takes a second or two, the page gets all screw up and all items render on top of each other. Someone claimed that it has something to do with the last element in the ng-repeat not being loaded by the time the layout is created through the plugin.
Someone else recommended a timeout to create a delay, this option works but the user can see the layout being built, which is not the best solution.
Anyone out there that has use this directive to create a masonry layout with a large dataset?