0

I'm so curious because I'm maintaining a 3d engine written in Javascript.

  1. Which is faster, parseInt(el.style.width) or el.offsetWidth?
  2. Should I write parseInt(el.offsetWidth)?
  3. Which is faster, getElementById() or childNodes[]?
  4. Which is faster, new Image() or appendChild('img')?
  5. Give me please a link to a splendid Javascript PERFORMANCE guide

Thank you!

Improve this question
4
  • 2
    My suggestion: Benchmark it yourself. Intuitively, I'd guess that el.offsetWidth is faster (because it doesn't require traversing the entire css ruleset like el.style.width does), and that childNodes[] is faster (because it doesn't require traversing the entire dom like getElementbyId does). But I don't really know, which is why I'm putting this as a comment instead of an answer. Commented Nov 20, 2010 at 14:53
  • 2
    @Ben - getElementbyId doesn't traverse the DOM. It is an in memory lookup of the element. As such is extremely fast. Commented Nov 20, 2010 at 15:02
  • Agreed with Ben, benchmark it. AFAIK el.offsetWidth is subject to be calculated at runtime. You should probably trade off some memory and cache all results. Also, i'd suggest to use canvas, because DOM is slow and memory hungry. Commented Nov 20, 2010 at 15:13
  • @patrick dw - In theory yes. IE doesn't agree with you though. :) See my answer. Commented Nov 20, 2010 at 20:20

2 Answers 2

Reset to default
4

You've got quite a bit of confusion here.

1. Which is faster, parseInt(el.style.width) or el.offsetWidth?

  • el.style.width gives you the width set by javascript or style attribute in the markup.

  • offsetWidth gives you the current width of the element (including borders).

2. Should I write parseInt(el.offsetWidth)?

No, offsetWidth returns a number. But you should specify the radix whenever you use parseInt!

3. Which is faster, getElementById() or childNodes[]?

If you got the parent use the childNodes. If you got the id, you can use byId. Performance will depend on the browser (test).

4. Which is faster, new Image() or appendChild('img')?

If you want to force the browser to download a resource, use new Image(). If you want to add an image to the layout use appendChild(IMAGE_ELEMENT)

5. Give me please a link to a splendid Javascript PERFORMANCE guide

I rather leave you with this link: http://jsperf.com/, and let you do A/B testing.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

@Hello71 - A/B testing is an experiment approach for making marketing decisions, when there are two alternatives and a single variable. In this context it refers to the methodology of deciding between two pieces of code in terms of performance.
Nice answer +1. Interesting about IE and ...ById(). Do you happen to know if it is actually traversing the DOM to get find the element? I'd be curious about its performance on a complex HTML structure. I've just always assumed it would be quick. I'll probably do some testing later on.
@patrick dw - I've updated the test at jsperf.com/childnodes-getbyid. Now it's 1000+ elements and 3 levels deep. The results are actually worse. getById is 50x slower on IE 6-7. I have no idea as to why it happens. Suprised me too, but It probably isn't just a lookup in IE. With 10000+ elements it becomes 500x difference. Seems like O(n) to me.
@glambalazs - Thanks for the updated jsperf! I sure was wrong to assume. That's insane, and really good information to know while IE6/IE7 still have a share of the market. I'm usually pretty good about caching so I don't overdo DOM selection, but sometimes I loosen up a bit when selecting by ID. Now I know better. Thanks again!
Your answer really helped me. Special thanks for link to jsperf.com
0

Here are a couple of sites regarding Javascript preformance.

Really old site..but provides some insight.

http://home.earthlink.net/~kendrasg/info/js_opt/jsOptMain.html

Reference to a book

http://oreilly.com/server-administration/excerpts/even-faster-websites/writing-efficient-javascript.html

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.