总结分享10个JavaScript代码优化小tips

目录

写在前面慎用全局变量通过原型新增方法避免闭包中的内存泄露避免使用属性访问方法for循环优化选择最优的循环方式减少判断层级减少作用域链查找层级减少数据读取次数字面量与构造式

写在前面

想要做到JavaScript的代码优化，首先需要做的是准确的测试JavaScript的代码执行时间。其实需要做的就是采集大量的执行样本进行数学统计和分析，这里我们使用的是benchmark.js来检测代码的执行情况。
首先我们需要在项目中安装依赖，代码如下：

1. yarn add benchmark --save
2. # 或者
3. npm i benchmark --save

复制代码

然后我们写一个测试代码，如下所示：

1. const Benchmark = require('benchmark')
2. const suite = new Benchmark.Suite()
3. // 添加测试
4. suite
5.   /**
6.    * add() 方法接受两个参数，其中第一个表示测试的名称，第二个表示测试的内容，他是一个函数*   
7. /
8.   .add('join1000', () => {
9.     new Array(1000).join(' ')
10.   })
11.   .add('join10000', () => {
12.     new Array(10000).join(' ')
13.   })
14.   // 添加时间监听
15.   .on('cycle', event => {
16.     // 打印执行时间
17.     console.log(String(event.target))
18.   })
19.   // 完成后执行触发的事件
20.   .on('complete', () => {
21.     console.log('最快的是：' + suite.filter('fastest').map('name'))
22.   })
23.   // 执行测试
24.   .run({ async: true })
26. 复制代码</pre>/div>
27. <p><strong>代码执行结果如下：</strong></p>
28. <blockquote><p>// join1000 x 146,854 ops/sec ±1.86% (88 runs sampled)
29. // join10000 x 16,083 ops/sec ±1.06% (92 runs sampled)
30. // 最快的是：join1000</p></blockquote>
31. <p>在结果中，<code>ops/sec</code>表示的是每秒执行的次数，当然是越大越好，紧接着是每秒执行次数上下相差的百分比，最后括号中的内容表示共取样多少次。</p>
32. <p>或者也可以使用JSBench.me工具进行替换，<strong>网站测试截图如下：</strong></p>
33. <p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202207/202271391710086.png" />
34. </p>
35. <p>我们可以看到，都是<code>join1000</code>的性能更好一些（我感觉我在说废话）。</p>
36. <p class="maodian"></p><h2>慎用全局变量</h2>
37. <p><strong>这里所说的慎用全局变量，为什么要慎用呢？主要有以下几点：</strong></p>
38. <ul><li>全局变量定义在全局执行上下文，是所有作用域链的顶端。每次查找的时候都从局部找到最顶端，在<strong>时间上会有所消耗。</strong></li><li>全局执行上下文一直存在于上下文的执行栈，直到程序退出，才会被销毁，内存空间浪费 。</li><li>如果某个局部作用域出现了同名的变量则会遮盖或者说污染全局变量 。</li></ul>
39. <p><strong>下面我们就来写一段代码，看一下全局变量与布局变量在执行效率方面的差异，代码如下：</strong></p>
40. <div class="jb51code"><pre class="brush:js;">...
41. suite
42.   .add('全局变量', () => {
43.     // 该函数内模拟全局作用域
44.     let i,
45.       str = ''
46.     for (i = 0; i < 1000; i++) {
47.       str += i
48.     }
49.   })
50.   .add('局部变量', () => {
51.     for (let i = 0, str = ''; i < 1000; i++) {
52.       str += i
53.     }
54.   })
55. ...

复制代码

代码运行结果如下：

全局变量 x 158,697 ops/sec ±1.05% (87 runs sampled)
局部变量 x 160,697 ops/sec ±1.03% (90 runs sampled)
最快的是：局部变量

虽然说差异不大，但是我们可以感知全局变量比局部的性能更差一些。

通过原型新增方法

为构造函数增加实例对象需要的方法时，尽量使用原型的方式添加，而不是构造函数内部进行添加，我们可以看如下测试代码：

1. ...
2. suite
3.   .add('构造函数内部添加', () => {
4.     function Person() {
5.       this.sayMe = function () {
6.         return '一碗周'
7.       }
8.     }
9.     let p = new Person()
10.   })
11.   .add('原型方式内部添加', () => {
12.     function Person() {}
13.     Person.prototype.sayMe = function () {
14.       return '一碗周'
15.     }
16.     let p = new Person()
17.   })
18. ...

复制代码

代码运行结果如下：

构造函数内部添加 x 573,786 ops/sec ±1.97% (89 runs sampled)
原型方式内部添加 x 581,693 ops/sec ±3.46% (80 runs sampled)
最快的是：构造函数内部添加

避免闭包中的内存泄露

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，严重可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除 （即将局部变量重新赋值为null）。

避免使用属性访问方法

在JavaScript中的对象中，避免使用一些属性访问方法，这是因为JavaScript中的所有属性都是外部可见的。
示例代码如下：

1. ...
2. suite
3.   .add('使用属性访问方法', () => {
4.     function Person() {
5.       this.name = '一碗周'
6.       this.getName = function () {
7.         return '一碗周'
8.       }
9.     }
10.     let p = new Person()
11.     let n = p.getName()
12.   })
13.   .add('不使用属性访问方法', () => {
14.     function Person() {
15.       this.name = '一碗周'
16.     }
17.     let p = new Person()
18.     let n = p.name
19.   })
20. ...

复制代码

代码运行结果如下：

使用属性访问方法 x 406,682 ops/sec ±2.33% (82 runs sampled)
不使用属性访问方法 x 554,169 ops/sec ±2.03% (85 runs sampled)
最快的是：不使用属性访问方法

for循环优化

我们在使用for循环时，可以将有些必要的数据进行缓存，就比如arr.length这种属性，不需要每次判断都获取一下，从而优化我们的代码。
示例代码如下：

1. ...
2. suite
3.   .add('正序', () => {
4.     let arr = new Array(100)
5.     let str = ''
6.     for (let i = 0; i < arr.length; i++) {
7.       str += i
8.     }
9.   })
10.   .add('缓存', () => {
11.     let arr = new Array(100)
12.     let str = ''
13.     for (let i = arr.length; i; i--) {
14.       str += i
15.     }
16.   })
17.   .add('缓存的另一种写法', () => {
18.     let arr = new Array(100)
19.     let str = ''
20.     for (let i = 0, l = arr.length; i < l; i++) {
21.       str += i
22.     }
23.   })
24. ...

复制代码

代码运行结果如下：

正序 x 1,322,889 ops/sec ±1.36% (86 runs sampled)
缓存 x 1,356,696 ops/sec ±0.70% (92 runs sampled)
缓存的另一种写法 x 1,383,091 ops/sec ±0.70% (93 runs sampled)
最快的是：缓存的另一种写法

选择最优的循环方式

我们现在常用的循环有forEach、for和for...in循环，这几种那个是性能最优的呢，测试代码如下：

1. ...
2. suite
3.   .add('forEach', () => {
4.     let arr = new Array(100)
5.     let str = ''
6.     arr.forEach(i => {
7.       str += i
8.     })
9.   })
10.   .add('for...in', () => {
11.     let arr = new Array(100)
12.     let str = ''
13.     for (i in arr) {
14.       str += i
15.     }
16.   })
17.   .add('for', () => {
18.     let arr = new Array(100)
19.     let str = ''
20.     for (let i = 0, l = arr.length; i < l; i++) {
21.       str += i
22.     }
23.   })
24. ...

复制代码

代码运行结果如下：

forEach x 4,248,577 ops/sec ±0.89% (86 runs sampled)
for...in x 4,583,375 ops/sec ±1.15% (91 runs sampled)
for x 1,343,871 ops/sec ±1.91% (88 runs sampled)
最快的是：for...in

由运行结果可以看出我们可以尽量使用for...in或者forEach循环，减少使用for循环。

减少判断层级

减少判断层级就是减少一些if语句的嵌套，如果是一些必要的条件我们可以通过单层if结合return直接跳出函数的执行，关于优化前与优化后的代码执行比对如下所示：

1. ...
2. /***
3. 接收两类文件，zip 和 rar*
4. 压缩包的大小限制为 10 兆*
5. /
7. suite
8.   .add('嵌套写法', () => {
9.     function uploadFile(suffix, size) {
10.       // 允许上传的后缀名
11.       const suffixList = ['.zip', '.rar']
12.       const M = 1024*  1024
14.       if (suffixList.includes(suffix)) {
15.         if (size <= 10*  M) {
16.           return '下载成功'
17.         }
18.       }
19.     }
20.     uploadFile('.zip', 1*  1024*  1024)
21.   })
22.   .add('减少判断写法', () => {
23.     function uploadFile(suffix, size) {
24.       // 允许上传的后缀名
25.       const suffixList = ['.zip', '.rar']
26.       const M = 1024*  1024
27.       if (!suffixList.includes(suffix)) return
28.       if (size > 10*  M) return
29.       return '下载成功'
30.     }
31.     uploadFile('.zip', 1*  1024*  1024)
32.   })
33. ...

复制代码

代码运行结果如下：

嵌套写法 x 888,445,014 ops/sec ±2.48% (88 runs sampled)
减少判断写法 x 905,763,884 ops/sec ±1.35% (92 runs sampled)
最快的是：减少判断写法,嵌套写法

虽然说差距并不是很大，但是不适用嵌套的代码比普通代码更优一些。

减少作用域链查找层级

减少代码中作用域链的查找也是代码优化的一种方法，如下代码展示了两者的区别：

1. ...
2. suite
3.   .add('before', () => {
4.     var name = '一碗粥'
5.     function sayMe() {
6.       name = '一碗周'
7.       function print() {
8.         var age = 18
9.         return name + age
10.       }
11.       print()
12.     }
13.     sayMe()
14.   })
15.   .add('after', () => {
16.     var name = '一碗粥'
17.     function sayMe() {
18.       var name = '一碗周' // 形成局部作用域
19.       function print() {
20.         var age = 18
21.         return name + age
22.       }
23.       print()
24.     }
25.     sayMe()
26.   })
27. ...

复制代码

代码运行结果如下：

before x 15,509,793 ops/sec ±7.78% (76 runs sampled)
after x 17,930,066 ops/sec ±2.89% (83 runs sampled)
最快的是：after

上面代码只是为了展示区别，并没有实际意义。

减少数据读取次数

如果对象中的某个数据在一个代码块中使用两遍以上，这样的话将其进行缓存从而减少数据的读取次数来达到更优的一个性能，
测试代码如下：

1. ...
2. var userList = {
3.   one: {
4.     name: '一碗周',
5.     age: 18,
6.   },
7.   two: {
8.     name: '一碗粥',
9.     age: 18,
10.   },
11. }
12. suite
13.   .add('before', () => {
14.     function returnOneInfo() {
15.       userList.one.info = userList.one.name + userList.one.age
16.     }
17.     returnOneInfo()
18.   })
19.   .add('after', () => {
20.     function returnOneInfo() {
21.       let one = userList.one
22.       one.info = one.name + one.age
23.     }
24.     returnOneInfo()
25.   })
26. ...

复制代码

代码运行结果如下：

before x 222,553,199 ops/sec ±16.63% (26 runs sampled)
after x 177,894,903 ops/sec ±1.85% (88 runs sampled)
最快的是：before

字面量与构造式

凡是可以使用字面量方式声明的内容，绝对是不可以使用构造函数的方式声明的，两者在性能方面相差甚远，代码如下：

1. ...
2. suite
3.   .add('before', () => {
4.     var str = new String('string')
5.   })
6.   .add('after', () => {
7.     var str = 'string'
8.   })
9. ...

复制代码

代码运行结果如下：

before x 38,601,223 ops/sec ±1.16% (89 runs sampled)
after x 897,491,903 ops/sec ±0.92% (92 runs sampled)
最快的是：after

到此这篇关于总结分享10个JavaScript代码优化小tips的文章就介绍到这了,更多相关JavaScript优化tips内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！