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.
Related
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
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
It's a recurring question since, like, forever: how to keep the headers fixed on top when scrolling down a table?
Yes, I know that the web isn't designed to show long spreadsheet-like tables, but when a client asks for something like that (because s/he used to those old Excel documents...), you have no choice but comply.
This is to sum up the major problems and attempted solutions with fixing the headers of a table:
a <thead> element can be relatively postioned, but it won't move from its position;
with position: absolute or fixed, the head is "detached" from the rest of the table, and the column widths doesn't match anymore; moreover, you have to reserve some space above the table body;
this can be solved using a different table for just the headers, leaving the body in the other, but won't fix the problem of the different widths of the columns;
you can set the columns with fixed widths, but it's not always applicable depending on your needs - i.e. in case of dynamic or unknown content;
Javascript can adjust the widths of the columns, but accessing to properties like offsetWidth causes a reflow, which is a quite heavy task even for a browser like Chrome or Firefox, and adds an annoying rendering lag with even not-so-large tables but with dynamic content;
you can create a copy of the table, using the first to show the headers and the other to show the body, but this makes the DOM twice as heavy and should rely on Javascript to copy the changes of the content;
using <div>s with display: table-whatever won't actually solve a thing, and deprives you of the chance to add rowspans and colspans.
With the latest technologies of the web, maybe we can try something new. I've experimented a solution using transform: translate which behaves acceptably good (see the fiddle here), and keeps the space above the table body, and the columns width still match.
This of course won't work in IE8 and lower. But it works fine in Chrome, Safari and Firefox. It doesn't work in Opera 12.x and below, but it does work in Opera 15 thanks of its brand new Blink render engine. I've noticed this works better or at least as well with translate than with translate3d: it shows a bit less flickering.
Unfortunately, this doesn't work in IE9 and IE10, and the headers are kept in their positions. It's really a shame since there's no way to detect this behaviour (that I know of).
So, what are your most recent solutions for this problem? I'm looking for CSS and pure Javascript solutions.
I recently had to do this exact thing for a client and found it be next to impossible. I did find a really good library called SlickGrid, however when it came to translating that to mobile, it just wouldn't work (performance was too big of an issue). If mobile is not a concern of yours then I definitely suggest checking it out. https://github.com/mleibman/SlickGrid
I have a problem where Mobile Safari crashes when loading and manipulating the DOM with jQuery when the pages get too big.
I get the same problem on both iPhone and iPad.
What are the best way to troubleshoot mobile pages to find the error? Are there any known problems that might crash Mobile Safari?
I actually found the problem. It wasn't with JS as I thought, but with the CSS. I added class to make a CSS transition to fade in some elements. For anonymous users these elements had display: none; and probably never ran the opacity transition.
The strange thing is that the transitions was on exactly two elements. So why would this only crash on long threads with 100+ comments?
So the bottom line is: -webkit-transition crashed the page on mobile safari.
Had the same issue, for me it was -webkit-transform: translateZ(0); that caused the crash of Safari.
I know this question has been successfully answered but I just wanted to put my five cents in too as I have been banging my head against the wall over this one quite a few times:
As most answers have pointed out already it usually comes down to memory issues. Almost anything can be the last bit that finally tips over the "memory pile" much like a translateZ or anything else.
However in my experience it has nothing to do with the actual CSS (or JS) command in specific. It just happens to be that the last transition was one too much.
What tends to help me a lot is to keep anything that is not visible at this time under display: none. This might sound primitive but actually does the trick. It's a simple way to tell the renderer of the browser that you don't need this element at this time and therefore releases memory. This allows you to create mile long vertical scrollers with all sorts of 3d effects as long as you hide elements that you are not using at this time.
The main issue with any iOS app is memory usage. So, it is likely that your pages are using too much memory.
Mobile Safari use some clever technique so that not the whole page has to reside in memory at any given time, only a portion of it. Maybe you could check if anything in your page defeats this mechanism or makes it less effective.
In any case, to give more up to the point suggestions, more information about your page would be really great.
By the way, you could have some hints from the crash log that the device store. Check to see if you can find it under Settings:
General
About
Diagnostics & Usage
Diagnostics & Usage Data
If it's a memory problem, you should find something like "signal (0)"; not sure if this can only mean "killed due to memory usage", but I usually take this for granted when I found a signal (0).
Otherwise, it might tell you what is wrong...
Hope this helps.
There are both memory limits and Javascript execution time limits, though it's a little fuzzy as to how you may actually hit those. Common reports come in that a page with a size greater than 10MB will have issues, and Javascript execution is limited to 10 seconds.
See Apple's documentation for more info.
I recently had an issue with mobile safari crashing on web-app pages containing a lot of images (30+ were enough) and a few transformations for the menu. After a lot of trial and error, I settled with a solution similar to what LinkedIn does, but for infinite scrolling using angularjs. I used requestAnimFrame and two expanding/shrinking divs (with js style attributes) on the top and bottom of the list to remove all image containers (with other stuff overlayed on top) except for a few ones which are close to the viewport. Scrolling performance (native, no js) is fine and memory consumption is in check.
I had a similar problem, the web page worked like a charm on android devices and crashed on IOS (iphone and simulator).
After a lot of research (using also the ios_webkit_debug_proxy) I found that the problem was connected to the jQuery ready event.
Adding a little timeout solved the problem. My application was also using iframes.
$(document).ready(function () {
window.setTimeout(function () { ready(); }, 10);
});
I has been playing with YUI3 3.5pre5 DataTables and realized a big difference in implementations (from YUI2).
When using addRow(), modifyRow() and set(), all the table is reloaded/redrawn/refreshed instead of only the elements affected.
For example when a row is added all the table is redrawn instead of only the new row (like in YUI2).
This is a real problem if you have a lot of data and everything is redrawn because of some cell updated. Or if you need to update the data every x seconds the table will be constantly refreshing making it harder to work with.
I hope I'm doing it wrong and there is way of doing it or a workaround.
Please let me know if there is a way to make the new DataTables behave correctly.
Thanks!
You're not doing it wrong; that's the current state of the code. I'll be optimizing data mutation -> UI in 3.6.0, and like I did during 3.5.0, I'll be maintaining a preview module in gallery that has the latest updates and features.
There were plenty of performance improvements that I wanted to get into 3.5.0 that I just couldn't fit in due to the architecture and feature migration from 3.4.1.
In the mean time, here's a patch that should help: https://gist.github.com/2295032
Note, it's not compatible with nodeFormatters, and may have other edge cases.