0

We're using PrimeNG's Turbo Table with dynamic columns to display 1000 records per page.Both server-side pagination and sorting are enabled. This works well in Chrome but it is staggeringly slow in IE during sorting, pagination or updating all the records. Once the server response is returned in ~9s, IE freezes for 2 min and then displays the data. Also, the table uses ngSwitch to determine the column content, for instance, some columns display icons, some display a text area and so on.

Enabling prodMode has helped improve the page load significantly and this is comparable to Chrome now, however we still have performance issues while sorting, pagination and updating the records.

We've tested the performance by removing ngSwitch and observed a slight improvement - a 10s reduction. However, we require the ngSwitch functionality, so removing it really isn't an option, unless there's an alternative we can use. Anyhow, it doesn't quite solve our problem.

Appreciate any help please!

GN15
  • 3
  • 1
  • Have you used F12 dev tools Performance tab to check which part slows down the performance in IE? Is there any error in console in IE? Besides, you could try to use [virtual scroll](https://www.primefaces.org/primeng/showcase/#/table/scroll). It pretends to have all items, but actually only shows a certain amount at the same time. I think it will keep your DOM light and have faster performance. – Yu Zhou May 22 '20 at 08:21
  • IE hangs every time I launch Dev Tools! Also, I don't see any error in the console. I did try using virtual scroll but it didn't work well for our use-case. The users need to be able to select either all or some of the records on a page at once and perform an action on it. For this, we provide the Context Menu functionality of Turbo Table as well. – GN15 May 22 '20 at 08:55

1 Answers1

0

It can be possible that IE needs more time than any other latest browsers, especially in the situation that you need to display 1000 records which is not a small amount. I don't know if it is possible for your-case to load less records per time. If possible, you could find a balance between the load time and records amounts in IE.

Without any sample code, we can only provide some general suggestions. In this situation, I can only suggest you to use F12 developer Performance tools to analyze UI performance, and use F12 developer Network tools to check the request spend time. If the Dev Tools doesn't work well in your IE, you could also use Windows Performance Toolkit to analyze the website performance.

Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • 1
    Thank you so much for your help! In order to get the Dev Tools to work, I reduced the number of records to 500 and this allowed me to analyse the performance. It appears that all of the time is being spent on the DOM load event, i.e the globalZoneAwareCallback function in polyfills-es5.js to be specific. Also, the Javascript call stacks show the function 'checkAndUpdateView' in vendor.js utilising 35% CPU. – GN15 May 22 '20 at 15:55
  • Added the below in index.html but it hasn't helped: . as suggested here - https://github.com/angular/zone.js/issues/971 – GN15 May 22 '20 at 17:42
  • Performance of TurboTable is similar to native `*ngFor` as it uses it. `NgFor` tears down the entire DOM tree for the repeat and rebuilds it for any little change made to its data which could be a big hit on IE performance. Giving `NgFor` a `trackBy` function allows it to only update the DOM where changes are needed. For other performance checking, you could refer to [this list](https://github.com/mgechev/angular-performance-checklist). – Yu Zhou May 25 '20 at 07:31
  • Thanks @YuZhou. Our table already uses the trackBy function, in addition to the change detection onPush strategy in the component. Updating some of the records hardly takes a few secs. However, it takes ages if we update all 1k records at once. I will have a look at the list you've recommended. – GN15 May 26 '20 at 10:56
  • You're welcome. If everything necessary has been done then I think that's due to IE's limitation. After all, IE uses different engine with other modern browsers and it can't be as fast as other modern browsers. – Yu Zhou May 27 '20 at 06:04
  • I replaced a couple of function calls within the html with pipes, which has reduced the time by 7s or so (not a huge difference obviously). I did try something else.. the table gets the data from an array [value]="data". I cleared out the array before the server-side sorting commences and now it takes only 4-5s more than Chrome. However, clearing out is not the right solution because the current set of records on the UI disappears if the user clicks sort or navigates to another page. – GN15 May 27 '20 at 18:31
  • Example code: this.items=[]; this.testService.getItems().subscribe((data) => this.items = data.items....) Any suggestions on a better way to replace the data array? – GN15 May 27 '20 at 18:40
  • It's hard to reproduce with only the above one line of code. It could be better if you provide [a minimal sample](https://stackoverflow.com/help/minimal-reproducible-example) to reproduce the issue. You could use some online code editor like [StackBlitz](https://stackblitz.com/) to show the example to reproduce the issue. – Yu Zhou May 28 '20 at 07:07