这几天分享一下我看《高性能 JavaScript》的学习笔记,希望能对大家有所帮助。
在 JavaScript 中,有四种基本数据存储位置,分别是:
- 字面量 —— 字面量代表自身,不存储在特定位置。如字符串、数字、布尔值。
- 本地变量 —— 使用 var、let 和 const 定义的数据存储单元。
- 数组元素 —— 存储在数组对象内部,以数字为索引。
- 对象成员 —— 存储在对象内部,以字符串为索引。
这中数据存储位置中,字面量和本地变量存取性能消耗很小,而使用数组和对象消耗的性能会更高。
作用域
- 作用域链的变量查找有性能开销,查找得越深越耗性能。
- 将常用到的跨作用域变量存储(引用)到局部变量中,去访问局部变量。这样避免过多的跨作用域访问。
- 动态作用域会破坏浏览器获取数据的优化机制,所以只要必要时才使用动态作用域。
- 需要注意闭包存在性能隐患:1. 闭包的上下文不会在函数执行完成后销毁,占用内存。(可以使用
func = null
来释放闭包引用)2. 闭包的使用是一个频繁跨作用域访问的行为。所以是比较耗性能的。
对象原型
- 在访问对象属性中,访问对象实例属性的性能高于访问对象原型中的属性,因为查找的层级更浅。
- 原型链和作用域一样,查找属性越深越慢。
- 对象嵌套中,也是套的越深读写地越慢,如
foo.a.b.c
必然比foo.hi
慢。 - 避免多次查找同一个对象成员属性,可以定义新变量来引用对象成员属性(如果在 ES6 中使用解构很不错)。
var rect = { width: 100, height: 60 }
// bad
console.log(rect.width, rect.height, rect.width, rect.height)
// good
var width = rect.width
var height = rect.height
console.log(width, height, width, height)
// es6
var { width, height } = rect
console.log(width, height, width, height)
小结
总的来说,数据存储方面其实知识点并不多,主要是如何提高数据存取性能。
- 关键的是将常用的对象、数组、跨域变量保存到局部变量中来使用,因为局部变量访问速度最快。
- 对象属性和方法在原型链的位置越深,访问速度越慢。可以使用局部变量来引用。