注意啦,前端初学者适合看的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.最小化现场更新
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结果对象,就可以在其它的函数里引用它。如下图
今天先总结那么点。
优化不是很高深的东西,他是渗透到每个字符的,代码优化,从基础做起!