performance - Optimize jquery mobile and javascript -
im building application using phonegap , jquery mobile, , want optimize code. read place javascript faster jquery, have large impact if replace jquery code javascript? (im using both now). read should compress code, phonegap compress when building, how necessary really?
i read -webkit-transform: translate3d(0,0,0); speeds performance, should use have animations? , beneficial applications on device (not web applications)?
i removed click delay , moved scripts end of html page. other things have missed?
update
another question regarding css. im using gradient on buttons, , after read, can slow performance. below example of 1 of buttons, , question if need of attributes android , iphone on mobile application
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #ceedf5; *background-color: #ceedf5; background-image: -moz-linear-gradient(top, #f7fbfc, #ceedf5); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f7fbfc), to(#ceedf5)); background-image: -webkit-linear-gradient(top, #f7fbfc, #ceedf5); background-image: -o-linear-gradient(top, #f7fbfc, #ceedf5); background-image: linear-gradient(to bottom, #f7fbfc, #ceedf5); background-repeat: repeat-x; border-color: #ceedf5; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#f7fbfc', endcolorstr='#ceedf5', gradienttype=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false);
update 2.0 got nasty appending in jquery, , pointed out javascript 80% faster! got no idea how append in javascript, wondering if help. here common line append.
$('#yourturnlist').append('<li data-rel="close" data-icon="false" data-shadow="false" data-wrapperels="div" class="ui-btn ligame" ><img src="'+picurl+'" name="'+opponent+'" class=" circular3 opponentprofile" /> <div id="'+opponent+'" style="text-align:center; width:60%; height:100%;" class="yourturnbtn gamelist" name="'+round+'" value="'+coinearned+'"> <h3 class=" gamelistname" >'+opponent+'</h3> <br></br><p class=" gamelistother">your turn - soundy!</p><p class=" gamelistround">round: '+round+'</p></div><div id="'+imgid+'"><img class="addfriend gameimgright" name="'+opponent+'" src="cssscript/images/addfriend.png"/></div></li>');
at first: jquery built in javascript.
of course, jquery slower native js. compressing code not necessary, compress optimize loading in clients browser - don't have in phonegap projects. it's idea rewrite code if have laggs.
edit:
i've pasted working example here: http://jsfiddle.net/9dcgx/2/
var imageelement = document.createelement("img"); imageelement.setattribute("src", picurl); imageelement.setattribute("name", opponent); imageelement.setattribute("class", "circular3 opponentprofile"); /* send friend image */ var secondimageelement = document.createelement("img"); secondimageelement.setattribute("src", "http://1.bp.blogspot.com/_4dioc40imes/s--mkjpnwpi/aaaaaaaacec/xrqmocgnqum/s1600/javascript.png"); secondimageelement.setattribute("name", opponent); secondimageelement.setattribute("class", "addfriend gameimgright"); var sendafriendenclosure = document.createelement("div"); sendafriendenclosure.setattribute("id", imgid); sendafriendenclosure.appendchild(secondimageelement); var divelement = document.createelement("div"); divelement.setattribute("id", opponent); divelement.setattribute("style", "text-align:center; width:60%; height:100%;"); divelement.setattribute("class", "yourturnbtn gamelist"); divelement.setattribute("name", round); divelement.setattribute("value", coinearned); var headlineelement = document.createelement("h3"); headlineelement.setattribute("class", "gamelistname"); headlineelement.appendchild(document.createtextnode(opponent)) divelement.appendchild(headlineelement); divelement.appendchild(document.createelement("br")); var textone = document.createelement("p"); textone.setattribute("class", "gamelistother"); textone.appendchild(document.createtextnode("your turn - soundy!")); divelement.appendchild(textone); var texttwo = document.createelement("p"); texttwo.setattribute("class", "gamelistround"); texttwo.appendchild(document.createtextnode("round: "+round)); divelement.appendchild(texttwo); var listelement = document.createelement("li"); listelement.setattribute("data-rel", "close"); listelement.setattribute("data-icon", "false"); listelement.setattribute("data-shadow", "false"); listelement.setattribute("data-wrapperels", "div"); listelement.setattribute("class", "ui-btn ligame"); listelement.appendchild(imageelement); listelement.appendchild(divelement); listelement.appendchild(sendafriendenclosure);
Comments
Post a Comment