I've been tracking down a performance problem in one of our javascript app (in IE, to make matter worse) and I was able to track it down to jQueryUI button feature. I've created a jsfiddle showing the issue. The problem is 3 parts:
First, the generation of the buttons is extremely slow. The page generates 800 buttons in 5+ seconds under IE8, whereas it takes around 700ms when I disable the button feature. To make it worse, it gets slower and slower for every create/delete cycle. For comparison, in Chrome it takes less than a second (around 600ms) with the button feature and around 50ms without it. That's a 10x slow down for both browser!
Second, deleting/destroying all those button is also slow. I use the empty() method on the container to clean all the buttons and that ultimatly calls destroy on the button. This operation takes around 5 seconds under IE8 and 500ms in Chrome. Once I remove the jquery button feature, it takes 200ms in IE8 and 30-40ms in Chrome. That's a 20x slow down, worse than generating the button themselves.
Third, it seems that the button feature causes a huge memory leak in IE. Repeatedly creating and deleting the buttons result in the memory usage going up and up, but once again removing the button feature fixes this.
Can anyone explain this behaviour? Is this a performance problem in jQueryUI that should be reported or am I hitting a pitfall? Any workarounds?
Note: when I say i remove the button feature, it's not that I remove the <button> element from the document, it's just that I remove the call to jqueryUI's button function:
.button({
'text': true
})
Related
I've got a large mvc 5 bootstrap web page that's repeatedly causing IE to crash. The page has a large number of bootstrap accordions with jquery datatables in. The page loads fine but if you scroll too fast then a small white rectangle appears in the upper left side of the page and IE stops responding.
The page is fine with a much reduced amount of data, it's fine in chrome and its fine if you tick the "Use software rendering instead of GPU rendering" option in IE.
At the moment my solution is to display a warning on the page to the users that they need to tick that box if I've got more than 100 rows of data but especially as that option requires a restart of IE it's not ideal.
How can I go about fixing this, is it something anyone else has experienced?
ok, fixed but I'm not sure it's applicable for anyone else. I was using a old version of datatables (1.10.7) So I updated to the latest and it stopped happening but the memory usage still built up whilst the page was just sitting there. I removed the flash buttons and changed them to the html5 buttons and everything was much much better.
I saw that a similar question has been asked awhile ago, but it never had a real solution.
I have a page with about 30-40 inputs/selects. Some of them are within hidden divs at some points. The inputs don't give me any problems. But, sometimes when clicking one of the 10 selects, the browser locks up (in Safari and Chrome). It doesn't always do it, but when it does the browser usually crashes or is frozen for about 20-30 seconds.
Is there any known Solution to fix this problem? Is there any way to get around this without making some custom designed select options with html/javascript?
I don't have any hidden inputs by the way.
I've happily developed a mobile website using JQuery Mobile, and everything works beautifully except for a noticeable delay hiding the browser address bar on the homepage (around 5 seconds on iOS Safari).
AJAX transitions mean it's always hidden from that point on, but on the opening page the site logo is hidden for up to 5 seconds after the page has loaded, giving it a very unbranded and confusing feel for the user.
Can anyone think of any reasons for the delay / ways to speed it up? There are no large images loading on the page, putting an alert in the window load event fires way before the address bar is hidden and the setTimeout delays on the code firing in the JQuery Mobile code are only of the order of 20 ms.
Thanks in advance, Ted
I use Mobile Boilerplate's MBP.hideUrlBarOnLoad() and am not experiencing a five second delay.
Hide URL Bar
MBP.hideUrlBarOnLoad is used to hide the URL bar at the top of mobile
Safari on your iOS. Mobile space is limited and this helps to leverage
every pixel on the screen to maximize display area.
Sadly I've had to resort to a pretty hacky solution to this.
I've added a dummy 60px high spacer div at the top of the page, which pushes down the title, so it is visible at all times. This is then hidden by Javascript after 5 second setTimeout call, which is roughly equivalent to the delay we get on the url bar being auto-hidden by JQuery mobile.
This is only necessary on the start page, and other ones that we've had to load on rel="external" links, due to us making the error of mixing an ASP.net site that requires postback with JQuery mobile, but that's another story...
I've seen this happen when the content is Safari "Reader" compatible (when you see the "Reader" label next to the url on the url bar). I'm not sure but if this is the case maybe you could try to make your content less Reader compatible.
I am developing a Phonegap app for the major os platforms and am currently testing it on an iPad with iOS 5. Im using jquery mobile. So for large screens i've used the splitview jquery mobile plugin. http://asyraf9.github.com/jquery-mobile/
I've put a
$scrollArea.css('overflow-y','auto');
$scrollArea.css('-webkit-overflow-scrolling','touch');
to make the page scroll instead of using iscroll like the plugin was using. Now whats happening, is that the page isn't loading/repainting as the user scrolls. I have a list of 100 items and i scroll through them. The scrolling itself isn't slow, but it takes almost a full second for the new list view rows to pop into view after it has been scrolled. Before that it's a blank area.
On observing, i can see that the the list items don't pop into view until the scrolling has come to a halt. (momentum scroll)
A similar issue is here http://forum.jquery.com/topic/help-with-slow-list-view-scrolling-on-ipad-when-scrolling-in-an-overflow-auto-div
What can i do to make this work normally?? The same thing works fine on android tabs. pls help.
EDIT: If i use only
$scrollArea.css('overflow-y','auto');
then i dont face this issue of momentary blank areas after scrolling, but then the scrolling is painfully slow.
Please don't suggest using iScroll. Already tried that. its much much slower that what i get with -webkit-overflow-scrolling, and i cant use it.
My Approach
So, I tried a lot and I read even more about this problem. I ended up with a solution which is "OK" to me (because it works), but which is definitely not near to "perfect".
When using this CSS:
.container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
you run into a lot of problems when having a complex design (in my case a fullscreen background image), and it gets even worse, when using absolute positioned elements and iframes. (Which is - of course - both the case I needed).
So, what did the trick? Basicly this CSS:
.container > * {
-webkit-transform: translate3d(0,0,0);
}
With this rule the content was almost all the time rendered right away without getting those blank areas. Only when scrolling down the first time very fast it's a little flickering.
But be careful with the rule -webkit-transform: translate3d(0,0,0);. Using this rule heavily on many child elements forced Safari to: sometimes slow down but almost all the time to crash. The best thing is to wrap all content elements into a single div, works fine.
Done? Not really. There is still the iframe-issue: ("argh")
iframe
When the iframe is not fully in the visible part of the container at the start it gets cropped or is not even displayed at all. This could sometimes also occur when scrolling around. So, I tried to force Safari to re-render this part anytime scrolling is completed and came up with this:
//using jQuery
var container = $('#container');
var iframe = $('#iframe');
container.scroll( function (event) {
iframe.css( 'marginLeft', 1 );
setTimeout( function() {
iframe.css ( 'marginLeft', 0 );
}, 1 );
});
The thing with the scroll event on a touch device is, that it's only triggered when the scrolling has come to an end, so this function is not fired at anytime but when the momentum has come to an end. The short movement is actually not visible.
So, maybe this is helpful for somebody.
Further information
Here a few more links on this issue:
On how the scroll event is fired in iOS:
javascript scroll event for iPhone/iPad?
Bug report of this problem to Apple:
https://stackoverflow.com/a/7893031/1456376
iframe example with the same problem:
https://stackoverflow.com/a/8275972/1456376
We have used the plugin below in our project, did you try this one out?
https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview
On iOS it uses hardware acceleration to render the scrolling. It is rather easy to use, all you have to do is to assign an additional class to your div.
We did have some issues on Android 2 with this plugin, to overcome those issues we changed the scrollMethod property in jquery.mobile.scrollview.js.
I hope it helps you solve your scrolling problem
It not just my curiosity, recently I've received a bugreport concerning one of my AS3 applications. This bug can be reproduced only if the quality in flash player is set to LOW (HIGH/MEDIUM - everything is ok). The bug changes the application behaviour, but it's a mystery for me, why it happens only for LOW quality while quality is said to influence rendering and visual appearance, not the code or behaviour.
Briefly, I have a menu panel (MovieClip) with several items (also MovieClips). Very simple, it appears on a screen after a MouseEvent and a user moves a cursor from one element down to another. When the cursor reaches the edge of the second item, the menu suddenly disappears.
In my code panel hiding is set on mouse click or mouse out.
Personally, I think, that the problem is in Tweener, I have to use that old piece of code. The menu panel is shown when mouse is above a user icon, and concurrently with the help of Tweener I produce some simple effects on this icon.
I have explored adobe and firefox (my app is for web browsers and the bug is reported for firefox) bugtrackers, but so far I have found nothing. Maybe misbehaviour of flash player 11 with Arrays, already fixed... I've run out of ideas.
From the docs:
LOW
Specifies low rendering quality: graphics are not anti-aliased, and bitmaps are not smoothed.
If it only happens when rendering it set to low, then it's probably a timing issue - i.e., the bug has always been there, but because you're wrapping up rendering earlier, you can trigger then bug. Is the bug reporter's computer a slow one? Is there a lot happening at once? Is the menu being removed, set to invisible, or repositioned?
Like #jeremynealbrown said, try and separate out your class to a simple project to make sure there's nothing wrong with your logic there.
Another method, override the removeChild() method, and visible and x and y properties to see which one is setting it, then put traces before all calls that call these to see what's triggering it.
If you think the problem is in Tweener, add a MOUSE_OVER listener to the menu panel that calls something like removeAllTweens(), no matter the state of the menu panel. If the bug doesn't happen anymore, this will show you that it's related to the tween engine.