|
阅读：8200回复：2
javascript 优化
下面，分享一些关于javascript的优化问题，欢迎大家补充
1. 减缓代码下载时间 浏览器下载js代码时，包括了长变量名、注释、空格、换行等多余字符; 它加长了下载代码的时间，虽然对于团队 编写代码十分有效，上最后完成时，应当将它们全部删除。如： function showMeTheMoney(money)
{
if(!money)
{
return false;
} else{
...
}
}
可以优化成： function showMeTheMoney(money){if(!money){ return false;} else{ ... }}对于，减少代码体积的方法，可以使用一些小工具，例如：ECMA Script Cruncher、JSMin、Online JavaScript Compressor等。
对于布尔型的值true和false，true可以用1来替换，而false可以用0来替换，例如： var bSearch=false;
for(var i=0; i<aChoices.length && !bSearch; i++){
if(aChoices[i]==vValue)
bSearch = true;
} 替换成
var bSearch=0;
for(var i=0; i<aChoices.length && !bSearch; i++){
if(aChoices[i]==vValue)
bSearch = 1;
}
代码中常常会出现检测某个值是否为有效值的语句，而很多条件的判断，就是判断某个变量值是否为"undefined"、“null”或者“false”，例如： if(myValue!=undefined){
//...
}
if(myValue!=null){
//...
}
if(myValue!=false){
//...
} 上面的写法，都是正确的，但有一个更好的方式，可以达到和以上一样的代码效果,就是使用逻辑运算符：取非。如下：
if(!myValue){
//...
} 类似的代码优化还有将数组定义时的 new Array() 直接用"[]"代替，对象定义时的new Object() 用“{}” 代替等.
2. 合理声明变量 减少代码的体积仅仅只能使得用户下载的速度变快、但执行程序的速度并没有改变。要提高代码执行的效果、还得在各方面做调整。 在浏览器中、JavaScript默认的变量范围是window对象、也就是全局变量。全局变量只有在浏览器关闭才释放。而JavaScript也有局部变量、通常在function中执行完毕就会立即被释放。因此在函数体中要尽可能使用var关键字来声明变量： function First(){
a = "" ; //直接使用变量
}
function Second(){
alert(a);
}
First();
Second(); 这样、变量"a"就成为了全局变量、直到页面关闭时才会被销毁、浪费了不必要的资源、如果在"a"的前面加上"var"、这样"a"就成为了当前function的局部变量。在执行完First()便立即被销毁。因此、在函数体中、如果不是特别需要的全局变量、都应当使用"var"进行声明、从而节省系统资源。
3. 性能比较提高的一些小技巧 使用内置函数缩短编译时间( 即尽量使用原生方法) 只要可能、应当尽量使用JavaScript的内置函数。因为这些内置的属性、方法都是用类似C、C++之类的言语编译过的、运行起来比实时编译的JavaScript快很多。如现在的指数函数 function myPower(iNum,n){
var iResult = iNum ;
for(var i = 0 ;i < n ;i++)
iResult *= iNum ;
return iResult;
}
var myDate1 = new Date();
for(var i = 0 ;i < 150000 ;i++){
myPower(7,8); //自定义方法
}
var myDate2 = new Date();
document.write(myDate2 - myDate1);
document.write("< br /> ");
myDate1 = new Date();
for(var i = 0 ;i < 150000 ;i++){
Math.pow(7,8); //采用系统内置方法
}
myDate2 = new Date();
document.write(myDate2 - myDate1); 这样就能看出、系统内置的方法要快很多，大家可以自行测试一下。
switch语句相对if较快 通过将case语句按照最可能到最不可能的顺序进行组织 巧用||和&&布尔运算符 function eventHandler(e) {
if (!e) e = window.event;
}
//可以替换为：
function eventHandler(e) {
e = e || window.event;
}
if (myobj) {
doSomething(myobj);
}
//可以替换为：
myobj && doSomething(myobj); 数字转换成字符串
一般最好用”" + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说： (“” +) > String() > .toString() > new String() 浮点数转换成整型 很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round() 4. 字符串连接 如果要连接多个字符串，应该少使用+=，如 脚本语句越少执行的时间就越短，而且代码的体积也会相应减小。如： var iNum = 365; var sColor = "yellow"; var aMyNum = [6,7,8]; var oMyDate = new Date();可以优化为： var iNum=365, sColor = "yellow", aMyNum = [6,7,8], oMyDate = new Date();或在迭代运算的时候可以减少代码 var sCar = aCars[i]; i++可以优化为： var sCar = aCars[i++]; 6、节约使用DOM JavaScript对DOM的处理可能是最耗费时间的操作之一。每次JavaScript对DOM的操作都会改变页面的表现、并重新渲染整个页面、从而有明显的时间消耗. 所以，尽量减少甚至不要对DOM进行操作。如：为ul添加了10个条目 var oUl = document.getElementById( "ulItem" );
for ( var i=0;i<10;i++){
var oLi = document.createElement( "li" );
oUl.appendChild(oLi);
oLi.appendChild(document.createTextNode("Item " +i));
}
以上代码在循环中调用oUl.appendChild(oLi)、每次执行这条语句后、浏览器就会重新渲染页面、其次给列表添加文本节点oLi.appendChild(document.createTextNode("Item "+i))、这也会造成页面被重新渲染。因此每次运行都会造成两次重新渲染页面、共20次。 通常应当尽可能减少DOM的操作、将列表项目在添加文本节点之后在添加、并合理地使用createDocumentFragment() ,引入createDocumentFragment()方法，它的作用是创建一个文档碎片，把要插入的新节点先附加在它上面，然后再一次性添加到document中.代码如下： var oUl = document.getElementById( "ulItem" );
var oTemp = document.createDocumentFragment();
for ( var i=0;i<10;i++){
var oLi = document.createElement( "li" );
oLi.appendChild(document.createTextNode("Item " +i));
oTemp.appendChild(oLi);
}
oUl.appendChild(oTemp);
7. 使用一次innerHTML赋值代替构建dom元素 对于大的DOM更改，使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多 var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);
//可以替换为：
var html = [];
for (var i = 0; i < 1000; i++) {
html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');
来自：http://www.cnblogs.com/iflex/archive/2012/04/05/js_youhua.html http://www.codeceo.com/article/javascript-performance-tips.html |
|
公众号
