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结果对象，就可以在其它的函数里引用它。如下图

　　

　　今天先总结那么点。

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

转载于:https://www.cnblogs.com/youqianhua/p/7551736.html