Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    faster createElement() "Advanced"

    Last edited by DTD13; 12-04-2009 at 12:22 AM.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,444
    Thanks
    11
    Thanked 598 Times in 578 Posts
    you can make one and cloneNode(true) it, but you would still need to re-bind the events.

    you can shorter syntax:
    Code:
      if(mOver){thisNDiv.onmouseover=mOver}
    could be
    Code:
      thisNDiv.onmouseover=mOver;
    (an empty onmouseover property won't hurt anything)
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    I don't think the ifs are especially slow.

    You could pass attributes as the {name:value}s of an object and loop through it-
    this example will either create a new element or edit an existing one.

    Code:
    document.make= function(what, pa, atts){
    	if(what) what= document.createElement(what);
    	else what= pa;
    	var tem;
    	if(atts){
    		for(var p in atts){
    			tem= atts[p];
    			switch(p){
    				case 'style': 
    				for(var c in tem){
    					what.style[c]= tem[c];
    				}
    				break;
    				case  'text': 
    				what.appendChild(document.createTextNode(tem));
    				break;
    				default: what[p]= tem;
    			}
    		}
    	}
    	if(pa && what!= pa) pa.appendChild(what);
    	return what;
    }
    Last edited by mrhoo; 12-02-2009 at 08:08 PM.

  • #4
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Last edited by DTD13; 12-04-2009 at 12:22 AM.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,444
    Thanks
    11
    Thanked 598 Times in 578 Posts
    Quote Originally Posted by DTD13 View Post
    Hmmmm, no I don't want to change to a switch case. I dont want to create uneeded attributes either, which is why I was using (if)s. I use this function alot to add new elements into a very dynamic animation and was hoping for something considerably faster.

    Any other ideas? I am trying to minimize string manipulation and object creation processing. I am in heavy optimization mode.

    cloneNode'ing a template element didn't help?
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #6
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Last edited by DTD13; 12-04-2009 at 12:21 AM.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,444
    Thanks
    11
    Thanked 598 Times in 578 Posts
    Quote Originally Posted by DTD13 View Post
    no it didn't...and I have to change so many of the existing property types that it is about the same, maybe a little slower.

    It's (create with properties) VS. (clone and change properties). Some properties wont be there at all on the cloned elements, some will be different. The extra to remove unwanted cloned properties is killing its speed.
    build a cached cloner, or clone the closest existing match rather than starting from scratch.

    i've also see something i couldn't believe (at the time) worked; using an element as a generic object's .prototype to inherit default props to that object. might try something silly like that.

    avoid manipulating dom properties at all costs.
    if something is very complicated and you need lots of clones, it MIGHT be quicker to string-build and realize the actual elms via .innerHTML on a wrapper.

    i would be willing to bet $0.50 or so that parsing 10,000 attrib-loaded elms via .innerHTML is faster than createElemement, but that's just a hunch...
    Last edited by rnd me; 12-02-2009 at 08:39 PM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • Users who have thanked rnd me for this post:

    oesxyl (12-02-2009)

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    No. Forgive me DTD13, but the hat you try to wear is too big for you at the moment. Probably too big for any of us, at the moment. It is not your fault, it is the long list of differences between browsers which makes a cross-browser universal function quite difficult.

    The first mistake is that you use innerHTML (which is not a standard DOM method) along with DOM method createElement(). If your argument mHtml bears a HTML code like a TABLE or TABLE's element (row, cell, ...) you will encounter an error. Microsoft warns that innerHTML is a read only method in case of a long list of tags. TABLE, TBODY, TR, TD, along with many others.

    If you want only to insert text, then use createTextNode() method. It is crossbrowser.

    Another one: cssText - it is read only in Mozilla. You need a crossbrowser workaround

    What about other attributes which doucment's elements might need, other than CSS is able to create. What about readOnly (where IE needs that camel case), what about colSpan, disabled, what about a distinction between CSS and HTML attributes?

    How do you expect to send a certain function via the mOut, mOver, mDwn arguments? As strings? Are you to use the clumsy eval() to restore the true meaning of those strings? With what cost? And have you an idea of how many event are there in JavaScript? Are you to use m+smt for some dozens of possible events?

    No way, Sir, at least not on the way you have chosen. At least don't try to create an universal function. Be modest. Make 2 or 3 different functions: one to create (+- append) the elements, one to set the attributes (but make a distinction between CSS and HTML attributes) and one to attach the events (IE and Moz have different models to attach the events).

    Still you will have some other bugs or strange behaviours to bypass. Good luck!

    And this is only the visible top of the differences' iceberg
    Last edited by Kor; 12-02-2009 at 08:58 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    oesxyl (12-02-2009)

  • #9
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    Its not creatElement that is slow, it is when you append the element to the document,
    or change the display on the page with a style or class name change, or write new content to it.

    With either innerHTML or create element, the best outcome would be from assembling
    as much as possible outside the document tree, either in a documentFragment or
    an html string, and add them all at once.

    At a minimum, don't add your spans and then apply changes to them, add them when they are complete.
    Last edited by mrhoo; 12-02-2009 at 08:57 PM.

  • Users who have thanked mrhoo for this post:

    oesxyl (12-02-2009)

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Last edited by DTD13; 12-04-2009 at 12:22 AM.

  • #11
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Last edited by DTD13; 12-04-2009 at 12:21 AM.

  • #12
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by DTD13 View Post

    My method assumes that I can create any element with any property that I want.
    I doubt. Try creating a cell with a colspan attribute and append it to a table. Furthermore, give it an id and try to change it afterward (in IE).

    Or, try to create an INPUT element and try to give it a name attribute. Try to submit data from that INPUT (in IE). You will encounter a surprise. IE is not able to create the name attribute for new created elements, at least not in a standard DOM way.

    Son, there are about another million of tricks/bugs/errors you have to find out and by pass
    Last edited by Kor; 12-02-2009 at 09:33 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #13
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Last edited by DTD13; 12-04-2009 at 12:21 AM.

  • #14
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,444
    Thanks
    11
    Thanked 598 Times in 578 Posts
    Quote Originally Posted by DTD13 View Post
    Anything wrong with that code Kor? Oh yes, no "world.get@assHolesByTagName()" exists. Such a large scope is prolly why and so many @assHoles. Perhaps some optimization techniques?

    If Kor is so bad, why lower yourself to his level?

    Not to be as rude as your last post, but I don't see 10 years of experiance reflected by your posts, (an 11-argument function???), but i'll give you the benefit of the doubt since it doesn't really matter.

    In general, you may be Brendan Eich's personal mentor, but around here, expect to be judged by your thread/thank count, for better or for worse.
    As far as Kor or I can tell, you're just a noob until proven otherwise.

    BTW: you are almost assuredly wasting time by optimizing strings.
    your app is bottle-necked by the DOM, not by native javascript operations...

    It's not a scope problem, it's an in-dom vs off-dom issue.
    Do as much as possible before inserting/appending, since in-tree node operations are slow.


    Be kind; everyone you meet is fighting a hard battle.
    Last edited by rnd me; 12-03-2009 at 12:05 AM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • Users who have thanked rnd me for this post:

    oesxyl (12-03-2009)

  • #15
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Last edited by DTD13; 12-04-2009 at 12:21 AM.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •