DTD13

11-30-2009, 08:59 PM

Ok, I have some extensive animation going on in this script. I have all the behavior I want out of this script. A 3D carousel interface, each window in the carousel is a separate UI window. It uses active scrolling for navs and content...like (iphone).

The problem is that I have optimized to my best and still cant gain any performance out of IE. It runs pretty fast in FF, and in Safari. I have reversed loops, I have vared all my Math, I have stripped equations, could do more I guess, and I have made attempts at preventing even bubbling. I have minimized the use of <img> tags as well. I have even cached most methods and use a constructor method to create new HTML elements.

At this point I am starting to feel like I am getting into techniques and areas of JS I just don't understand well.

Here is example of a method I would like to optimize:

this.anim = function () {

var s = Math.sin(s3D.A * .01);

var c = Math.cos(s3D.A * .01);

var xs = Math.round((s * this.x) + (c * this.z));

var zs = Math.round((s * this.z) - (c * this.x));

var ysSpeed = Math.round((s3D.Y - this.ys) / (s3D.speed * .1));

this.ys += ysSpeed;

var D = nw / (nw + zs);

var w = Math.round(D * (nw * s3D.zOOm));

var h = Math.round(w * s3D.HW);

var Zac = Math.round(this.Z * nw * this.ac);

var Zas = Math.round((this.Z * nw) * this.as);

var calcOTop = px(Math.round(nh * .5 + this.ys * D - (h * .5)));

var calcOtcTop = px(Math.round((h * .1 *D) - (w * .550)));

var calcOleft = px(Math.round(nw * .5 + xs * D - (w * .5)));

var calcOzindex = Math.round(D * 9);

var pxW = px(w);

var pxH = px(h);

var barHeight = px(Math.round(h * .2));

var barFontSize = px(Math.round(.031 * w));

var otvHeight = px(Math.round(h * .091));

var oMenuHeight = "90%";

var calcOMenuLeft = px(Math.round(w * .1 *D -(w *.480)));

var centerOtop = px(Math.round(nh * .4 + this.ys));

var centerOleft = "50%";

var floatLogotop = px(Math.round((nh * .68) + (this.ys + 20)));

var floatLogoleft = "50%";

if(this.Z > .4 && this.dZ || this.pZ > 0){

var s3Dspeed = Math.round(s3D.A -= xs / 50);

//s3Dspeed;

}

if(this.dZ){

this.Z *= 1.01;

this.x = Zac;

this.z = Zas;

}

if(this.Z > .8 && this.dZ){

this.dZ = false;

this.pZ = s3D.temp;

fadeOpacity("closeButton1"+newNID, 0, 100, 500);

fadeOpacity("closeButton2"+newNID, 0, 100, 500);

}

if(this.dZ == false && this.Z > .4){

if(this.pZ > 0) {

this.pZ--;

} else {

this.Z *= .995;

this.x = Zac;

this.z = Zas;

}

}

Any Help? This is a fairly nasty piece of calculation. Any way to make this run faster?

The problem is that I have optimized to my best and still cant gain any performance out of IE. It runs pretty fast in FF, and in Safari. I have reversed loops, I have vared all my Math, I have stripped equations, could do more I guess, and I have made attempts at preventing even bubbling. I have minimized the use of <img> tags as well. I have even cached most methods and use a constructor method to create new HTML elements.

At this point I am starting to feel like I am getting into techniques and areas of JS I just don't understand well.

Here is example of a method I would like to optimize:

this.anim = function () {

var s = Math.sin(s3D.A * .01);

var c = Math.cos(s3D.A * .01);

var xs = Math.round((s * this.x) + (c * this.z));

var zs = Math.round((s * this.z) - (c * this.x));

var ysSpeed = Math.round((s3D.Y - this.ys) / (s3D.speed * .1));

this.ys += ysSpeed;

var D = nw / (nw + zs);

var w = Math.round(D * (nw * s3D.zOOm));

var h = Math.round(w * s3D.HW);

var Zac = Math.round(this.Z * nw * this.ac);

var Zas = Math.round((this.Z * nw) * this.as);

var calcOTop = px(Math.round(nh * .5 + this.ys * D - (h * .5)));

var calcOtcTop = px(Math.round((h * .1 *D) - (w * .550)));

var calcOleft = px(Math.round(nw * .5 + xs * D - (w * .5)));

var calcOzindex = Math.round(D * 9);

var pxW = px(w);

var pxH = px(h);

var barHeight = px(Math.round(h * .2));

var barFontSize = px(Math.round(.031 * w));

var otvHeight = px(Math.round(h * .091));

var oMenuHeight = "90%";

var calcOMenuLeft = px(Math.round(w * .1 *D -(w *.480)));

var centerOtop = px(Math.round(nh * .4 + this.ys));

var centerOleft = "50%";

var floatLogotop = px(Math.round((nh * .68) + (this.ys + 20)));

var floatLogoleft = "50%";

if(this.Z > .4 && this.dZ || this.pZ > 0){

var s3Dspeed = Math.round(s3D.A -= xs / 50);

//s3Dspeed;

}

if(this.dZ){

this.Z *= 1.01;

this.x = Zac;

this.z = Zas;

}

if(this.Z > .8 && this.dZ){

this.dZ = false;

this.pZ = s3D.temp;

fadeOpacity("closeButton1"+newNID, 0, 100, 500);

fadeOpacity("closeButton2"+newNID, 0, 100, 500);

}

if(this.dZ == false && this.Z > .4){

if(this.pZ > 0) {

this.pZ--;

} else {

this.Z *= .995;

this.x = Zac;

this.z = Zas;

}

}

Any Help? This is a fairly nasty piece of calculation. Any way to make this run faster?