Optimize jquery mobile and javascript

Question

Im building an application using phonegap and jquery mobile, and I want to optimize my code. I read a place that javascript is faster than jquery, would it have a large impact if I replace my jquery code with javascript? (Im using both now). I also read that I should compress my code, but phonegap say that they compress everything when building, so how necessary is this really?

I read that -webkit-transform: translate3d(0,0,0); speeds up the performance, should I only use this where I have animations? And will this also be beneficial for applications on device (not web applications)?

I also removed the click delay and moved my scripts to the end of my html page. Any other things I have missed?

UPDATE

Another question regarding the css. Im using gradient on my buttons, and after what I read, this can slow the performance. Below is an example of one of my buttons, and my question is if I need all of those attributes for android and iphone on a 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 I got some nasty appending in jquery, and as it was pointed out javascript is about 80% faster! I got no idea how to append in javascript, so I wondering if I could get some help. Here is a common line I usually append.

$('#yourTurnList').append('  '+opponent+'
 

Your turn - Get Soundy!
Round: '+round+'
');

mrcrgl · Accepted Answer

At first: jQuery is built in javascript.

Of course, jQuery is much slower than native js. Compressing the code is not necessary, you only compress to optimize the loading in the clients browser - what you don't have in phonegap projects. It's a good idea to rewrite your code if you have laggs.

EDIT:

I've pasted the 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 a 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 - Get 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);

Optimize jquery mobile and javascript

Answers (2)

Related Questions