诳言js

先给人人意淫一下前端的futrue.
如今的JS应当是工业革命时期了。之前js就只是作为什么挪动一下图片，替换一下背景色彩等, 比较废的活. 然则如今h5,nodeJS,ECMA-6,gulp,grunt,webpack,react…等等种种框架，东西的涌现，基本上推翻了js的角色。之前js就是作为一个副角，html+CSS才是重要的，如今，你说你写网页的不会用js，呵呵，U ~= 渣渣. 而且俗气一点来讲，如今前端的薪资range应当是其他手艺类职业变化最大的，年薪2w+ 到 200w+ 的都有。所以js关于前端来讲莫过于一块金子招牌，假如你js真的吃透了，相信你的路真的是太宽了~
意淫终了，该谈正事了，JS最好实践应当是许多处所都邑提到的。我这里援用的是高等程序设计内里的内容，若有失足的处所，迎接改正.

范例诠释

由于js是一门弱范例的言语，所以每每造成了范例的不清楚，有能够胡乱运用差异范例上的要领，致使失足。
所以，平常给js的变量加上一些范例诠释是很有优点的。 一般我们会缺乏加诠释的动力，如许想吧，假如将来的某一天，你须要接办他人的项目的时刻，而他人的项目内里一条诠释也没有，你的想不想死。。。所以, 有因才有果，一个优越的诠释真的很有效.

var found = "s";  //"string"
var abc = true;  //boolean

这应当算是一种简朴的吧
另有一种是匈牙利标记法。即在每一个变量名前加上一个或多个字符示意响应的范例。
一般，”o”为对象，”s”为string,”b”为Boolean,”i”示意整数,”a”示意数组等

var sName ="string"; 

然则由于看起来很丑，引荐只在函数参数内里运用就足够了。

算法的庞杂度

这也是口试时刻会经常问到的。

一个一个诠释:

O(1)

示意你不管有若干值，猎取常量值的时候都一样。

var value = 5;
var num = value + 4;
console.log(num);

上面的庞杂度团体为1，由于这只是简朴的变量查找。 O(1)的操纵另有,数组的读取

var value = [1,2,3,4,5];
console.log(value[1]);  //2

一样也是1，不论你是若干次查找都一样。
所以说算法庞杂度为O(1)的状况:只要在猎取变量以及数组的时刻

O(n)

最经常使用的是在你举行属性查找的时刻。由于查找属性的时刻，会遍历一切的对象上的属性，然后才返回。所以他的庞杂度为O(n).

var obj = {
    name:"jimmy",
    age:19
};
console.log(obj.name);

上面接见obj.name的属性的庞杂度为O(n).另有一个例子:

var name = window.location.href.substring(window.location.href.indexOf('.'));

能够数一下，上面算法的庞杂度为6个O(n)由于存在了6个”.”举行属性接见。这类状况下，能够优化一下，运用变量举行保留，要知道变量始终是O(1)的

var href = window.location.href;
var name = href.substring(href.indexOf('.'));

上面就缩减到了4次”.”，勤俭了33%的查询本钱。 这关于大型查找黑白常有优点的。然则假如你只是一次两次的查找，则运用变量和未运用变量是没有差异的。
别的关于变量的庞杂度和属性的庞杂度，平常来讲，假如能够运用arr[xxx]情势的遍历的话，最好运用。

//jquery对象---$val
for(var i = 0;i<$val.length;i++){
    $val.eq(i).html(); //输出innerHTML
}
//优化事后
for(var i in $val){
    $val[i].innerHTML;  //输出的innerHTML
}

———–分割线———-
这里谢谢@Dreamacro 童鞋的提示。这里特此说明一下，在V8内里引擎关于对象属性的查找实际上是O(1)的操纵。
(Ps:我操，你究竟再说什么鬼)
实在在V8内里关于对象属性的存储一样是散列hash，然则V8就是快，为了完成向java一样的遍历速率，因而做了一点修正。在你每次新建属性的时刻，V8会运用hidden class，新建一份本来对象的Copy而且添加上新属性。因而在你下次查找属性的时刻他都邑直接从这个新建的Class info寻觅。 假如你一不小心手贱运用了delete的话，你查找的庞杂度便会退化为O(n).
参考: hidden Class, V8引擎对象优化

关于O(log n)和 O(n^2),由于如今对算法不通晓，照样别误导人了。

轮回优化

一个罕见的轮回

for(var i= 0 ;i<nodelist.length;i++){
    ...
}

