Performace Issue with AutoFill Version 2.0.0 vs 1.2.1 on IE11
Performace Issue with AutoFill Version 2.0.0 vs 1.2.1 on IE11
glenderson
Posts: 231Questions: 11Answers: 29
Using IE11, I'm seeing a huge performance issue when I implemented Autofill version 2.0.0 vs version 1.2.1.
The ability to scroll through the table, select a cell / row, the loading of the table, etc., are all adversely impacted.
My table is 14 wide by 288 high and I'm displaying 100 at a time.
On Chrome I don't see the same kind of impact.
I removed the setting of the AutoFill in the table initialization so autofill is actually turned "off", but simply including the .js file is causing the page to "stutter" when scrolling a table.
When I switch back to version 1.2.1, the table scrolls fine.
With 1.2.1, everything it normal.
With 2.0.0, you can not scroll smoothly up and down, delay between selecting a row or cell. Even if autofill is not initialized with the table it's causing problems. It appears to be totally related to the <script> autofill .js file.
Version 1.2.1 is from the download of dataTables 1.10.7.
Version 2.0.0 is from the download for dataTables 1.10.8.
Any ideas of why merely including the autofill .js would cause such a performance issue?
This question has an accepted answers - jump to answer
Answers
Not at all I'm afraid. The code shouldn't be doing anything at all unless initialised.
Could you give me a link to the page showing the issue to I can analyse and hopefully resolve the issue please.
Allan
I attempted to fiddle something up, but there's just too many functions and methods that I link to be able to generate anything worthwhile. My applications are all intranet so I'm not able to provide an external link to them.
What I did, however, find out is that it's something to do with the .css file. I've only seen the issue on IE (both IE10 and IE11). I've seen no such issue on either FF or Chrome.
If I use the autofill .css from 1.10.7 everything appears to work normally.
If I use the autofill .css from 1.10.8, I get the poor performance when loading, scrolling, selecting. There's just a huge latency. Since the problem I'm seeing is .css based, it explains why not initializing autofill still exhibits the condition. I'll let you know if I find anything within the .css itself.
Using relative positioning on the td cell appears to be the root condition causing the latency for my use. However, not using it causes the autofill to never appear.
Thanks for your investigation. So does this example or any of the others on this site run slowly for you? I've just tried it in IE and it seems to run quite well.
Allan
Hello Allan,
The examples on your web pages work just fine. But, they are very high in the DOM positioning.
I'm loading everything via ajax and the position of the tables are often very nested into the DOM. They are often in a page layout that has multiple columns via float divs to provide a nice layout for the user.
I mocked up a dummy table to perform some testing on my site.
When I move the table completely outside of the DOM nesting to where the table is right under the body node, performance is excellent. When I move the table back to the desired position about 11 nodes deeper with various layouts, then performance is shot. It must be related to how IE (perhaps jQuery) calculates the positioning of a relative element vs how it's done for FF or Chrome. The use of the relative position also affected my editor, but I was able to overcome that problem. This one, however, I'm a bit stumped on.
So if you remove these lines from the CSS it becomes nicely performant again - although presumably the highlighting is misaligned.
That sounds like I'll need to do some reworking on how AutoFill works if so.
Allan
That is correct, simply remarking out "table.dataTable tbody td," restores performance (scrolling, selecting, etc.) but you cannot select the drag cell any longer as the cell is not highlighted.
Okay, thanks for the investigation. I'll look into how I can change AutoFill to work without that CSS. It will just be a case of changing the calculations I suspect, but it might be a bit of time before I get some free time to look into it.
Allan
Hi,
Its taken me a little while (sorry) but I've finally got this done. The change set is here and this will be included in the next release of AutoFill (which is not far away - this week or next).
Worth noting that the change is in the CSS as well as the Javascript - both must be updated.
The nightly version of AutoFill is up to date with this change if you want to try it out.
Allan