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('<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 - Get 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>');

mrcrgl · Accepted Answer · 2014-03-11 08:41:53Z

1

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);

edited Mar 11, 2014 at 8:41

answered Mar 10, 2014 at 11:26

mrcrgl

6404 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nnnnnn Over a year ago

"jQuery is much slower than native js" - Whether this is noticeable depends on what jQuery is used for. Given that OP is using jQuery mobile, he is presumably depending on it to do a lot of styling that would be complicated to rewrite from the ground up in plain JS.

Thomas M. Tveten Over a year ago

Im doing some heavy lifting with my jquery append, I should maybe change this to document.getElementById("guessFriends").appendChild ?

Thomas M. Tveten Over a year ago

Thanks for the response! I updated my question above with a question regarding css. Do you think you could take a look on it?

mrcrgl Over a year ago

jsperf.com/append-native-vs-jquery i wrote a small test there: jquery is 79% slower

Thomas M. Tveten Over a year ago

Wow that is ha HUGE different. Could you please help me out with how I can append this ugly line (I updated my question with it) in javascript. I get dizzy just by looking on it :( I will for sure accept your answer

Watercolours · Accepted Answer · 2014-03-10 11:51:35Z

1

Considering that JavaScript has better access to the DOM it will be a bit faster, but you won't notice much difference as long as you keep your jQuery code clean and consistent.

Standard jQuery wasn't really made for mobile devices so some events have a slight delay (e.g 'click') and some of the animations can be a bit slow, but there are plenty of workarounds that work very well. This won't be a problem since you're using jQuery, but I guess it's nice to know..

EDIT: I'm retarded.. Didn't notice "mobile" in the title, so I edited the last section a bit.

edited Mar 10, 2014 at 11:51

answered Mar 10, 2014 at 11:30

Watercolours

4141 gold badge4 silver badges19 bronze badges

3 Comments

nnnnnn Over a year ago

"jQuery wasn't really made for mobile devices so some events have a slight delay (e.g 'click')" - OP is using jQuery Mobile, which obviously was made for mobile devices. Isn't the famous click delay related to the difference between click and touch events, and the way some browsers try to allow for double-taps before triggering the click event?

Watercolours Over a year ago

You are absolutely right.. I didn't read the title properly. Edited my answer a little. Thanks for pointing it out!

Thomas M. Tveten Over a year ago

I will look on ways to change from jquery to javascript. I updated my question with a question about css, do you think you could take a look on it?

Collectives™ on Stack Overflow

Optimize jquery mobile and javascript

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related