Javascript 性能优化 2

理解 堆栈中 JS 执行过程

通过上图可以很明确的知道，在执行左侧代码时：

1. 在存储空间内开辟一个执行栈
2. 其中对应的顺序为 EC(全局)执行上下文储存 基本类型值 a ，由于函数为引用类型，所以在堆上开辟地址为：AB1的储存空间，存放foo函数
3. 遇到fn的执行，于是开辟一个新的EC（foo）上下文 其中会存储对应的参数和变量，有涉及 baz函数的定义，于是开启新的地址为: AB2的存储空间，并返回BAZ
4. 在fn(3)调用时，开启新的执行上下文 EC(baz) 并得出相应的 结果为 7
5. 在代码执行完成，EC（baz）由于没有对应的调用，于是会被回收（出栈）

减少判断层级

// 代码模块 1
function doSomething (part, chapter) {
  const parts = ['ES2016', '工程化', 'Vue', 'React', 'Node']
  if (part) {
    if (parts.includes(part)) {
      console.log('属于当前课程')
      if (chapter > 5) {
        console.log('您需要提供 VIP 身份')
      }
    }
  } else {
    console.log('请确认模块信息')
  }
}

doSomething('ES2016', 6)

// 代码模块 2
function doSomething (part, chapter) {
  const parts = ['ES2016', '工程化', 'Vue', 'React', 'Node']
  if (!part) return console.log('请确认模块信息')
  if (!parts.includes(part)) return console.log('属于当前课程')
  if (chapter > 5) console.log('您需要提供 VIP 身份')
}

doSomething('ES2016', 6)

• 比较代码模块1，代码模块2。很容易发现代码2的，逻辑思路更加清晰，语句更简洁。在JSBench中比较，模块2的性能也是更高，因为不用多层嵌套的判断。
• 在书写判断条件时，可以采用反向判断的方式