js代码如何优化?如何让你的Javascript代码执行效率更高?

qinzhiqiang 08-16 17:33 836次浏览

前言

在前端开发中,我们往往会把性能问题当做编码过程的一个重要考虑因素,如何写出高质量代码是我们每个程序员追求的高境界。

今天这篇文章我们一起来看看如何写出一些高效的Javascript代码,提高执行效率吧。

如何让你的Javascript代码执行效率更高?来看看这些优化手段吧

Javascript

不使用with

在Javascript中提供了with关键字,它可以将代码执行的作用域设定到一个特定的作用域中。

使用with语句可以减少代码量,例如以下的一些与location有关的执行语句。

如何让你的Javascript代码执行效率更高?来看看这些优化手段吧

不使用with

当使用with语句后,以上的代码可以优化成以下的方式。

如何让你的Javascript代码执行效率更高?来看看这些优化手段吧

使用with

我们可以看出,在代码编写上,如果使用with语句,代码块中就会包含一个独立的作用域,根据作用域链的思想,每次执行会优先寻找该作用域下的变量与方法。

使用with语句的一个最大问题是:Javascript引擎无法优化with代码块

拿上面那段代码来说,Javascript引擎无法判断with代码块内部的search是局部变量还是location对象的一个属性,因此只要Javascript引擎遇到with关键字,就会放弃优化其中的代码块,造成性能下降。

因此我们得出的结论是:不要因为节省代码量而使用with关键字。

尽量不使用全局变量

虽然不推荐使用全局变量,但是全局变量也有它的好处,最主要是写法简单,所有信息可以直接从window寻找。

但是其弊端也是很明显的,总结如下。

  • 由于作用域链的存在,代码执行会优先从当前作用域寻找变量,如果引用全局变量,总是需要寻找到window对象才可以找到,非常耗时。
  • 全局作用域中定义的变量会一直存在于内存中,会导致占用的内存越来越大,影响性能。
  • 变量污染,当定义的全局变量越来越多,可能自己定义的变量名已经记不清了,后面的变量覆盖前面的值很可能发生,造成变量冲突。

下面我们通过一个简单的例子来验证使用全局变量会造成性能下降。

例子的主要功能是,执行一个for循环,每次拼接一个简单的字符,通过console.time()和console.timeEnd()方法测试执行的时间。

如何让你的Javascript代码执行效率更高?来看看这些优化手段吧

执行代码

我们将上述代码复制到Chrome控制台中执行,为了证实结果不是偶然的,我们执行三次,得到的结果如下所示。

如何让你的Javascript代码执行效率更高?来看看这些优化手段吧

结果1

如何让你的Javascript代码执行效率更高?来看看这些优化手段吧

结果2

如何让你的Javascript代码执行效率更高?来看看这些优化手段吧

结果3

通过上述的结果,可以看出在不使用全局变量的情况下,执行时间要远远低于使用全局变量的。

因此得出的结论是:在万不得已的情况下,不要使用全局变量。

减少使用累加形式连接字符串

在拼接字符串时,我们总是会习惯性的使用’+’运算符拼接多个字符串。

如何让你的Javascript代码执行效率更高?来看看这些优化手段吧

累计使用’+’

这种写法的可读性比较好,而且能够减少很多的代码量,在写法上非常常见。

但是如果考虑到性能问题,这种写法却不是最好的,这是为什么呢?

因为使用连续的’+’运算符,每使用一次都会生成一个临时变量去存储字符串,直到最后一次才会将结果赋值给变量a。

比如上述的代码,会生成一个临时变量保存字符串’xy’,然后拼接到变量a的后面,最后才赋值给a。

而如果不使用累加形式拼接字符串,就不会出现这样的情况。

我们将上面的代码改写成以下形式。

如何让你的Javascript代码执行效率更高?来看看这些优化手段吧

改写形式

这种写法在执行时不会生成临时变量,而是将每次更新的值直接赋给变量a,这样的话性能会有所提升。

因此结论是:代码不复杂的情况下,尽量减少连续使用’+’连接符。

setTimeout 或者 setInterval方法传入函数

使用过Javascript定时器的同学都知道,setTimeout和setInterval方法可以传入函数,也可以传入字符串。

但是我们推荐传入函数的方式,如果传入字符串的话会影响性能。这是因为当你传入字符串的时候,它会被传进构造函数,并且重新调用另一个函数,影响执行过程。

如果传入函数的话,虽然在延迟一定的时间后才会执行,但是会被Javascript引擎优化,从而带来性能的提升。

例如以下是传入字符串的写法。

如何让你的Javascript代码执行效率更高?来看看这些优化手段吧

传如字符串

可以改写为以下传入函数的写法。

如何让你的Javascript代码执行效率更高?来看看这些优化手段吧

传入函数

结束语

Javascript中提升性能的方法还有很多,文章中只是列举了在编写代码过程中可以注意的问题。后面我还会整理与DOM操作有关的性能优化的文章,敬请关注~

  • 暂无推荐