前言

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

今天这篇文章我们一起来看看如何写出一些高效的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操作有关的性能优化的文章，敬请关注~