核心是:js语言的优化
- 内存管理
- 垃圾回收&GC算法
- V8引擎的垃圾回收
- performance监控
- 代码优化实例
一、JS内存管理
内存: 由可读写单元组成,表示一片可操作的空间
管理: 认为地去操作一片空间的申请、使用和释放
内存管理: 开发者主动申请空间、使用空间、释放空间
管理流程: 申请-使用-释放
js中的内存管理:
- 申请
let obj = {}
- 使用
obj.name = '1'
- 释放
obj = null
JS中的垃圾回收
- js的内存管理是自动的
- 对象不再被引用时是垃圾
- 对象不能从根上访问时是垃圾
- js有自己的垃圾回收机制
JS中的可达对象
- 可以访问到的对象就是可达对象
- 可达标准就是从根上触发能否被找到
- js中的根可以理解为全局变量对象
GC算法
- GC就是垃圾回收机制的简称
- GC可以找到内存中的垃圾、并释放和回收空间
- 垃圾:程序不再需要使用的垃圾 && 程序中不能再访问到的对象
GC是一种机制,垃圾回收器完成具体的工作 工作的内容就是查找垃圾释放空间、回收空间 算法就是工作时查找和回收所遵循的规则
常见GC算法
- 引用计数
- 标记清除
- 标记整理
- 分代回收
二、引用计数算法
设置引用数,判断当前引用数是否为0
引用计数算法的优缺点
- 可以及时回收垃圾对象
- 最大限度减少程序的卡顿时间
- 无法回收循环引用的对象
- 资源消耗较大
//循环引用示例
function fn1(){
const obj1 = {}
const obj2 = {}
obj1.name = obj2
obj2.name = obj1
return '11'
}
fn1()
//虽然在全局作用域下,找不到obj1和obj2这两个对象,但是,当删除obj1的时候,会提示obj2.name正指向obj1.
//从而导致不能被删除
//这就是对象的循环引用
三、标记清除算法
将整个垃圾回收分为标记和清除两个阶段完成
遍历所有对象,找标记活动对象 遍历所有对象清除没有标记的对象 回收相应的空间 优缺点
- 可以解决对象循环引用的回收操作
- 空间碎片化。当前所回收的垃圾对象在地址上是不连续的,空间不能得到最大化的使用。
- 不能立即回收垃圾对象
- 回收的时候程序停止工作
四、标记整理算法
标记整理可以看成是标记清除的增强
- 标记阶段的操作和标记清除一样
- 清除阶段会先执行整理,以动对象的位置,使其在地址上连续。
优缺点
- 减少空间碎片化
- 不会立即回收垃圾对象
五、 V8引擎
- V8是主流的JS执行引擎
- V8采用及时编译
- V8内存设限(64位不超过1.5G,32位操作系统不超过800M)
1、V8垃圾回收策略
- 采用分代回收
- 内存分为新生代和老生代
- 针对不同的对象采用不同的算法
2、V8中常用的GC算法
- 分代回收
- 空间复制
- 标记清除
- 标记整理
- 标记增量
3、V8回收新生代对象
内存分配
- V8内存空间一分为二
- 小空间用于存储新生代对象(32M | 16M(32位操作系统))
- 新生代指的是存活时间较短的对象
新生代对象回收实现
- 回收过程采用复制算法+标记整理
- 新生代内存区分位两个等大小空间
- 使用空间为From,空闲空间为To
- 活动对象存储于From空间
- 标记整理后将活动对象拷贝至To
- From与To交换空间完成释放
拷贝过程中可能出现晋升
晋升就是将新生代对象移动至老生代
一轮GC还存活的新生代需要晋升
To空间使用率超过25%,将此次活动对象存放至老生代
老生代对象的回收实现
- 老年代对象存放在右侧老生代区域
- 64位操作系统是1.4G,32位操作系统是700M
- 老生代对象指的是存活时间较长的对象
- 只要采用标记清除、标记整理、增量标记算法
- 首先使用标记清除完成垃圾空间回收
- 采用标记整理进行空间优化
- 采用增量标记进行效率优化
细节对比
- 新生代区域垃圾回收使用空间换时间
- 老生代区域垃圾回收不适合复制算法
V8总结
V8是一款主流的js执行引擎
V8内存设置上限
V8基于分代回收思想实现垃圾回收
V8内存分为新生代和老生代
V8垃圾回收常见的GC算法
六、 Performance
GC的目的是为了实现内存空间的良性循环
良性循环的基石是合理使用
时刻关注才能确定是否合理
Performance提供多种监控方式
1、内存问题的外在表现
- 页面出现延迟加载活经常性暂停(频繁的GC操作)
- 页面持续性出现糟糕的性能(内存膨胀)
- 页面饿性能随着时间延长越来越差(内存泄漏)
2、内存监控的方式
- 内存泄露:内存使用持续升高
- 内存膨胀:在多数设备上都存在性能问题
- 频繁的垃圾回收:通过内存变化图进行分析
- 浏览器任务管理器
- TimeLine时序图记录
- 对快照查找分离DOM
- 判断是否存在频繁的垃圾回收
3、Timeline记录内存
4、对快照查找分离DOM
什么是分离DOM
- 界面元素存活在DOM树上
- 垃圾对象时的DOM节点
- 分离状态的DOM节点
内存--->对快照--->deta
5、判断是否存在频繁GC
why?
- GC工作时程序时停止的
- 频繁且过长的GC会导致应用假死
- 用户使用中感觉卡顿现象严重
- Timeline中频繁的上升下降
- 任务管理器中数据频繁的增加减小
五、代码优化
使用基于Benchmark.js的 jsperf.com/ 进行在线代码行呢个检测
1、全局变量的使用
- 全局变量定义在全局,在所有作用域链的顶端,查找需要一定的时间消耗,降低了代码的执行次效率
- 全局执行上下文是一直存在于执行栈中的,GC工作不会当成垃圾对象进行回收,占用过多内存
- 如果某个作用域出现了同名变量则会遮蔽或者污染全局
2、缓存全局变量
let obj = document
obj.getElementById('id')
3、通过原型对象添加附加方法
4、避开闭包陷阱
闭包的特点
- 外部具有指向内部的引用
- 在"外部"作用域访问"内部"作用域的数据
function foo(){
var name = 'lg'
function fn(){
console.log(name)
}
return fn
}
var a = foo()
a()
闭包使用不当很容易出现内存泄漏
<button id="btn">add</button>
<script>
function foo(){
var el = document.getElementById('btn')
el.onclick = function(){
console.log(el.id)
}
el = null//如果不添加这行代码,当html将这个元素删除,btn这个元素还是被引用,不会被垃圾回收机制清除,造成内存泄漏
}
foo()
</script>
5、避免属性访问方法的使用
- JS不需要属性的访问方法,所有属性都是外部可见的
- 使用属性访问方法只会增加一层重定义,没有访问的控制力
function Person(){
this.age = 'ii'
this.age = 18
this.getAge = function(){
return this.age
}
}
const p1 = new Person()
const a = p1.getAge()
const p2 = new Person()
const b = p1.age
6、For循环优化
const aBtns = documwnt.getElementsByClass('btn');
for(vavr i = 0; i < aBtns.length; i++){
console.log(i)
}
for(var i = 0, len = aBtns.length; i<len; i++){
console.log(i)
}
最有循环方案
//首选
var arrList new Array(1,2,3,4,5)
arrList.forEach(function(item){
console.log(item)
})
for(var i = 0,len=arrList;i<len;i++){
console.log(arrList[i])
}
for(var i in arrList){
console.log(arrList[i])
}
7、文档碎片优化节点添加
const fragEle = document.createDocumentFragment()
for(var i = 0; i<10; i++){
var oP = document.createElement('p')
oP.innerHTML=i
frageEle.appendChild(oP)
}
document.body.appendChild(fragEle)
8、克隆方法添加节点
9、直接量替换new Object
var a = [1,2,3]
var a1 = new Array(3)
a1[0]=1
a1[1]=2
a1[2]=3
七、JSBench使用
jsbench.me 堆栈中的js执行过程
let a = 10
function foo(b){
let a = 2
function baz(c){
console.log(a+b+c)
}
return baz
}
let fn = foo(2)
fn(3)
减少判断层级
function do(part,chapter){
const parts = ['es2016','工程化','vue','react']
if(part){
if(parts.includes(part)){
console.log("属于当前前端课程")
if(chapter>5){
console.log("需要提供VIP身份")
}
}
}else{
console.log("请确认模块信息")
}
}
do('es2016',6);
function do(part,chapter){
const parts = ['es2016','工程化','vue','react']
if(!part){
console.log("请确认模块信息")
return
}
if(!parts.includes(part)) return
console.log("属于当前前端课程")
if(chapter>5){
console.log("需要提供VIP身份")
}
}
减少作用域链查找层级