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.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Optimization For Masters

    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:

    Code:
    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?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    I assume you aren't showing all the code?

    Because you do a whole bunch of calculations that you shove into local variables and then never do anything with those variables. So I assumed that you use them later on in the code.

    So...It *may* not be the math that's the problem. It might well be the time it takes for IE to accept all those new values (e.g., barHeight, barFontSize, etc., etc.) and then redraw the display.

    You could probably test my theory by changing all those variable to just be constants and seeing how fast it runs (it won't look right, of course, but hopefully you can move something just to see it happen.

    What does your px() function do?? As many times as it is called, if IE doesn't handle it well it could be a culprit. Other things to look at would be fadeOpacity(). Maybe omit those two calls temporarily.

    But let's face it, you might just be up against the hard limits of IE.

    I don't suppose you can show this live?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    i too am having a similar problem with and the only solution i could come up with isn't really a fix but more or less a suggestion of sort use a browser detect script and make it output sum ie reference links as to why it is bad and link the viewer to a better browser i know this doesn't actually solve your problem but it is possible that your problem is unsolvable like my problem is
    woot found the avatar options...i swear they didn't exist b4

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

    Unhappy More from DTD13...

    Yes you are correct "OldD" much more but, not too much FOr the most part this script is very clean and elegant. Also, I understand about the redraw and am sure that a good bit of that is happening however, I also have tried stripping down the layers and have tested constants. Some things work, some don't.

    I have received greatest performance gains from moving the images to CSS backgrounds. I have tried event chaining so methods don't step on each other and bubble over each other (ie. FadeOpac()).

    At this point I do see some gains out of refiguring the Math. However, I am not the best at math, did not think I would ever use this Trigg in life and paid little attention to in school. The equations I am sure could be simplified. I have even seen loops that are faster at getting "sin/cos" than "Math.sin / cos" methods.

    I think these are what I am looking for. I would like to post this code but it is a high impact site, not to "toot" my own horn but it would be copied in a second before its launch. There really is nothing like it on the net right now.

    Sorry for long book again but...one last thing. I know that Adobe Flash and some other "plugin archtitectures" use a type of plugin that is written in more of a math related state for the processor. They put their animation code in these plugins. Anyone have an example of this type of programming? I have seen so much 3D anim code and trust me, most of it falls apart once a 3D model with multiple calculated points get introduced. I need this math technique.

    Anyone PLEASE?!!

  • #5
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    And this is not just another image carousel, trust me. I don't make those stupid kinds of sites. "Math Optimization Techniques"!!!

  • #6
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    "godofreality" this Delay is a function commonly used to detach animation into its own memory. This will greatly increase performance if your not already doing it. Here is an example of mine, for this script.

    Code:
      	run    : function (){
    		
    		var speed1= Math.round((xm - nw * .5 - nx) / s3D.speed);
    		var speed2= Math.round((xm - nw * .5 - nx) / 1000);
    		var speedY= Math.round(ym - nh * .5 - ny);
    		
      		///////////// main loop ////////////////////////
      	 if(spdObj==0){
      	    Aspeed = speed1;
      	    Yspeed = speedY;
      	 } else {   
    	    Aspeed = 0;
      	    Yspeed = 0;
             }
      
      	    s3D.A +=Aspeed;
      	    s3D.Y = Yspeed;
      		
      	    for(var i = 0; i < s3D.Om; i++)
      		 s3D.object[i].anim();	
      		 var runIt = setTimeout(s3D.run, .6);
      	},

  • #7
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Partial credit for that piece of code to : "Gerard Ferrandez". Great 3D developer and inspired my own 3D interfaces. His talent however, lies in image display in my opinion. I am sure I would like to see his vault of UI though. Instead of the surface candy he so commonly throws out there.

    The next level in my opinion. Enjoy : http://www.dhteumeuleu.com/

  • #8
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    using "floor" and "ceil" and "round" correctly for props is helping a little as well. For determining height and width props = "ceil". For determining top and left props = "floor". For Determining z-index = "round".

    These are helpful, and each is gaining a little more. Is there a way to reference all my vars in the above snippet as an array? THen call the values from that? Would it be any faster than the current vars?

    I keep thinking a faster way to dish out those calcs is right in front of me.

  • #9
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Pix Function :

    var px = function (x){
    return ''.concat(Math.round(x), 'px');
    }



    And this makes no difference in the speed... I tested it again after your post. At least if it does, it doesn't show any visible difference. I didn't set up a timer to cross the times though. Looking for visual difference.

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here, I will throw some more candy out there...get people reading this post and hopefully some more input on Math crunching. You know who you are, spread the love:

    Code:
    // faster pix left //
      var pxLeft = function(o){
        for(var x = -window.document.documentElement.scrollLeft; o != null; o = o.offsetParent)
        x += o.offsetLeft;
      return x;
      }
    
    // faster topPix //
      var pxTop = function(o){
       for(var y = -window.document.documentElement.scrollTop; o != null; o = o.offsetParent)
       y += o.offsetTop;
       return y;
      }
     
    // faster getElement//
      function get(el) {
       return window.document.getElementById(el);
      }
    
    
    ////find nodes by tagname to stop lengthy node hierarchy staements////
        var thisNode = function( obj, kind ) {
        var node = obj;
        //while ( node && node.nodeName != kind ) {
        if ( node && node.nodeName != kind ) {
    	 node = node.parentNode;
        } 
    	return node;
      }
    
    // bubble handler ///
      function cancelEvent(e){
       e = e ? e : window.event;
       if(e.stopPropagation)
        e.stopPropagation();
       if(e.preventDefault)
        e.preventDefault();
        e.cancelBubble = true;
        e.cancel = true;
        e.returnValue = false;
        return false;
      }

  • #11
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    "OldD" this any better ? Using vared props and inserting with ".cssText" to have a single line of props VS "object.style['prop']" or "object.property1='', object.property2=''".

    Code:
    this.anim = function () {
    
    			var s    = Math.sin(s3D.A * .01);
        			var c    = Math.cos(s3D.A * .01);
        			var xs   = Math.floor((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.ceil(D * (nw * s3D.zOOm));
        			var h    = Math.ceil(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.floor(nh * .5 + this.ys * D - (h * .5)));
      			var calcOtcTop = px(Math.floor((h * .1 *D) - (w * .550)));
      			var calcOleft = px(Math.floor(nw * .5 + xs * D - (w * .5)));
      			var calcOzindex = Math.round(D * 9);
      			var pxW = px(w);
      			var pxH = px(h);
      			var barHeight = px(Math.ceil(h * .2));
      			var barFontSize = px(Math.round(.031 * w));
      			var otvHeight = px(Math.ceil(h * .091));
      			var oMenuHeight = "90%";
      			var calcOMenuLeft = px(Math.floor(w * .1 *D -(w *.480)));
      			var centerOtop =  px(Math.floor(nh * .4 + this.ys));
      			var centerOleft =  "50%";
    			var floatLogotop =  px(Math.floor((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);
    						
    			} 
        			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;
        				}
    						
        			}
    								
    var oStyles = "width:"+pxW+";height:"+pxH+";top:"+calcOTop+";left:"+calcOleft+";overflow:hidden;z-index:"+calcOzindex+";";
    var otcStyles = "position:absolute;width:"+pxW+";height:"+barHeight+";top:"+calcOtcTop+";left:0px;background:url(images/bottomShinyBand.jpg) #000 bottom repeat-x;text-align:right;cursor:pointer;z-index:3";
    var otvStyles = "position:absolute;width:"+pxW+";height:"+barHeight+";top:"+calcOtcTop+";left:0px;background:url(images/topShinyBand.jpg)  top repeat-x;padding-top:5px;padding-left:5px;color:#ffffff;font-family:arial;font-weight:normal;font-size:"+barFontSize+";text-transform:uppercase;letter-spacing:2px;text-align:left;cursor:pointer;z-index:3";
    var topShineStyles = "position:absolute;width:"+pxW+";height:50%;top:0px;left:0px;background:url(images/topShinyBand.jpg) #000 top repeat-x;filter:alpha(opacity=70);-moz-opacity:.7;opacity:.7;z-index:0";
    var botShineStyles = "position:absolute;width:"+pxW+";height:50%;top:50%;left:0px;background:url(images/bottomShinyBand.jpg) #000 bottom repeat-x;filter:alpha(opacity=70);-moz-opacity:.7;opacity:.7;z-index:0";				
    var oMenuStyles = "position:absolute;width:20%;height:"+oMenuHeight+";top:15px;left:"+calcOMenuLeft+";padding:0px;background:transparent;overflow:hidden;cursor:pointer;z-index:0;";
    var imgeStyles = 	"position:absolute;width:100%;height:100%;top:0px;left:0px;background:transparent;text-align:right;cursor:pointer;z-index:0;";
    var centerOStyles = "width:8.2%;height:auto;top:"+centerOtop+";left:50%;margin-left:-5%;filter:alpha(opacity=90);-moz-opacity:.9;opacity:.9;z-index:9";
    var floatLogoStyles = "position:absolute;width:234px;height:131px;top:"+floatLogotop+";left:50%;margin-left:-140px;background:url(images/floatLogo.gif) transparent top no-repeat;z-index:0";		
           /////////////// HTML rendering /////////////// 		
    	this.o.cssText=oStyles;
    	this.otc.cssText=otcStyles;
    	this.oTopShine.cssText=topShineStyles;
    	this.oBotShine.cssText=botShineStyles;				
    	this.otv.cssText=otvStyles;
    	this.oMenu.cssText=oMenuStyles;
    	this.imge.cssText =imgeStyles;
    				
        		
        	  if(centerO && floatLogo){
    	    this.centerO.cssText=centerOStyles;
    	    this.floatLogo.cssText=floatLogoStyles;
              }
        				
          	}
    },

  • #12
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    another interesting tuorial on SinveWave math....perhaps I can reconstruct the sine, and get rid of "cos". The 2 calcs are canceling each other out...but If I use just one and not the other passing the "-num" into the calc.... might be the fix.

  • #13
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sine wave color maker: "phase" and "out of phase"

    http://www.krazydad.com/makecolors.php

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,919
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    Well, given the definition of px(), you could certainly get rid of *some* code:
    Code:
    	var calcOleft = px(Math.floor(nw * .5 + xs * D - (w * .5)));
    	var barHeight = px(Math.ceil(h * .2));
    	var barFontSize = px(Math.round(.031 * w));
    Since px() is
    Code:
    var px = function (x){
        return ''.concat(Math.round(x), 'px');
    }
    The call to Math.round() in there is just wasting time, since you've already ensured the "x" is an integer with the prior calls to Math.ceil(), Math.floor(), and Math.round().

    So you might want to have two different px() functions, one that includes the Math.round() for calls that haven't already ensured the argument is an integer and one that doesn't.

    That's pretty nitpicky, but you never know.

    *************

    Regarding Math.sin() and Math.cos(): Modern CPUs have sin() and cos() built in to the CPU, so the time to execute those is down at the machine level. Surely unnoticeable in the "noise" of all the string manipulation, which is *MUCH* slower.

    For example, that px() function has to convert the integer number to a string, right? So that means it has to allocate a temporary buffer where it does the conversion, just to find out how long the string is, and then copy that to another buffer of the right length, then create another buffer that is two characters longer so that it can concatenate in the "px" literal. Strings are by far the slowest thing that happens in most code like this.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    New Coder
    Join Date
    Nov 2009
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes good point and in IE I'm sure it's worse. Just wish a way existed to run the animation code faster...like a JS INTERPRETED/DLL. Interpreted DLL, that would be nice. Someone make it for...humanity.

    Thx "OldD..". Your wisdom is unending.


  •  

    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
    •