[jquery] javascript sneller dom-manipulatie trucks

[Garma]

Hoi,

Ik heb een applicatie gemaakt en het begint allemaal (nogal onacceptabel) traag te worden, zelfs in firefox, en ik kan wel wat tips gebruiken want ik heb niet het idee dat het aan de performance van mijn eigen code is. Met name de jquery animate-functies hebben er erg onder te lijden.

Eerst een paar vragen vooraf. Ik gebruik veelvuldig jquery om de juiste dom-elementen te zoeken. Het lijkt er op dat hoe meer elementen er in de dom zitten, hoe trager het allemaal wordt
-> hangt de traagheid af van de hoeveelheid elementen met een ID of maakt dat niet uit?
-> klopt het dat jQuery elke call de complete dom moet doorzoeken?

Nu de performance winst. Ik moet vaak dezelfde elementen zoeken, en zo heel veel zijn dat er nu ook weer niet, dus ik zou graag in een array references bijhouden van deze elementen, dat scheelt opzoeken. Echter:

JavaScript:

array["element1"] = $("#id");

wat betekend dit precies? Wordt nu het hele dom-element gekopieerd of alleen een reference naar dat element?

graag wat meer achtergrond info hierover, goeie links zijn natuurlijk ook goed.

[Tharulerz]

Je kan misschien er eens bijzetten wat je zelf al gezocht hebt...

Deze link geeft een vrij goed antwoord op je vraag:
http://www.stevekallestad.com/blog/javascript_pointers.html

[Garma]

Tharulerz schreef op donderdag 05 november 2009 @ 21:44:
Je kan misschien er eens bijzetten wat je zelf al gezocht hebt...

Deze link geeft een vrij goed antwoord op je vraag:
http://www.stevekallestad.com/blog/javascript_pointers.html

ik had gezocht, maar niets zinnigs gevonden... anders vraag ik het niet he

en je link geeft geen antwoord op mijn vraag, die gaat alleen over objecten en function pointers en volgens mij worden DOM objecten anders behandeld (de .html() functie van jquery 'verplaatst' een element namelijk). Je had ook zelf de link die je in 2 sec gegoogled hebt even kunnen lezen voor je m hier post. Mijn vraag is wat gebeurd er precies in dat stukje javascript boven.

[ Voor 11% gewijzigd door Garma op 05-11-2009 22:37 ]

[UltimateB]

Probeer eens

JavaScript:

array["element1"] = $("#id");
$("#id").test = 'Hi i changed';
alert(array["element1"].test);

Dan zie je of het een referntie is

[Garma]

dank je. Inderdaad lijkt dit om een reference te gaan (de tekst veranderd inderdaad) maar ik wil eigenlijk zeker weten dat dit performance-wise wel echt uit maakt voordat ik mn complete code-base ga aanpassen. wordt nou "$("element")" opgeslagen of echt een memory-pointer naar dat element?

Ik las namelijk hier:
http://blogs.msdn.com/ie/archive/2006/08/28/728654.aspx

dat het goed zou zijn om function pointers te cachen. dat zou beteken dat elke keer dat je een function aanroept, hij weer overnieuw opgezocht moet worden en dat het dus geen memory address is... wat wel echt raar is trouwens

[--MeAngry--]

Elke CSS selector die je aan jQuery geeft wordt afzonderlijk opgezocht. Zelfs als je 2 keer dezelfde string geeft. Het opslaan van referenties naar die elementen moet je dus zelf verzorgen, en dat gaat zeker veel helpen.

Zorg verder inderdaad dat je niet onnodig veel elementen gebruikt, maar ga ook niet te vaak hetzelfde element voor allerlei verschillende doelen misbruiken. Maak daar goede afwegingen, en test het uit, dat kan alleen jijzelf.

Functiepointers opslaan heeft trouwens voor IE inderdaad wel nut, het staat niet voor niets op MSDN. Echte browsers hebben dat soort suboptimalisaties niet zo hard nodig gelukkig.

[ Voor 17% gewijzigd door --MeAngry-- op 05-11-2009 22:50 ]

[Garma]

--MeAngry-- schreef op donderdag 05 november 2009 @ 22:49:
Functiepointers opslaan heeft trouwens voor IE inderdaad wel nut, het staat niet voor niets op MSDN. Echte browsers hebben dat soort suboptimalisaties niet zo hard nodig gelukkig.

ok de vraag was niet of het zin heeft maar de relatie tot de vraag mbt de array. En helaas gebruikt 80% van de internetters nog steeds 'geen echte browser' zoals jij het zegt.

een andere reden dat ik nog wantrouwig ben is dit:

Dit:

JavaScript:

    var anim_el = el.parent().find(".filled");
    anim_el.stop().animate({ width: perc+"%"}, 500 );

en dit:

JavaScript:

    el.parent().find(".filled").stop().animate({ width: perc+"%"}, 500 );

maakt qua performance niets uit (momenteel allebei slecht), en als er veel minder elementen in de dom zitten, geeft dit wel goede performance. "el" is een div-element dat verkregen is door een rollover overigens.

waarom is dat?? anim_el is toch een referentie, volgens de theorie boven? Dan is er toch nergens DOM-opzoekactiviteit? De hoeveelheid elementen in de DOM zou dus niets uit moeten maken

EDIT nog iets meer research gedaan... Firebug geeft aan dat het jquery is dat iets ingewikkelds aan doen is en daar nogal lang over doet.. in de tussentijd heb ik een paar dingen anders gedaan waardoor ik nu een stuk minder table cells nodig heb, dit helpt voorlopig maar ik weet eigenlijk wel zeker dat ik binnenkort weer hetzelfde probleem heb..

[ Voor 15% gewijzigd door Garma op 06-11-2009 00:16 ]