javascript - 优化 jquery mobile 和 javascript

Question

我正在使用phonegap 和jquery mobile 构建一个应用程序，并且我想优化我的代码。我读到一个地方说javascript比jquery更快，如果我用javascript替换我的jquery代码会有很大影响吗？ (我现在都在使用)。我还读到我应该压缩我的代码，但是phonegap说他们在构建时压缩所有内容，那么这真的有必要吗？

我读到 -webkit-transform:translate3d(0,0,0);加快性能，我应该只在有动画的地方使用它吗？这对设备上的应用程序(而不是 Web 应用程序)也有好处吗？

我还删除了点击延迟并将脚本移至 html 页面的末尾。还有其他我错过的事情吗？

更新

关于CSS的另一个问题。我在按钮上使用渐变，根据我的阅读，这会降低性能。下面是我的一个按钮的示例，我的问题是我是否需要移动应用程序上的 android 和 iphone 的所有这些属性

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

更新2.0 我在 jquery 中遇到了一些令人讨厌的附加操作，正如指出的那样，javascript 大约快了 80%!我不知道如何在 javascript 中附加，所以我想知道是否可以获得一些帮助。这是我通常附加的常用行。

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

Answer 1

首先:jQuery 是用 JavaScript 构建的。

当然，jQuery比原生js慢很多。压缩代码不是必需的，您只需压缩以优化客户端浏览器中的加载 - 这是phonegap 项目中没有的。如果出现滞后，最好重写代码。

编辑:

我已将工作示例粘贴在这里: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);