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比本机j慢得多。压缩代码不是必需的，您只需压缩以优化客户端浏览器中的加载 - 您在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);

Answer 2

考虑到JavaScript可以更好地访问DOM，它会更快一些，但只要保持jQuery代码的清洁和一致，就不会发现太大的区别。

标准jQuery 并非真正针对移动设备制作，因此某些事件会稍有延迟（例如“点击”），而某些动画可能会有点慢，但有很多变通方法这工作得很好。这不会是一个问题，因为你正在使用jQuery，但我想很高兴知道..

编辑：我迟钝了..没有注意到标题中的“移动”，所以我编辑了最后一部分。

优化jquery移动和javascript

2 个答案: