No ideas?
On Jun 11, 11:01 am, Gordon <[EMAIL PROTECTED]> wrote:
> I am currently working through a script that at the moment works just
> fine but where there are some performance bottlenecks that I am trying
> to reduce. It works with acceptible speed when dealing with 40 or so
> elements but in practice the system could be dealing with hundreds so
> every ms I can scrape off the execution time will help.
>
> There are two sections I am focusing on in particular. One is my
> initialization function, the other is part of a loop which processes
> elements based on the value of fields contained within.
>
> The loop has the highest optimization priority so I'll start with
> that. Here is my code (with some details missing)
>
> self.handleRange = function (rule)
> {
> if (!(minVal = parseInt ($(rule.minField).val (), 10)))
> {minVal =
> 0};
> if (!(maxVal = parseInt ($(rule.maxField).val (), 10)))
> {maxVal =
> 0x7FFFFFFF};
>
> //console.log (self.containerItems.not
> ('.fxUnSelected').length);
> self.containerItems.each (function ()
> {
> // This line needs optimizing!
> thisVal = parseInt ($(rule.valField, this).val (),
> 10);
> if ((thisVal < minVal) || (thisVal > maxVal))
> {
> // do stuff
> }
> });
> };
>
> self.containerItems is a jQuery selector I run at initialization so I
> don't have to keep reselecting all the items I want to work with.
>
> I wanted to rewrite the function as follows:
>
> self.handleRange = function (rule)
> {
> valFields = $(rule.valField);
> if (!(minVal = parseInt ($(rule.minField).val (), 10)))
> {minVal =
> 0};
> if (!(maxVal = parseInt ($(rule.maxField).val (), 10)))
> {maxVal =
> 0x7FFFFFFF};
>
> self.containerItems.each (function ()
> {
> // This line doesn't work!
> thisVal = parseInt (valFields.filter (this).val (),
> 10);
> if ((thisVal < minVal) || (thisVal > maxVal))
> {
> // do stuff
> }
> });
> };
>
> in my experience I have found that filtering out elements I'm not
> interested in from a selection I have already made is considerably
> faster than running a new selector to get the elements I want. My
> intent here was to grab all the fields which match the selector
> specified in the rule passed to the function (say, '.priceval' for
> example) and then in the loop select only the one that was relevent
> with this. Unfortunately, this doesn't seem to work.
>
> If anyone knows what I am doing wrong here I'd appreciate a pointer to
> get me going in the right direction.
>
> The other optimization I need is in initialization. My suspicion here
> is that copious use of parseInt is slowing this function down
> significantly.
>
> self.computeGridCols = function ()
> // Calculate number of columns needed
> {
> return (self.colCount = Math.floor (container.width () /
> self.itemWidth));
> };
> self.computeGridRows = function ()
> // Calculate numer of rows needed
> {
> return (self.rowCount = Math.floor (container.height () /
> self.itemHeight));
> };
> self.initGrid = function ()
> // Compute a grid layout for movement effects
> {
> // Container dimensions
> self.containerWidth = container.width ();
> self.containerHeight = container.height ();
> // container padding
> self.containerPadX = parseInt (container.css
> ('padding-left'), 10);
> self.containerPadY = parseInt (container.css
> ('padding-top'), 10);
> // All CSS attributes that affect how much space an item
> takes up
> self.itemPadX = (
> parseInt (self.containerItems.css
> ('border-left-width'), 10)
> + parseInt (self.containerItems.css
> ('border-right-width'), 10)
> + parseInt (self.containerItems.css ('margin-left'),
> 10)
> + parseInt (self.containerItems.css ('margin-right'),
> 10)
> + parseInt (self.containerItems.css ('padding-left'),
> 10)
> + parseInt (self.containerItems.css
> ('padding-right'), 10)
> );
> self.itemPadY = (
> parseInt (self.containerItems.css
> ('border-top-width'), 10)
> + parseInt (self.containerItems.css
> ('border-bottom-width'), 10)
> + parseInt (self.containerItems.css ('margin-top'),
> 10)
> + parseInt (self.containerItems.css
> ('margin-bottom'), 10)
> + parseInt (self.containerItems.css ('padding-top'),
> 10)
> + parseInt (self.containerItems.css
> ('padding-bottom'), 10)
> );
> // Item dimensions
> self.itemStartWidth = self.itemWidth =
> self.containerItems.width ()
> + self.itemPadX;
> self.itemStartHeight = self.itemHeight =
> self.containerItems.height
> () + self.itemPadY;
> // Column and row counts
> self.colStartCount = self.computeGridCols ();
> self.rowStartCount = self.computeGridRows ();
> };
>
> ParseInt seems to be the only reliable way of grabbign the CSS values
> I need, and as the designer hasn't finialized the page layout yet and
> might do any thing with the margin, border and padding values they all
> have to be checked individually. If anyone knows of improvements I
> can make here I'd appreciate the feedback.
