In IE Java-script load slower than Firefox, Safari and Chrome?
Is there a way to load JavaScript quickly in IE also?
General best practice is to keep JavaScript at bottom of the page, does it make Js rendering more slow in IE?
Edit:
When we apply any jquery plugin to website to make any usable or interactivity then in IE effect shows slower than Other browsers.
We can easily identify the effect of condition on the page, before and after loading JS, which looks odd.
The IE8 or below JavaScript engine sucks, it's better in IE8, but comparatively, it's still way behind...there's not a ton you can do about this if you're doing any heavy operations.
JavaScript is loaded and parsed each page, so the slower the engine, the slower the load...and that's the case with IE. Keeping JavaScript at the bottom of the <body> is one option, to prevent blocking, but likely your issue is not the loading (as this would be from cache, if your headers are set correctly), but the execution.
If it's any consolation, it seems IE9 is a major step forward, over IE8 at least.
It's a bit more general, but if you're looking to speed up your pages there are a few things to consider, Google has a good list for this and Yahoo does too.
Not IE specific, but BetterExplained has some good points on how to increase load times or in some cases, Web page response times.
In terms of today's browsers, IE8's JS engine is slow, but IE9's will perform much better.
It's execution time that's slowing you down. Unfortunately, there's not a whole lot you can do about it.
I believe your talking about the unsightly FOUC (flash of un-styled content).
Paul Irish has some tips to avoid this which is more prevalent in ie.
You really shouldn't see that much of a difference for most interactive uses of JavaScript, which is the kind you find on most websites. However, if you have a lot of loops or do a lot of computation in your script, then you'll see a huge difference between various JS engines. In my experience, Chrome > Firefox > IE in terms of JS engine speed.
Related
When I'm testing my website on a normal notebook, I have no problem with my website but when I'm testing this website on a Netbook (mini laptop) it has a strange behaviour.
You can see the website here:
http://www.benskesblog.com/projects/frontend/project/index.htm
(it works on IE9 and other modern browsers).
When I try it on my netbook the images aren't displayed completely. When I scroll I see another part of the images. Very strang. I've tested it on another netbook (and on other browsers) and I have the same problem. You can see it here:
http://img259.imageshack.us/img259/5168/titel1.jpg
http://img683.imageshack.us/img683/374/titel2k.jpg
Does someone now what's going on?
Thanks!
For starters, IE9 isn't "modern" - it's "bleeding edge".
Also, your page doesn't work at all in IE6 - which is arguably the most common browser out there.
So you've really got two questions you need to ask:
1) What is the minimum browser I'll support (for example, IE9+FF7+Safari5 #1024x768 truecolor resolution)?
2) How will I degrade gracefully for users who don't support my minimum requirements?
We did an application using rails(2.3.4), ruby(1.8.2), MySQL, JavaScript, jQuery. This is handling minimum 6000 records. We showing those records detail in table. In the beginning Mozilla taking 2m to load the whole page. We did the cache, eager loading, indexes. Now Mozilla taking 25s to load the whole page. But IE-7 taking 1m30s to load the page.
We don't know why IE-7 taking too much of time.
Any one can help us to detect the running time in IE-7 and tell your guidelines to improve performance in IE-7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.
Use partial loading. Don't try to load the 6000 records at once, load them in smaller segments, when needed. Even 5 second loading is too long, not to mention the 25 seconds or 1m 30s.
Oh and yeah, IE 7's JS engine just sucks.
From Table Rendering - IE Blog:
When Internet Explorer encounters a table it measures all the content
of the table before rendering so that it knows what the widths of the
columns are to render the content correctly. On the other hand Firefox
uses a different algorithm in that it renders the table contents
progressively before it has all been passed.
You can improve performance by setting the CSS rule table-layout: fixed. The renderer will then calculate the layout based on the first row of the table.
IE7 is slow, there's no real way of getting around that basic fact.
I'm going to answer your second question (about debugging tools for IE7) because I don't think I can give any useful advice on your main point about actually speeding up IE7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.
The first thing to try is IE8 or IE9. These browsers have a Developer Tools window (accessible via F12, just like Firebug). It isn't as good as Firebug, but it does do quite a bit, and it is a useful debugging tool. It also has a feature which allows you to switch the browser into IE7-compatibility mode. The idea is that you can test IE7 from the relative comforts of IE8 or IE9.
The down side is that it isn't actually IE7. It's just a pretend ID7, and not a particularly good one at that. It may or may not replicate the speed issues you're having with IE7, and it certainly has known bugs and quirks of its own which don't appear either in a real IE7 or in IE8 in normal mode.
But all that said, it might be good enough for you to run some tests and get some answers.
A second suggestion might be to try Firebug Lite. This is a cut-down version of Firebug which runs as a bookmarklet in any browser (but generally IE). It doesn't have all the features of the full version of Firebug, because there's only so much you can do without writing a browser plug-in, but it does do a surprising amount. If nothing else, it does give you the console functions, which can be a life saver for debugging.
I hope that helps.
I have made an application using YUI-2 which uses different effects from YUI animation module. i have created a form works just like this: http://tympanus.net/Tutorials/FancySlidingForm/
In the application YAHOO.util.Scroll() is used to create animated effect.
var myAnim1 = new YAHOO.util.Scroll('container1', {
left: {
to: 500
}
},1,YAHOO.util.Easing.easeOut);
myAnim1.animate();
The above code works perfect in Chrome but animation runs slow in Firfox and Internet Explorer.
Can anyone suggest me what could be the problem causing the code to run slow in these browsers?
The usual reason for slow animations is the speed of the browsers rendering engine.
Depending on what you are animating and how it affects the rendered part of the html page, the browser is forced to re-render the page for each step of the animation.
IE is usually very poor at this, firefox is usually fairly good, but has problems with some layouts. Chrome is nearly always very good at this and thus you rarely see problem there.
LINK TO THE PAGE NO LONGER ACTIVE, THANKS FOR VISITING, Rene
Hi,
I have a page here and I can't understand why is IE8 rendering this page so slowly.
Originally I thought it was the scrolling text at the top but it's not as I commented it out with no progress. So then I profiled with developer tools for IE8 and it shows a lot of anonymous functions running which I suspect come from jquery (which is not loaded by me directly) but the developer tools cannot show me the source code for those functions. So I can't pin down the problem on what are those phantom functions running from or why as I have no experience with jquery. I noticed that those functions do not run in FF when I profiled it with FireBug so maybe something is running for IE but not for FF ? I am a bit lost.
Any help/suggestions is greatly appreciated!
Thanks so much,
Rene
I was able to see the process jumping between 79MB and 65MB off and on. It may be an issue of memory not being freed up or perhaps an inefficient background operation that is hanging everything up.
I would go with meder5's advice. I would comment any and all unnecessary code and start with the bare minimum and track performance till you find the bottleneck as you add pieces back in.
Hi I also tested in Chrome 8. Frankly, the page is neither fast in IE nor FF nor Chrome. But its relatively faster in FF and Chrome much than IE. I suppose it has something to do with the different mechanisms of FF/Chrome and IE use handling contents.
By the way, I appreciate that you guys can do very nice animation with javascript&jquery,
The page is rendered within an nyroModal (loaded via ajax) and the DOM is manipulated quite a bit using several plugins before actually showing the page.
Everything is fine in non-IE-Browsers and IE7, but in IE8 the resizable and draggable of an div is very slow and crawles along.
I know IE8 is slow. I know my DOM is big. I know i use a lot of plugins. My question is, what exactly slows it down, as other Browsers do it well?
I deactivated every plugin after each other to locate the culprit. Only having resizable activated it is still slow.
I used IE8 profiler and it says offset uses most of the time.
EDIT: I analyzed the page using dynaTrace AJAX Edition and it showes me that these 2 functions are responsible for the most exec time:
jQuery.fn.offset = function(options)
and
jQuery.expr.filters.hidden = function(elem)
both in jquery.js
i read somewhere that IE8 has problems with offset, but how can i circumvent this?
Edit2: I builded a test-page with just a link to open the page with all the resizing in a modal. works nice also in ie8 ! so i guess the big DOM of the modal-parent-page is the problem.
any advice appreciated!
Dynatrace has a very good javascript profiler. Check it out.
Check that your browser is not running in IE7 emulation mode.