【JavaScript】前端的性能优化（js）

避免全局查找
在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些

//最好的方式是如下这样 先用一个简单变量保存起来
function search() {
  var location = window.location;
  return location;
}

数字转换成字符串
般最好用”” + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

(+ "") > String() > .toString() > new String()

浮点数转换成整型
很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()

多个类型声明
在JavaScript中所有变量都可以使用单个var语句来声明，这样就是组合在一起的语句，以减少整个脚本的执行时间，就如上面代码一样，上面代码格式也挺规范，让人一看就明了。
var a,b,c,d,e,f;

插入迭代器
如var name=values[i]; i++;前面两条语句可以写成var name=values[i++]

删除DOM节点
删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,否则将会产生无法回收的内存。另外，在removeChild和innerHTML=”二者之间,尽量选择后者. 因为在sIEve(内存泄露监测工具)中监测的结果是用removeChild无法有效地释放dom节点

简化终止条件
由于每次循环过程都会计算终止条件，所以必须保证它尽可能快，也就是说避免属性查找或者其它的操作，最好是将循环控制量保存到局部变量中，也就是说对数组或列表对象的遍历时，提前将length保存到局部变量中，避免在循环的每一步重复取值。

var list = document.getElementsByTagName('p');
  for (var i = 0; i < list.length; i++) {
    //……
  }
  //替换为：
  var list = document.getElementsByTagName('p');
  for (var i = 0, l = list.length; i < l; i++) {
    //……
  }

使用后测试循环
在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以，就应该尽量少用。for(;;)和while循环，while循环的效率要优于for(;;)，可能是因为for(;;)结构的问题，需要经常跳转回去。

var arr = [1, 2, 3, 4, 5, 6, 7];
var sum = 0;
for (var i = 0, l = arr.length; i < l; i++) {
  sum += arr[i];
}
//可以考虑替换为：
var arr = [1, 2, 3, 4, 5, 6, 7];
var sum = 0, l = arr.length;
while (l--) {
  sum += arr[l];
}

最常用的for循环和while循环都是前测试循环，而如do-while这种后测试循环，可以避免最初终止条件的计算，因此运行更快。

缩短否定检测

if (oTest != '#ff0000') {
  //do something
}
if (oTest != null) {
  //do something
}
if (oTest != false) {
  //do something
}
//虽然这些都正确，但用逻辑非操作符来操作也有同样的效果：
if (!oTest) {
  //do something
}

条件分支
将条件分支，按可能性顺序从高到低排列：可以减少解释器对条件的探测次数
在同一条件子的多（>2）条件分支时，使用switch优于if：switch分支选择的效率高于if，在IE下尤为明显。4分支的测试，IE下switch的执行时间约为if的一半。
使用三目运算符替代条件分支

if (a > b) {
      num = a;
    } else {
      num = b;
    }
    //可以替换为：
    num = a > b ? a : b;

使用常量
重复值:任何在多处用到的值都应该抽取为一个常量
用户界面字符串:任何用于显示给用户的字符串，都应该抽取出来以方便国际化
URLs:在Web应用中，资源位置很容易变更，所以推荐用一个公共地方存放所有的URL
任意可能会更改的值:每当你用到字面量值的时候，你都要问一下自己这个值在未来是不是会变化，如果答案是“是”，那么这个值就应该被提取出来作为一个常量。
避免与null进行比较
由于JavaScript是弱类型的，所以它不会做任何的自动类型检查，所以如果看到与null进行比较的代码，尝试使用以下技术替换
如果值应为一个引用类型，使用instanceof操作符检查其构造函数
如果值应为一个基本类型，作用typeof检查其类型
如果是希望对象包含某个特定的方法名，则使用typeof操作符确保指定名字的方法存在于对象上

性能方面的注意事项
1、尽量使用原生方法
2、switch语句相对if较快
通过将case语句按照最可能到最不可能的顺序进行组织
3、位运算较快
当进行数字运算时，位运算操作要比任何布尔运算或者算数运算快
4、巧用||和&&布尔运算符

function eventHandler(e) {
     if (!e) e = window.event;
   }
   //可以替换为：
   function eventHandler(e) {
     e = e || window.event;
   }
   if (myobj) {
     doSomething(myobj);
   }
   //可以替换为：
   myobj && doSomething(myobj);

何时用单引号，何时用双引号
虽然在JavaScript当中，双引号和单引号都可以表示字符串, 为了避免混乱，我们建议在HTML中使用双引号，在JavaScript中使用单引号，但为了兼容各个浏览器，也为了解析时不会出错，定义JSON对象时，最好使用双引号

部署
用JSLint运行JavaScript验证器来确保没有语法错误或者是代码没有潜在的问
部署之前推荐使用压缩工具将JS文件压缩

文件编码统一用UTF-8
JavaScript 程序应该尽量放在 .js 的文件中，需要调用的时候在 HTML 中以 <script src=”filename.js”> 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的，则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小，无益于代码的压缩和缓存的使用。另外，<script src=”filename.js”> 标签应尽量放在文件的后面,最好是放在</body>标签前。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。
永远不要忽略代码优化工作，重构是一项从项目开始到结束需要持续的工作，只有不断的优化代码才能让代码的执行效率越来越好

【JavaScript】前端的性能优化（js）

猜你喜欢