前端性能优化补充篇

看了一下之前发布的文章，关于前端性能优化的，有网站前端性能优化之javascript和css及jquery的 jquery编程的标准写法和最佳实践 。前端性能优化是一个不断追求的过程，前面的文章虽然讲解了一些性能优化，但是关于性能优化的路还有很长，很多东西都没有提及。今天，我在前面的基础之上，再来简单总结一些常用的性能优化方式。

运算符

1、使用运算符时，尽量使用+＝，－＝、*＝、=等运算符号，而不是直接进行赋值运算。

2、位运算。

当进行数学运算时位运算较快，位运算操作要比任何布尔运算或算数运算快，如取模，逻辑与和逻辑或也可以考虑用位运算来替换。

有同学问，常见的js位运算符有哪些？常见的位运算符有“~，&，|，^,.<<,>>,>>>”等等。

关于位运算的应用，我前面也有文章提及，js运算符单竖杠“|”的用法和作用是什么？以及javascript实用技巧，js小知识大家可以去看看。

常规优化
1、switch语句。

若有一系列复杂的if-else语句，可以转换成单个switch语句则可以得到更快的代码，还可以通过将case语句按照最可能的到最不可能的顺序进行组织，来进一步优化。

例如：

function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age >= 50): category = "Old"; break; case (age <= 20): category = "Baby"; break; default: category = "Young"; break; }; return category; } getCategory(5); //Baby

这样的稍微复杂一些的，我们尽量就不用if/else了，当然，简单的判断，还是推荐if/else。

2、减少页面的重绘

我的jquery文章优化中，提及了这一项。

代码如下：

var str = "<div>这是一个测试字符串</div>"; /**效率低**/ var obj = document.getElementsByTagName("body"); for(var i = 0; i < 100; i++){ obj.innerHTML += str + i; } /**效率高**/ var obj = document.getElementsByTagName("body"); var arr = []; for(var i = 0; i < 100; i++){ arr[i] = str + i; } obj.innerHTML = arr.join("");

3、传递方法取代方法字符串

一些方法例如setTimeout()、setInterval()，接受字符串或者方法实例作为参数。直接传递方法对象作为参数来避免对字符串的二次解析。

传递方法

setTimeout(test, 1);//good
传递方法字符串

setTimeout('test()', 1);//不能说bad,只能说not good

4、使用原始操作代替方法调用

方法调用一般封装了原始操作，在性能要求高的逻辑中，可以使用原始操作代替方法调用来提高性能。

原始操作

var min = a<b?a:b; //good
方法实例
var min = Math.min(a, b);//not good

5、定时器

如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。

6、最小化语句数

例如：

多个变量声明

/**不提倡**/ var i = 1; var j = "hello"; var arr = [1,2,3]; var now = new Date(); /**提倡**/ var i = 1, j = "hello", arr = [1,2,3], now = new Date();

插入迭代值

/**不提倡**/ var name = values[i]; i++; /**提倡**/ var name = values[i++];

使用数组和对象字面量，避免使用构造函数Array(),Object()

/**不提倡**/ var a = new Array(); a[0] = 1; a[1] = "hello"; a[2] = 45; var o = new Obejct(); o.name = "bill"; o.age = 13; /**提倡**/ var a = [1, "hello", 45]; var o = { name : "bill", age : 13 };

类型转换

1、把数字转换成字符串。

应用""+1，效率是最高。

性能上来说：""+字符串>String()>.toString()>new String()。

String()属于内部函数，所以速度很快。 .toString()要查询原型中的函数，所以速度略慢。 new String()最慢。

2、浮点数转换成整型。

错误使用使用parseInt()。

parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换。

应该使用Math.floor()或者Math.round()。

Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。

循环
1、定义变量，避免每次获取

/**效率低**/ var divs = document.getElementsByTagName("div"); for(var i = 0; i < divs.length; i++){ ... } /**效率高，适用于获取DOM集合，如果纯数组则两种情况区别不大**/ var divs = document.getElementsByTagName("div"); for(var i = 0, len = divs.length; i < len; i++){ ... }

2、避免在循环中使用try-catch。

try-catch-finally语句在catch语句被执行的过程中会动态构造变量插入到当前域中，对性能有一定影响。

如果需要异常处理机制，可以将其放在循环外层使用。

循环外使用try-catch

try { for ( var i = 0; i < 200; i++) {} } catch (e){}

3、避免遍历大量元素，尽量缩小遍历范围。

作用域链和闭包优化
1、作用域。

作用域(scope)是JAVASCRIPT编程中一个重要的运行机制，在JAVASCRIPT同步和异步编程以及JAVASCRIPT内存管理中起着至关重要的作用。 在JAVASCRIPT中，能形成作用域的有如下几点。

函数的调用 with语句 with会创建自已的作用域，因此会增加其中执行代码的作用域的长度。 全局作用域。

以下代码为例：

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!