javascript编程小技巧

其实主要是性能小技巧。

循环优化

循环体是执行最多的,所以要确保其被最大限度的优化.

//提前计算好终止条件,存到局部变量中
for(var i=0, j = document.getElementsByTagName('a').length; i<l; i++){
    // maybe faster
}

//推荐 while循环的效率要优于for(;;)
var i=document.getElementsByTagName('a').length;
while(i--){
   
}

// 据说是最快的  后测试循环
do{
   // maybe fastest
}while(i--)

避免 for-in 循环

for(in)的效率极差,因为它需要查询散列键,只要可以,就应该尽量少用

//要遍历一个集合内的元素,用for,while,do..while代替
//这是vue源码中的一段,作者用for(;;)循环代替了for...in
var keys = Object.keys(obj);
  for (var i = 0, l = keys.length; i < l; i++) {
    this.convert(keys[i], obj[keys[i]]);
  }

多个类型一起声明


var option='option';
var event='event';
var method='method';

//可替换为 
var option='option',
    event='event',
    method='method';
    

类型转换

+'010' === 10; //+可以把字符串变成整数
Number('010') === 10;
parseInt('010', 10) === 10;
10 + '' === '10';//也可以把整数变成字符串

+new Date() // timestamp
+new Date;

使用三目运算符替代条件分支

//将条件从最可能到最不可能进行排列,减少探测次数
 if (a > b) {
    num = a;
} else {
    num = b;
}
//可以替换为:
num = a > b ? a : b;

巧用||和&&布尔运算符

//源码中这种运算符操作很多,尤其是jQuery源码
item && item.$value || item;
var id = typeof asset === 'function' ? asset.options && asset.options.name || asset.id : asset.name || asset.id;

用局部变量代替全局变量

无论是DOM节点,普通变量,还是对象属性,若需重复使用,通通存成局部变量,避免多次取值的调用开销

 //vue源码
var p = Cache.prototype;
p.put = function (key, value) {}

//jquery源码
var deletedIds = [];
var slice = deletedIds.slice;
var concat = deletedIds.concat;
var push = deletedIds.push;
var indexOf = deletedIds.indexOf;

DOM节点链式操作

//链式操作会自动缓存
$('.test').find('.btn').css('backgroundColor','#f30').click();

修改CSS类,而不是样式

尤其是在修改多个样式时,修改css类只会引起一次回流,而修改样式会引起多次回流。

插入迭代器

var name=values[i]; 
i++;

//替换为
var name=values[i++]

使用字面量

var aTest = new Array(); 
var aTest = new Object; 
var reg = new RegExp(); 
var oFruit = new O;
oFruit.color = "red";
oFruit.name = "apple";

//分别替换为
var aTest = []; 
var aTest = {}; 
var reg = /\d/i; //只在有变量时才用new RegExp()
var oFruit = { color: "red", name: "apple" };

使用一次innerHTML赋值代替构建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('');

尽量使用原生方法

var container = document.createElement('div');
container.appendChild(el.cloneNode(true));

避免with语句

with语句会创建自己的作用域,因此会增加其中执行的代码的作用域链的长度,所以能不用的时候就不要用。

with (a.b.c.d) {
    property1 = 1;
    property2 = 2;
}
//可以替换为:
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;

ps:有些代码性能虽高,但是可能会降低阅读性与可维护性,或者与团队的规范冲突,所以这个需要自己在可读性,团队规范性与代码性能之间权衡。

感言

上面罗列的都是我觉得经常会用到的,看一遍,用心记一下,很easy~~可能以后会不定时更新,看自己get到的情况~~

我也是最近才注意到这些“潜规则”,正巧最近也在看vue的源码,然后就发现:基本上网上能查到的性能优化的方面,或者编程的技巧都能在vue源码中找到佐证。vue源码的代码质量很高,非常值得我等小辈学习。

上面的技巧,若有任何不对,欢迎指正,也欢迎补充~~

过段时间一定要写源码阅读笔记(好怕打脸~~逃)

阅读 1.1k

推荐阅读
慢慢沉淀
用户专栏

自己在前端路上的积累,沉淀和总结

6 人关注
8 篇文章
专栏主页