I'm integrating ag-grid in my JSF application. When i run ag-grid in simple application it works great. But when the same grid in used in a page contains more number of components, clicking on a cell takes nearly 0.5 to 1 seconds to move focus to that cell but keyboard navigation is working faster. On analysing with chrome performance monitor we found that mouse down event is consuming time. Chrome is showing below warning message.
Forced Reflow is likely a performance bottleneck
How to overcome this performance issue?
Ag grid version: 17
This issue was fixed in aggridenterprise-17.1.1
Related
I'm trying to implement a scroll animation on my FlatList using react-native-reanimated2 but I'm having trouble doing so. However, I am able to implement the animation using a ScrollView. The list is of a fixed size (no more than 20 items). I was just wondering, how many items can the ScrollView render before it starts to cause performance issues (because it renders all items at once). Is there a benchmark value? I'm asking because I don't want to have performance issues in my app because the Scrollview. Thanks.
Why don't you try it? Make a ScrollView with one item, twenty, a hundred, a thousand. Scroll to test, or build in native editors and use their perf monitors. For an accurate representation, use release builds - dev builds will always be slower.
It largely depends on how complex the items are, and the capabilities of the device. Single lines of text on a recent phone? Should be fine with lots. Multiple animations and images per item? More than a couple might choke on an old device.
I have Angular 5 project. It's admin web with many tabs. Every tab contains complicated filter and grid. After often switching tabs grows memory (in Chrome js heap size), but number of DOM Nodes isn't growing. It's not problem to grow memory to 1GB in 5 minutes. IE has a limit of about 1.5 GB and then falls due to a lack of memory.
At first I thought it was only a problem of our application or Angular, but I created a simple html test page with two buttons and simple javascript. One button adds a textbox and the other removes it. Then I created a simple E2E test that added 1000 times and removed the textbox and memory in the browser grew as well. Tested in Chrome (66) and IE11 with same symptoms as angular application, JS Heap is increasing, but number of DOM Nodes is fine.
Then I tried to watch for example facebook.com, that is one of best known single page application. I watched the same behavior and it is not a problem to drop the app in a moment.
I think this problem is caused by adding and removing many html elements over and over again.
Does anyone have similar experiences or solution?
I am using handsontable 0.18.0 version in my application. In the handsontable we are loading collection of data in tree view form, We can expands their childs. If we expand the childs and update any particular cell, we are facing performance issue (it takes almost 20-30 secs) in IE browser, but in chrome it is 3-6 seconds. Without expanding nodes it will take around 3-5 Secs., only.
Can anyone suggest how to overcome this issue?
Thanks in advance.
One of the issues with IE is the way the virtual rendering occurs. The reason chrome and other browsers are so fast is that Handson uses this type of rendering to only show the rows in your viewport. It is a known issue which is why if you look at the compatibility table, it says IE is known to have "Limited ability to handle large amounts of data".
The solution would be to upgrade your browser or try to implement a type of virtual rendering yourself. The latter can be daunting but the only solution, unfortunately.
I am developing a Chrome App which is based on the same code as the normal web based version. It's a web-audio app so quite performance critical for timing purposes.
I have noticed whilst holding down the mouse button within the app and wiggling it around, performance drops significantly, enough to mess up the timing. This issue does not occur in the ordinary browser based version which is running the same code.
I have recorded the activity with the Chrome developer tools and the only thing I can spot that does not happen with the browser based version is a function call to updateAppWindowProperties - which is a built in Chrome App function.
I have attached a screenshot of the dev tools recording where you can see 3 big spikes in the activity, these are the bits where I am holding down the mouse button and moving it around.
Anyone know what the cause of this could be, is it something to do with the Chrome App checking the window size?
It seems to have been fixed by reducing the number of css classes. I had a LOT of classes that were used only for jquery selectors, I changed them to data attribs and that seems to have fixed the performance issues.
I am facing performance issues with Tabs Panel for IE9 (and above) if I even open just 2-3 tabs with HTML document of size varying from 1MB to 20MB. Then on switching between tabs it’s taking around 3-4 seconds (when page has only tab panel) and around 5-6 seconds (when page has a lot of other extjs components) on IE-11. The response is almost 1-2 secs on IE8 which is very surprising.
I also tried with different hideMode options (Display, offsets, visibility, asclass) but with not much benefit although hideMode='asclass' is comparatively fast than other options.
I also created a sample page to confirm if it is really document size issue or extjs component issue. Created simple tabs (with divs) without any JS library and just changed their css z-index (instead of css display or css visibility) and they were switching instantly (on all IE versions). Trying the same solution on a separate page for ExtJS doesn't help on IE11 (somewhat faster on IE8). So it seems to be ExtJS specific issue.
Has anyone else ever faced this issue? Any comments or solutions would be greatly appreciated.
You can use the profiler for IE to see whether any scripts related to ExtJS 4.2.1 take a long time to load. If you discover such a script, you can then proceed to making a bug report for this library.
Here's some detailed information of how to do JavaScript profiling in IE.
Profiling JavaScript performance