这个轮回能够，然则不是很高效，由于每一次轮回你都邑去挪用一次nodelist.length这个值，造成了 nodelist.length * O(n)如许一个庞杂度. 优化的方法就是将length提出去

for(var i= 0,len = nodelist.length;i<len;i++){
    ...
}

上面的轮回的庞杂度就变成1O(1) + 1O(n); 固然上面那种简朴而且更高效.
然则试想一下，假如你在轮回体还须要运用nodelist[i]

for(var i= 0,len = nodelist.length;i<len;i++){
    var list = nodelist[i];
    ...
}

想想，nodelist[i]乍看起来并非轮回体内所须要的。那我们应当怎么做呢？
很简朴，应用null为false的前提自动转换

for(var i = 0,node; node = nodelist[i++];){
    node...
}
//固然你也能够直接运用
for(var node of nodelit){  //这类体式格局越发轻易简约，然则是es6的一个新特征
    node
    ...
}

别的循坏能够经由过程以下几个点来举行优化

1.减值迭代

2.简化停止前提
3.简化轮回体
4.运用后测试轮回--for和while都是前测试轮回, do-while是后测试轮回

减值迭代
: 从最大值最先减值，而不是从最小值减值迭代。

简化停止前提
: 即就是想上面例子一样，对停止前提寄存在变量当中.

简化轮回体
: 这应当是一个庞杂的活，简朴的就是把不须要介入轮回的语句提出来

运用后测试
: 这实在就是防备对空值举行轮回

var len = nodelist.length,
    i = 0;
if(len>0){
    do{
        ...
    }while(++i===len);
}

这一部份能够参考一下Naraku_的读书笔记。
另有一个例子，是我在腾讯口试的时刻碰到的。

从一篇全英文的文章中找到频次次数最高的单词

这里是我写的一部份代码，能够看一看
挑选单词

Duff优化

每次看的时刻，都邑被他的精华刺瞎了我24K金钛合金*眼.
将轮回次数睁开誊写
这是Andrew B.King 写出的一个比较有名的Duff装配.将do-while分红两个零丁的轮回。简朴易懂。

var iter = Math.floor(values.length/8);
var leftover = values.length%8;
var i = 0;
if(leftover>0){
    do{
        process(values[i++]);
    }while(--leftover>0);
}
do {
    process(values[i++]); //8次处置惩罚
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
}while(--iter>0);

觉得比平常的for轮回越发庞杂，没错。Duff平常是用来处置惩罚比较多的轮回次数的时刻才会真正显现他的效力。假如你运用的轮回次数就50+。那运用for效力会更高一点. 一般我们前端也用不到，由于TM这是给后端用的。

防止两重诠释

这类状况平常只会发作在3种状况下, 即运用eval,Function,setTimeout内里.

eval("alert('hehe')");
var sayHi = new Function("alert('hehe')");
setTimeout("alert('hehe')",500);

以上3中会发作两重诠释，原因是,底本的js剖析器不能直接剖析上面的string字符串，须要分外新开一个剖析器来举行诠释，致使的效果就是速率被拖屎了。 固然，平常的手艺人员也不会手贱写这么贫苦的。
修正

alert('hehe');
var sayHi = function(){alert('hehe')}
setTimeout(function(){alert('hehe')},500);

如许写就没什么问题了。

最小化语句

即就是整合语句了。由于js是弱范例的，所以能够直接运用var或许let举行一连赋值。而且这也是JIT编译器帮你干的事.(JIT是一种能让你代码越运转越快的编译器)

//用了5条语句声明5个变量
var count = 5;
var color = 'red';
var values = [1,2,3];
var now = new Date();

//用了1条语句声明5个变量,注重每一个变量用逗号离隔
var count = 5,
    color = 'red',
    values = [1,2,3],
    now = new Date();

另有就是运用数组和对象字面量
: 由于语句量削减，剖析器的压力也减小了

// 建立两个对象 ----不好的体式格局
//one 四条语句
var values = new Array();
values[0] = 123;
values[1] = 456;
values[2] = 789;
//two 四条语句
var person = new Object();
person.name = 'jozo';
person.age = 21;
person.sayName = function(){
    alert(this.name);
};
// 建立两个对象 ----引荐的体式格局
//one 1条语句
var values = [123,456,789]
//two 1条语句
var person = {
    name : 'jozo',
    age : 21,
    sayName : function(){
    alert(this.name);
};

总的来讲, js优化之路漫漫，没有年年月月的积聚，是不能够到达什么特别高的level的。所以说，活到老学到老，这是永久的真谛~~