Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #15384 > unrolled thread

How to improve performance growing this <li>

Back to article view | Back to comp.lang.javascript

Contents

  How to improve performance growing this <li> "Richard Maher" <maher_rj@hotspamnotmail.com> - 2012-08-17 17:41 +0800
    Re: How to improve performance growing this <li> "Richard Maher" <maher_rj@hotspamnotmail.com> - 2012-08-17 17:43 +0800
      Re: How to improve performance growing this <li> Dr.Kral@nyc.rr.com - 2012-08-17 07:27 -0400
        Re: How to improve performance growing this <li> "Richard Maher" <maher_rj@hotspamnotmail.com> - 2012-08-18 06:18 +0800
        Re: How to improve performance growing this <li> Denis McMahon <denismfmcmahon@gmail.com> - 2012-08-17 23:16 +0000
          Re: How to improve performance growing this <li> Denis McMahon <denismfmcmahon@gmail.com> - 2012-08-18 00:33 +0000
            Re: How to improve performance growing this <li> Denis McMahon <denismfmcmahon@gmail.com> - 2012-08-18 11:05 +0000
              Re: How to improve performance growing this <li> SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-08-18 16:57 +0200
                Re: How to improve performance growing this <li> Denis McMahon <denismfmcmahon@gmail.com> - 2012-08-18 16:23 +0000
                  Re: How to improve performance growing this <li> Dr J R Stockton <reply1233@merlyn.demon.co.uk.invalid> - 2012-08-19 20:16 +0100
                  Re: How to improve performance growing this <li> SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-08-20 12:29 +0200
                    Re: How to improve performance growing this <li> Dr J R Stockton <reply1234@merlyn.demon.co.uk.invalid> - 2012-08-21 20:44 +0100

#15384 — How to improve performance growing this <li>

Hi,

