Jump to content

Internet Explorer vs. Other Browsers


Fargone

Recommended Posts

Hello,I'm learning HTML/CSS/Javascript/PHP now so some of my questions might be basic.Anyways, I'm wondering - does Internet Explorer process javascript much slower then the other browsers? I was playing around with some javascript code and created this website:http://www.thegreycomet.com/example1/tablebox.htmlThis webpage uses javascript to build the table and produce the various events like the mouse over color and the moving table. When I run this in Google Chrome or firefox, it works fine. When I run it in Internet Explorer it runs much slower. Is internet explorer just like this? Is it just terribly inefficient? Is there something about my code that would cause it to run slow on IE8 but not the other browsers?Thanks.

Link to comment
Share on other sites

I'd say Internet Explorer's Javascript engine is most of the problem.As for suggestions to make your Javascript more efficient:Don't use expressions as arguments for setTimeout. Use function references instead:theTimer = setTimeout(scrollTable,80)Modifying the innerHTML of an element is better than document.write(). Build the string and then add it as the innerHTML of another element.

str = '<table id="myTable">';for(row=1; row<=rowTotal; row++) {  str += '<tr>';  . . .}document.getElementById('myElement').innerHTML = str;

<div id="myElement"></div>

It possibly would be better to bind events with Javascript rather than using an HTML attribute, but that would require using DOM methods to create the table and cells.

Link to comment
Share on other sites

In short yes. Though ie9 destroys every other browser except Chrome.
"destroys" is probably too strong expression... let's say "It's at the level of" Chrome and Opera, which is to say "the difference in a statistical margin of error".
Link to comment
Share on other sites

Ok, thank you. I figured it was IE8 I just didn't know if it could have that big of an affect.For your javascript suggestions. I can see how creating a long txt string and then adding it to the innerHTML would help. For the other suggestion, you mentoined setting "theTimer = setTimeout(scrollTable,80)'. Is this different then what I have in my code? In my code I wrote "theTimer = setTimeout("scrollTable()",80)". Are these two lines of code different? Thanks

Link to comment
Share on other sites

And Opera.
:) IE 9 isn't even at the level of Opera, and it definitely doesn't "destroy" it. It doesn't "destroy" really any browser, for that matter. IMO, it comes alongside the average browser. Opera browses faster, runs faster, and has better support for HTML5 and CSS3. The IE Javascript engine is "unique", indeed. I suspect this won't be the last time IE's behavior will catch your eye as you learn JS, Fargone.
Link to comment
Share on other sites

For the other suggestion, you mentoined setting "theTimer = setTimeout(scrollTable,80)'. Is this different then what I have in my code? In my code I wrote "theTimer = setTimeout("scrollTable()",80)". Are these two lines of code different?
Yes, they are.
setTimeout("scrollTable()",80)

means that after the timeout, the string will be evaluated and only at that point the function to be called will be determined.

setTimeout(scrollTable,80)

means that after the timeout, the function scrollTable will be executed. No need for JavaScript to evaluate code after the timeout - the function to call after the timeout will be known at the point the timeout is set.

Link to comment
Share on other sites

The point is, transforming a string into executable code slows down the process. This can be trivial if it doesn't happen a lot, but it can cause noticeable delays if that piece of code is iterated enough times. Say you need to add a hundred new divs to the DOM (like a 10x10 data grid). The slowdown might cause some flicker if the code had to be evaluated for each addition.For this reason, experienced developers are in the habit of not evaluating strings of code. There's kind of an attitude in there, too. Noobs are instantly recognizable when, for example, they put onclick handlers inside element tags.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...