JS性能优化相关知识点摘要

295 阅读7分钟

核心是: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垃圾回收策略

  • 采用分代回收
  • 内存分为新生代老生代
  • 针对不同的对象采用不同的算法

image.png

2、V8中常用的GC算法

  • 分代回收
  • 空间复制
  • 标记清除
  • 标记整理
  • 标记增量

3、V8回收新生代对象

内存分配 image.png

  • V8内存空间一分为二
  • 小空间用于存储新生代对象(32M | 16M(32位操作系统))
  • 新生代指的是存活时间较短的对象

新生代对象回收实现

  • 回收过程采用复制算法+标记整理
  • 新生代内存区分位两个等大小空间
  • 使用空间为From,空闲空间为To
  • 活动对象存储于From空间
  • 标记整理后将活动对象拷贝至To
  • From与To交换空间完成释放

拷贝过程中可能出现晋升
晋升就是将新生代对象移动至老生代
一轮GC还存活的新生代需要晋升
To空间使用率超过25%,将此次活动对象存放至老生代

老生代对象的回收实现

  • 老年代对象存放在右侧老生代区域
  • 64位操作系统是1.4G,32位操作系统是700M
  • 老生代对象指的是存活时间较长的对象
  • 只要采用标记清除、标记整理、增量标记算法
  • 首先使用标记清除完成垃圾空间回收
  • 采用标记整理进行空间优化
  • 采用增量标记进行效率优化

image.png

细节对比

  • 新生代区域垃圾回收使用空间换时间
  • 老生代区域垃圾回收不适合复制算法

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)

image.png

减少判断层级

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身份")
    }
}

减少作用域链查找层级