6

Edit: It's not a duplicate of "Fastest DOM insertion" because it includes the event listeners variable too. Anyway I will edit the question.

I would to know some things if someone already discovered.

I would like to know which is the fastest way to add an element in javascript and to be compatible with ie6+, chrome10+, firefox2+.

Fastest technique to:

  1. Add a single element
  2. Add 100 elements

  3. Any time curve for adding 1 element or 1000 elements

  4. The same as above but for removing an element

  5. Add/Change/Remove an inline style attribute

  6. Add event listeners like mousedown/mouseup/mouseover

  7. Is faster to add/remove some tags over others? ex: is faster to add/remove a <div> or a <p>? (In the adding mode: I think is faster <p> because it only has 1 letter vs 3 letters, and maybe because div is a container. I don't know, that's why I'm asking :D)

    1. Remove an element, save into js somehow, then re-add it and keep the event listeners working as it were before removing the element

This a big question, so if you only know some of the questions you can always share what you know ;)

thanks thanks!!

Totty.js
  • 14,070
  • 25
  • 93
  • 165
  • possible duplicate of [Fastest DOM insertion](http://stackoverflow.com/questions/634878/fastest-dom-insertion) – ajreal Sep 05 '11 at 11:24
  • Possible duplicate of [How do I remove a particular element from an array in JavaScript?](https://stackoverflow.com/questions/5767325/how-do-i-remove-a-particular-element-from-an-array-in-javascript) – TylerH Sep 18 '17 at 13:38

2 Answers2

2

1   Set the value of innerHTML on the parent element to a string containing HTML for the new elements.
2   Same as 1.
4   Set the value of innerHTML on the parent element to an empty string.
7.1   Call Node.removeChild(), save the returned Node object, and then pass the node to Node.appendChild().

clarkb86
  • 643
  • 4
  • 19
  • I have found this link and I'm courious why dom+innerHTML+fragment is faster in ie7,8,9 and dom+fragment is faster in chrome... http://andrew.hedges.name/blog/2008/04/19/innerhtml-versus-the-dom-cant-we-all-just-get-along – Totty.js Sep 05 '11 at 15:44
  • Changing the value of `innerHTML` is overwhelmingly faster than manipulating the DOM when you are inserting a large number of elements into the document. – clarkb86 Sep 05 '11 at 16:32
  • then why in those tests is not so? it should be faster, you are right, but the times are not like this.. – Totty.js Sep 06 '11 at 08:43
  • did you try replacing the default code so that it inserts a few hundred elements? I did, and it showed that replacing innerHTML was faster (using Firefox 8.0a1) – clarkb86 Sep 06 '11 at 09:37
  • of course the one with innerHTML is faster: it only uses innerHTML but the latter uses both innerHTML and DOM – Totty.js Sep 06 '11 at 09:46
0

Google/SO are your friends:

For example for question 1/2 , see Fastest DOM insertion

I think, you can search for a lot of them.

Another good place to search for performance comparison beside google/SO is to use jsperf: http://jsperf.com/browse and http://jsperf.com/popular. I'm pretty sure there are response to a lot of your question there. And if you have some questions that are unanswered, you can test them as well in the main page http://jsperf.com/.

Community
  • 1
  • 1
Py.
  • 3,379
  • 1
  • 29
  • 52