js代码如何优化?如何让你的Javascript代码执行效率更高?
前言
在前端开发中,我们往往会把性能问题当做编码过程的一个重要考虑因素,如何写出高质量代码是我们每个程序员追求的高境界。
今天这篇文章我们一起来看看如何写出一些高效的Javascript代码,提高执行效率吧。
Javascript
不使用with
在Javascript中提供了with关键字,它可以将代码执行的作用域设定到一个特定的作用域中。
使用with语句可以减少代码量,例如以下的一些与location有关的执行语句。
不使用with
当使用with语句后,以上的代码可以优化成以下的方式。
使用with
我们可以看出,在代码编写上,如果使用with语句,代码块中就会包含一个独立的作用域,根据作用域链的思想,每次执行会优先寻找该作用域下的变量与方法。
使用with语句的一个最大问题是:Javascript引擎无法优化with代码块。
拿上面那段代码来说,Javascript引擎无法判断with代码块内部的search是局部变量还是location对象的一个属性,因此只要Javascript引擎遇到with关键字,就会放弃优化其中的代码块,造成性能下降。
因此我们得出的结论是:不要因为节省代码量而使用with关键字。
尽量不使用全局变量
虽然不推荐使用全局变量,但是全局变量也有它的好处,最主要是写法简单,所有信息可以直接从window寻找。
但是其弊端也是很明显的,总结如下。
- 由于作用域链的存在,代码执行会优先从当前作用域寻找变量,如果引用全局变量,总是需要寻找到window对象才可以找到,非常耗时。
- 全局作用域中定义的变量会一直存在于内存中,会导致占用的内存越来越大,影响性能。
- 变量污染,当定义的全局变量越来越多,可能自己定义的变量名已经记不清了,后面的变量覆盖前面的值很可能发生,造成变量冲突。
下面我们通过一个简单的例子来验证使用全局变量会造成性能下降。
例子的主要功能是,执行一个for循环,每次拼接一个简单的字符,通过console.time()和console.timeEnd()方法测试执行的时间。
执行代码
我们将上述代码复制到Chrome控制台中执行,为了证实结果不是偶然的,我们执行三次,得到的结果如下所示。
结果1
结果2
结果3
通过上述的结果,可以看出在不使用全局变量的情况下,执行时间要远远低于使用全局变量的。
因此得出的结论是:在万不得已的情况下,不要使用全局变量。
减少使用累加形式连接字符串
在拼接字符串时,我们总是会习惯性的使用’+’运算符拼接多个字符串。
累计使用’+’
这种写法的可读性比较好,而且能够减少很多的代码量,在写法上非常常见。
但是如果考虑到性能问题,这种写法却不是最好的,这是为什么呢?
因为使用连续的’+’运算符,每使用一次都会生成一个临时变量去存储字符串,直到最后一次才会将结果赋值给变量a。
比如上述的代码,会生成一个临时变量保存字符串’xy’,然后拼接到变量a的后面,最后才赋值给a。
而如果不使用累加形式拼接字符串,就不会出现这样的情况。
我们将上面的代码改写成以下形式。
改写形式
这种写法在执行时不会生成临时变量,而是将每次更新的值直接赋给变量a,这样的话性能会有所提升。
因此结论是:代码不复杂的情况下,尽量减少连续使用’+’连接符。
setTimeout 或者 setInterval方法传入函数
使用过Javascript定时器的同学都知道,setTimeout和setInterval方法可以传入函数,也可以传入字符串。
但是我们推荐传入函数的方式,如果传入字符串的话会影响性能。这是因为当你传入字符串的时候,它会被传进构造函数,并且重新调用另一个函数,影响执行过程。
如果传入函数的话,虽然在延迟一定的时间后才会执行,但是会被Javascript引擎优化,从而带来性能的提升。
例如以下是传入字符串的写法。
传如字符串
可以改写为以下传入函数的写法。
传入函数
结束语
Javascript中提升性能的方法还有很多,文章中只是列举了在编写代码过程中可以注意的问题。后面我还会整理与DOM操作有关的性能优化的文章,敬请关注~
继续阅读
- 暂无推荐