I'm trying to grow/extend a list <li> using the DOM routines and it performs 
badly. Once your over 100 rows performance degrades and 3000 rows on IE8 
takes 40secs to render and FF just under 10secs. (Yes 3000 is a lot but with 
the scroll-bar on the <div> it is still useful to the user and even if I set 
a max limit on result-set rows I'd still like to improve performance!)

 The data comes from disk, over the network, and de-JSONed in under a second 
so I'd really like to improve/reduce the browser-time.

Please see the code below. Is some form of innerHTML quicker? Build the list 
outside the <div> first? Some LIelement insertNodeChild methods that I don't 
know about?
    var getLOV =        function () {            var lovVintage = 
++currVintage;            var rowCnt = 0;            targetDiv.style.height 
= "0px";            targetDiv.style.visibility = "hidden";            return 
function (rowKey, rowData) {                if (lovVintage != currVintage) 
return;                 var listItem = document.createElement("li"); 
var listData = document.createTextNode(rowData.rTrim()); 
listItem.appendChild(listData);                listItem._key = rowKey; 
suggestList.appendChild(listItem);                rowCnt++; 
if (rowCnt == 1) {                    targetDiv.style.height = "auto"; 
targetDiv.style.visibility = "visible";                }                 if 
(rowCnt == lovMax)                    targetDiv.style.height = 
targetDiv.clientHeight + "px";                 if (targetDiv.clientWidth < 
targetDiv.scrollWidth)                    targetDiv.style.width = 
(targetDiv.scrollWidth                                           + 
(targetDiv.scrollWidth - targetDiv.clientWidth)) + 
          }        }  Cheers Richard Maher 

[toc] | [next] | [standalone]

#15385

Hope this formats better: -

    var getLOV =        function () {            var lovVintage = 
++currVintage;            var rowCnt = 0;            targetDiv.style.height 
= "0px";            targetDiv.style.visibility = "hidden";            return 
function (rowKey, rowData) {                if (lovVintage != currVintage) 
return;                 var listItem = document.createElement("li"); 
var listData = document.createTextNode(rowData.rTrim()); 
listItem.appendChild(listData);                listItem._key = rowKey; 
suggestList.appendChild(listItem);                rowCnt++; 
if (rowCnt == 1) {                    targetDiv.style.height = "auto"; 
targetDiv.style.visibility = "visible";                }                 if 
(rowCnt == lovMax)                    targetDiv.style.height = 
targetDiv.clientHeight + "px";                 if (targetDiv.clientWidth < 
targetDiv.scrollWidth)                    targetDiv.style.width = 
(targetDiv.scrollWidth                                           + 
(targetDiv.scrollWidth - targetDiv.clientWidth)) + 
          }        }

[toc] | [prev] | [next] | [standalone]

#15386

On Fri, 17 Aug 2012 17:43:13 +0800, "Richard Maher"
<maher_rj@hotspamnotmail.com> wrote in <k0l3nh$qhe$1@speranza.aioe.org>:

>Hope this formats better: -
It didn't

On Fri, 17 Aug 2012 17:41:15 +0800, "Richard Maher"
<maher_rj@hotspamnotmail.com> wrote in <k0l3jr$qbu$1@speranza.aioe.org>:

>Hi,
>
>I'm trying to grow/extend a list <li> using the DOM routines and it performs 
>badly. Once your over 100 rows performance degrades and 3000 rows on IE8 
>takes 40secs to render and FF just under 10secs. (Yes 3000 is a lot but with 
>the scroll-bar on the <div> it is still useful to the user and even if I set 
>a max limit on result-set rows I'd still like to improve performance!)

Without knowing internal details of how things are rendered I will suggest
that each time you add an element the page is re-rendered.  If this is the
case, then the time would go up faster than the square of the number of
elements added.  There is a similar sort of behavior with some string
operations that effectively have to copy the entire string thus taking a
long time.

If this hypothesis is correct, then you want to find a way to add many
items at one time.  Perhaps just changing the innerHTML of the division?

HTH

[toc] | [prev] | [next] | [standalone]

#15387

<Dr.Kral@nyc.rr.com> wrote in message
news:afas28dkk284q30s2gh9tacq25ptjjo9pu@4ax.com...
> On Fri, 17 Aug 2012 17:43:13 +0800, "Richard Maher"
> <maher_rj@hotspamnotmail.com> wrote in <k0l3nh$qhe$1@speranza.aioe.org>:
>
>>Hope this formats better: -
> It didn't

Hopefully this time?

>
> On Fri, 17 Aug 2012 17:41:15 +0800, "Richard Maher"
> <maher_rj@hotspamnotmail.com> wrote in <k0l3jr$qbu$1@speranza.aioe.org>:
>
>>Hi,
>>
>>I'm trying to grow/extend a list <li> using the DOM routines and it
>>performs
>>badly. Once your over 100 rows performance degrades and 3000 rows on IE8
>>takes 40secs to render and FF just under 10secs. (Yes 3000 is a lot but
>>with
>>the scroll-bar on the <div> it is still useful to the user and even if I
>>set
>>a max limit on result-set rows I'd still like to improve performance!)
>
> Without knowing internal details of how things are rendered I will suggest
> that each time you add an element the page is re-rendered.  If this is the
> case, then the time would go up faster than the square of the number of
> elements added.  There is a similar sort of behavior with some string
> operations that effectively have to copy the entire string thus taking a
> long time.
>
> If this hypothesis is correct, then you want to find a way to add many
> items at one time.  Perhaps just changing the innerHTML of the division?
>
> HTH

Thanks for the reply.

The problem I have with innerHTML is how to add my "_key" property to each 
<li> as in "listItem._key = rowKey;" below. (Also I thought it might be 
useful for the user to see the scrollbar grow (shrink) in the <div> but that 
does not seem to be observable anyway)


var getLOV =
        function () {
            var lovVintage = ++currVintage;
            var rowCnt = 0;
            targetDiv.style.height = "0px";
            targetDiv.style.visibility = "hidden";
            return function (rowKey, rowData) {
                if (lovVintage != currVintage)
                    return;

                var listItem = document.createElement("li");
                var listData = document.createTextNode(rowData.rTrim());

                listItem.appendChild(listData);
                listItem._key = rowKey;

                suggestList.appendChild(listItem);
                rowCnt++;

                if (rowCnt == 1) {
                    targetDiv.style.height = "auto";
                    targetDiv.style.visibility = "visible";
                }

                if (rowCnt == lovMax)
                    targetDiv.style.height = targetDiv.clientHeight + "px";

                if (targetDiv.clientWidth < targetDiv.scrollWidth)
                    targetDiv.style.width = (targetDiv.scrollWidth
                                           + (targetDiv.scrollWidth - 
targetDiv.clientWidth)) + "px";
            }
        }

[toc] | [prev] | [next] | [standalone]

#15394

On Fri, 17 Aug 2012 07:27:04 -0400, Dr.Kral wrote:

> If this hypothesis is correct, then you want to find a way to add many
> items at one time.  Perhaps just changing the innerHTML of the division?

How about (untested):

var oldList = document.getElementById( "listid" );
var newList = oldList.cloneNode( true );

for ( newItemText in textArray ) {
   newLi = document.createNode("li");
   newLiText = docuemnt.createTextNode( newItemText );
   newLi.appendChild( newLiText );
   newList.appendChild( newLi );
}

oldList.parentNode.replaceChild( oldList, newList );

Would this only re-render once when the list was replaced?

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#15395

On Fri, 17 Aug 2012 23:16:06 +0000, Denis McMahon wrote:

>    newLiText = docuemnt.createTextNode( newItemText );

Yes, I mis-spelt document.

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#15411

On Sat, 18 Aug 2012 00:33:02 +0000, Denis McMahon wrote:

> On Fri, 17 Aug 2012 23:16:06 +0000, Denis McMahon wrote:
> 
>>    newLiText = docuemnt.createTextNode( newItemText );
> 
> Yes, I mis-spelt document.

After testing and some tweaks, working code (firefox anyway) here:

<http://www.sined.co.uk/tmp/jslist.htm>

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#15414

Le 18/08/12 13:05, Denis McMahon a écrit :
>
> After testing and some tweaks, working code (firefox anyway) here:

Ha! enfin !
not more M$ only :-(
with now a "normal" DOM :
	newLi = document.createElement( "li" )
instead of :
	newLi = document.createNode("li");

> <http://www.sined.co.uk/tmp/jslist.htm>

I don't know if it would run faster with :
	newLi.innerHTML = "Item " + i + " text";
instead of :
	newLiText = document.createTextNode( "Item " + i + " text" );
	newLi.appendChild( newLiText );
Tested,
- better with createTextNode solution for my Firefox and Chrome
- indifferent with my Opera

-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#15424

On Sat, 18 Aug 2012 16:57:39 +0200, SAM wrote:

> I don't know if it would run faster with :
> 	newLi.innerHTML = "Item " + i + " text";
> instead of :

I believe that the use of innerHTML may be either recommended against, 
frowned upon by some, deprecated or some other flavour of "not best 
practice" in some quarters because you can break the dom by introducing 
bad markup with it. Or is that innerText?

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#15456

In comp.lang.javascript message <k0ofit$8ob$1@dont-email.me>, Sat, 18
Aug 2012 16:23:57, Denis McMahon <denismfmcmahon@gmail.com> posted:

>On Sat, 18 Aug 2012 16:57:39 +0200, SAM wrote:
>
>> I don't know if it would run faster with :
>>      newLi.innerHTML = "Item " + i + " text";
>> instead of :
>
>I believe that the use of innerHTML may be either recommended against,
>frowned upon by some, deprecated or some other flavour of "not best
>practice" in some quarters because you can break the dom by introducing
>bad markup with it. Or is that innerText?

The answer to that is to have a policy of only introducing correct
markup.  A RegExp replace on body.innerHTML can work wonders.

-- 
 (c) John Stockton, nr London, UK.  For Mail, see Home Page.  Turnpike, WinXP.
 Web  <http://www.merlyn.demon.co.uk/> - FAQ-type topics, acronyms, and links.
 Command-prompt MiniTrue is useful for viewing/searching/altering files. Free,
 DOS/Win/UNIX now 2.0.6; see <URL:http://www.merlyn.demon.co.uk/pc-links.htm>.

[toc] | [prev] | [next] | [standalone]

#15460

Le 18/08/12 18:23, Denis McMahon a écrit :
> On Sat, 18 Aug 2012 16:57:39 +0200, SAM wrote:
>
>> I don't know if it would run faster with :
>> 	newLi.innerHTML = "Item " + i + " text";
>> instead of :
>
> I believe that the use of innerHTML may be either recommended against,
> frowned upon by some, deprecated or some other flavour of "not best
> practice" in some quarters because you can break the dom by introducing
> bad markup with it.

Yeap (*)

I think it can be used to add some html code ... if ... there is no 
attribute in tags
I hope this is not sensitive to simple text (textNode)

> Or is that innerText?

Is innerText understood by any navigator ? Isn't it M$ slang ?


(*) for tests :
http://stephane.moriaux.pagesperso-orange.fr/truc/innerHTML_danger
http://stephane.moriaux.pagesperso-orange.fr/truc/innerHTML_danger.en

-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#15484

In comp.lang.javascript message <50321193$0$6182$ba4acef3@reader.news.or
ange.fr>, Mon, 20 Aug 2012 12:29:38, SAM <stephanemoriaux.NoAdmin@wanado
o.fr.invalid> posted:

>I think it can be used to add some html code ... if ... there is no
>attribute in tags

I use
        var Esay = document.getElementById("essai")
        Esay.innerHTML = Esay.innerHTML.
          replace(/##(\w['~]?)?(\d)?([\.,; ]*)?/g, Func)

to replace about 500 instances of ##  with a span element, containing
other tags, returned by Func.

<http://www.merlyn.demon.co.uk/p231-jax.htm> is a test subset.  You
might like to read the originals at Gallica or Liege.

-- 
 (c) John Stockton, nr London, UK.    ?@merlyn.demon.co.uk     Turnpike v6.05.
 Website  <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
 PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
 Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web