阅读 144

Javascript 性能优化 2

理解 堆栈中 JS 执行过程

image.png 通过上图可以很明确的知道,在执行左侧代码时:

  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的性能也是更高,因为不用多层嵌套的判断。
  • 在书写判断条件时,可以采用反向判断的方式
文章分类
前端
文章标签