So, I'm building an editor in Javascript with some Ajax. It started off as a proof-of-concept, and it worked great in both MSIE and Firefox. Basically, the editor keeps track of multiple types of things, and each type has its own input form that appears and disappears dynamically. When I only have 2 or so of these input types, it's great. Works like a charm. But when I put in another 4 of them (6 total), it starts slowing down. But it slows down strangely.

The thing is that any clickable thing takes about a full second before it registers. As an example, I put this in to test the theory:



And sure enough, it takes about a second before I get the alert popup. Firefox works fine. MSIE, slow-as-all-get-out.

I'm assuming that by adding additional objects to the page, I've somehow slowed things down by giving MSIE more objects to keep listeners for? So when it gets a click, it's checking lots of things that it need not check to see if they got clicked?

If that's the case, is there any way to temporarily disable these listeners (IE only enable them when they're visible)? And if it's not the case, anyone have any ideas as to why it would be so slow to register a click in MSIE, but not Firefox?

DaveE
Back to top

Javascript is super slow. So the more you have, the more likely something or other will bring browser x or y to a crawl. It's a very high level language, I've written many scripts that brought browsers and computers to a total standstill because too many simultaneous events were firing.

Usually that's firefox, which has a dramatically inferior javascript engine to MSIE (probably the ONLY area I consider MSIE to be better than other browsers in). But I guess this time it's MSIE that has the problems.

If I remember my ajax stuff right, MSIE and Firefox use different methods, which could account for the problems.

But a 1 second lag is probably due to a design error I'd guess. If you have the page filled with too many triggers, you're just going to get into that type of lag.

And by the way, don't fall for that beginner scripter/coder error of only testing this on your new fast box. Test the stuff on an average, mid range box, something like a Pentium P3 1 gigaherz cpu with 256 mB or less ram. Then on a slightly newer machine, like a 1.5 gigaherz box with 256 mB or so ram.

Since javascript performance is directly related to machine power, you may get some pretty depressing results from these tests. I gave up on most javascript years ago for these types of reasons. But some stuff needs that ajax touch, the trick is to learn how to optimize your specific code, and that's only done by heavy testing and rewrites to pinpoint the bottlenecks.
Back to top

Actually, I found the problem-- ish. I had been using multiple instances of these on my input forms:

www.mattkruse.com/javascript/calendarpopup/

I went from using 4 of them to using 27 of them (each of the 6 input types requires a varying number of dates as inputs, so I figured I'd just put in these widgets wherever I was using a date).

I haven't really delved into the code too much, but from preliminary glances, it looks like I may be able to modify the code (I guess I'll have to check the license agreement) so that it only requires ONE instance per page, rather than using 27 seperate calendar objects.

As for MSIE vs. Firefox, it's interesting to see where things are faster and where they're slower. Having 27 calendar objects didn't slow Firefox down at ALL. BUT, Firefox was slow when it had to animate a <div> containing some 30+ inputs, where MSIE was fast. On the plus side, animation is fluff. I can adjust the animation speed to compensate. But if it takes 1+ seconds to react to a click, that's just not workable.

DaveE
Back to top

Firefox has terrible animation type handling. Anything that involves repeated actions fired by timers destroys firefox.

I've tested this a lot, you can actually see the difference very easily by running some torture tests, like looping something 10k or 100k times, then spitting out the time it took

Firefox has had this problem for a while, I was hoping it would be fixed in 2.0 but it wasn't. Their js engine is just weak, that's life. Probably core issues that can't easily be patched I'd guess.

make sure to do a lot of testing on this type of stuff.
Back to top