js优化 前端小白适用

　　注意啦，前端初学者适合看的js优化，当你看个人优化认为太low，那么恭喜，你已经脱离初学者了。

　　首先这边我以为分享的仍是以js为主，前端性能优化，我认为最重要的仍是js，由于js是一门解释型的语言，相比于编译型语言，执行速度慢得多。木桶效应，js就是那块最短的木板。接下来进入正题，刚进入前端的同窗，能作哪些性能优化的方面呢？

　　1.使用jq代替原生js

　　其实上家公司我一直秉持着，原生的js好！为何呢？由于我不会jq。。。。可是来到如今的公司后，发现使用原生的js会被人排挤啊～你想问个问题，人家原生的js不熟啊，因此我通过这几个月加班以后，仍是能够简单使用jq了。其实使用jq就是优化js的第一步，相信看过jq源码的同窗都知道，jq把原生js会报的不少错都封装起来了，不至于这报错，那里报错，用户随意点击了下，有时一会儿网页没动静，颇有可能就是js报错了阻止了接下来的代码运行。

　　2.避免全局变量

　　简而言之，不要全局变量，除了第一个安全性问题呢，在代码优化方面，访问局部变量速度比访问全局变量更快。

　　3.定时器方面

　　针对不断运行的代码，不建议使用setTimeOut（），选择setInterval，由于一次性定时器每次都会初始化一个定时器。这里又要举个栗子了，最近公司来了个自称两年经验的同事，个人组长把他先安排给我带。。。。（内心仍是有点翅激），先给他布置了个任务，发送验证后的按钮状态，从60秒开始倒计时，倒计时结束，按钮解锁还能够再次发送验证码。就这么一个事，他的代码是

　　

　　四大不足，第一，我看这个setTimeOut不爽好久了，他在这里至关于开了60个延时器，这性能我就很少说了，第二，延时器第一参数是个方法，他在这里写了个function，function里面又包了一个function，请问你的意图在哪里？第三，在看他的settime方法里，其实又是开启另外一个方法。。。。。。。我心好累！第四个问题，条件分支下他把countdown==0放在了第一位，解析器会有59次探测此条件而且跳转到else，我仍是建议把可能性大的，放在第一位。下图，就是我优化后的60秒倒计时

　　

 

　　4.字符串链接

　　若是链接多个字符串，应该尽量少的使用“+=”。以下图

　　

　　5.数字转换字符串方面

　　最好使用""+1进行转换。虽然看起来很丑，可是不能否认这是最优。如下转换方法的性能排名

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

　　6.条件分支

　　就是if方面的，首先将可能性从高到低排列，减小解析器对条件探测的次数，其次，同一条件下子的多条件分支（大于2到3分支）时，建议使用switch，最后，推荐使用三目运算符代替条件分支。

　　7.最小化现场更新

 　　一旦你须要访问的DOM部分是已经显示的页面的一部分，那么你就是在进行一个现场更新。之因此叫现场更新，是由于须要当即（现场）对页面对用户的显示进行更新，每个更改，不论是插入单个字符仍是移除整个片断，都有一个性能惩罚，由于浏览器须要从新计算无数尺寸以进行更新。现场更新进行的越多，代码完成执行所花的时间也越长。这里不懂的同窗可参考我博客中关于重绘重排方面的知识，或baidu.com

　　

　　8.老是使用#id去寻找element.

　　在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是由于它直接映射为JavaScript的getElementById()方法。

　　9.选择多个元素

　　在咱们讨论选择多个元素的时候，咱们真正须要知道的是DOM的遍历和循环才是性能低下的缘由。为了尽可能减小性能损失， 老是使用最近的父ID去寻找。以下图，我要获取父级元素下的全部inuput标签

　　10.在Classes前面使用Tags

　　在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是由于它直接映射到JavaScript的getElementsByTagName()方法。

注意：在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽可能避免使用它。不要在ID前面 加Tag。

　　例如，它会由于去循环全部的<div>元素去寻找ID为content的<div>，而致使很慢。

　　

　　11.缓存jQuery对象

　　养成保存jQuery对象到一个变量上（就像上面的例子）的习惯。例如，不要这样作：

　　

　　提示：使用$前辍表示咱们的本地变量是一个jQuery包集。记住，不要在你的应该程序里出现一次以上的jQuery重复的选择操做。 额外提示：延迟存储jQuery对象结果

　　若是你想在你的程序的其它地方使用jQuery结果对象（result object(s)），或者你的函数要执行屡次，要把它缓存在一个全局范围的对象里。经过定义一个全局容器保存jQuery结果对象，就能够在其它的函数里引用它。以下图

　　

　　今天先总结那么点。

　　优化不是很高深的东西，他是渗透到每一个字符的，代码优化，从基础作起！