JavaScript 性能优化1 学习笔记

文章内容输出来源：拉勾大前端高薪训练营

• JavaScript中的内存管理自动完成
• 执行引擎会使用不同的GC算法
• 算法工作的目的是为了实现内存空间良性循环
• Performance 工具检测内存变化
• Javascript 是单线程机制的解释型语言

1、内存管理

• 内存：由可读写单元组成，表示一片可操作的空间
• 管理：人为的去操作一片空间的申请、使用和释放
• 内存管理：开发者主动申请空间、使用空间、释放空间
• 管理流程：申请->使用->释放

//申请
let obj = {};
//使用 
obj.name = 'zs';
//释放
obj = null;

2、JavaScript中的垃圾回收:

找到垃圾，然后让JavaScript 执行引擎来进行空间的释放和回收。
JavaScript中的垃圾：

• JavaScript中内存管理是自动的
• 对象不再被引用时是垃圾
• 对象不能从根上访问到时是垃圾

JavaScript中的可达对象

• 可以访问到的对象就是可达对象（引用、作用域链）
• 可达的标准就是从根出发是否能够被找到
• JavaScript中的根就可以理解为是全局变量对象

3、GC算法

• GC就是垃圾回收机制的简写
• GC可以找到内存中的垃圾 并释放 和 回收空间

3.1、GC中的垃圾是什么

• 程序中不再需要的对象
• 程序中不能再访问到的对象

//程序中不再需要的对象
function func(){
    name = 'lg'; //垃圾
    return `${name} is a coder`
}
func();

//程序中不能再访问到的对象
function func(){
    const name = 'lg'; //垃圾
    return `${name} is a coder`
}
func();

GC算法是什么：

• GC是一种机制，垃圾回收器完成具体的工作
• 工作的内容就是查找垃圾释放空间、回收空间
• 算法就是工作时查找和回收所遵循的规则

常见GC算法：

• 引用计数
• 标记清除
• 标记整理
• 分代回收

4、常见GC算法的实现原理

4.1、引用计数算法实现原理

引用计数算法

• 核心思想：设置引用数，判断当前引用数是否为0
• 实现步骤：引用计数器 => 引用关系改变时修改引用数字 => 引用数字为0时立即回收

const user1 = { age: 11}
const user2 = { age: 22}
const user3 = { age: 33}
const nameList = [user1.age, user2.age, user3.age];
//user1、user2、user3 都在被引用，不会被回收
function fn(){
    const num1 = 1;
    const num2 = 2;
}
fn();//num1、num2 不能访问到，是垃圾 会被回收

引用计数算法优点

• 发现垃圾时立即回收
• 最大限度减少程序暂停

引用计数算法缺点

• 无法回收循环引用的对象
• 时间开销大
  （当前的引用计数要维护一个数值变化，要时刻监控当前对象的引用数值是否需要修改，数值修改本身也需要时间）

function fn(){
    const obj1 = {};
    const obj2 = {}
    
    obj1.name = obj2
    obj2.name = obj1;
    
    return  'test';
}
fn();

4.2、标记清除算法实现原理

标记清除算法

• 核心思想：分标记和清除两个阶段完成
• 实现步骤：遍历所有对；象找标记活动对象 => 遍历所有对象清除没有标记对象 => 回收相应的空间
  会递归查找，清除没有标记的对象的同时会清除第一次的标记

4.3、标记整理算法实现原理

标记整理算法

• 标记整理可以看做是标记清除的增强
• 标记阶段的操作和标记清除一致
• 清除阶段会先执行整理，移动对象位置

4.4、常见GC算法总结

算法名称	算法的优点	算法的缺点
引用计数	可以即时回收垃圾对象 减少程序卡顿时间	无法回收循环引的对象 资源消耗较大
标记清除	可以回收循环引用的对象	容易产生碎片化空间，浪费空间 不会立即回收垃圾对象
标记整理	减少碎片化空间	不会立即回收垃圾对象 移动对象位置，回收效率慢

5、认识 V8

5.1、认识 V8

• V8 是一款主流的 JavaScript 执行引擎
• V8 采用即时编译
• V8 内存设限（64位操作系统1.5G，32位操作系统800M）

内存设置上线的原因：（64位操作系统1.5G，32位操作系统800M）：

• V8 本身为浏览器而设置，所以针对外部应用来说这个大小足够使用了
• 由它内部的垃圾回收机制来决定的，如果内存太大，回收时间会超过用户的感知

5.2、V8垃圾回收策略

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

graph TD
    A[V8内存空间] --> B[新生代对象存储]
    A --> C[老生代对象存储]
    B --> D[采用具体的GC算法]
    C --> E[采用具体的算法]

5.3、V8中常用的 GC 算法

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

5.4、V8如何回收新生代对象

V8内存分配：

• V8 内存空间一分为二
• 小空间用于存储新生代对象 ( 32M | 16M )
• 新生代指的是存活时间较短的对象
  (例如：局部作用域中的变量)

新生代对象回收实现：

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

回收细节说明：

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

5.5、V8如何回收老生代对象

老生代对象说明：

• 老生代对象存放在右侧老生代区域
• 64位操作系统1.4G，32位操作系统700M
• 老生代对象就是指存活时间较长的对象
  （例如：全局中的变量程序执行完成之后回收）

老生代对象回收实现：

• 主要采用标记清除、标记整理、增量标记算法
• 首先使用标记清除完成垃圾空间的回收
• 采用标记整理进行空间优化（晋升的时候，老生代空间不足）
• 采用增量标记进行效率优化

细节对比：

• 新生代区域垃圾回收使用空间换时间（空间小，采用的是复制算法）
• 老生代区域垃圾回收不适合复制算法（空间大）

不同代对象采用不同GC算法完成回收操作：

• 新生代：复制和标记整理算法
• 老生代：标记清除、标记整理和增量标记算法

标记增量如何优化垃圾回收：垃圾回收与程序执行交替执行

5.6、V8垃圾回收总结

• V8 是一款主流的 JavaScript 执行引擎
• V8 内存设置上线
• V8 采用基于分代回收思想实现垃圾回收
• V8 内存分为新生代和老生代（存储的空间和数据类型是不同的）
• V8 垃圾回收常见的 GC算法

6、Performance工具介绍

为什么使用performance：

• GC的目的是为了实现内存空间的良性循环
• 良性循环的基石是内存的合理使用
• 时刻关注才能确定是否合理
• Performance 提供多种监控方式
  通过 Performance 时刻监控内存

6.1、Performance工具使用步骤

• 打开浏览器（chrome）输入目标网址
• 进入开发人员工具面板，选择性能
• 开启录制功能，访问具体界面
• 执行用户行为，一段时间后停止录制
• 分析界面中记录的内存消息

6.2、内存问题的体现

内存问题的外在表现：

• 页面出现延迟加载或经常性暂停
• 页面持续性出现糟糕的性能
• 页面的性能随时间延长越来越差

6.3、监控内存的几种方式

界定内存问题的标准：

• 内存泄漏：内存使用持续升高
• 内存膨胀：在多数设备商都存在性能问题
• 频繁垃圾回收：通过内存变化图进行分析

监控内存的几种方式：

• 浏览器的任务管理器：以数值的方式体现内存变化
• Timeline时序图记录：以时间点的方式呈现内存走势，开发者工具中性能
• 堆快照查找分离DOM：有针对的查找分离DOM的存在，开发者工具中的内存
• 判断是否存在频繁的垃圾回收：借助工具分析

堆快照留存JS堆照片
什么是分离DOM：

• 界面元素存活再DOM树上
• 垃圾对象时的DOM节点
• 分离状态的DOM节点

//html
Add

//js
var tmpEle
function fn(){
    var ul = document.createElement('ul');
    for(var i = 0; i<10; i++){
        var li = document.createElelment('li');
        ul.appendChild(li)
    }
   tmpEle = ul; //分离dom
   
   // tmpEle = null; //清空
}
document.getElementById('btn').addEventListener('click', fn);
//在 开发者工具 -> 性能中 通过快照查看，配置文件->获取快照

为什么确定频繁垃圾回收：

• GC工作时应用程序是停止的
• 频繁且过长的GC会导致应用假死
• 用户使用中感知应用卡顿

如何确定频繁垃圾回收：

• Timeline 中频繁的上升下降
• 任务管理器中数据频繁的增加减少

7、代码优化介绍

代码为什么需要优化：

• web 应用日益丰富，用户体验至关重要，前端性能备受关注
• 实现相同结果下，哪种类型 JavaScript 代码具有更高性能
• 高性能的背后是数据快速存取，也是优秀内存管理的体现

如何精准测试JavaScript性能：

• 本质上就是采集大量的执行样本进行数学统计和分析
• 使用基于 Benchmark.js 的 http://jsperf.com/完成
• 上面的链接打不开了，可以使用：https://jsbench.me/

7.1、慎用全局变量

• 全局变量定义再全局执行上下文，是所有作用域链的顶端
• 全局执行上下文一直存在于上下文执行栈，直到程序退出
• 如果某个局部作用域出现了同名变量则会遮蔽或污染全局

全局变量特点

• 全局变量挂载再 window 下
• 全局变量至少有一个引用计数
• 全局变量存活更久，但持续占用内存

//全局变量写法
var i, str = ''
for(i = 0; i < 10; i++){
    str += i
}

//局部变量写法
for(let i = 0, str = ''; i < 10; i++){
    str += i
}

明确数据作用域的情况下，尽量用局部

7.2、缓存全局变量

将使用中无法避免的全局变量缓存代局部

7.3、通过原型新增方法

在原型对象上新增实例对象需要的方法

//this方式添加方法:
var fn1 = function(){
    this.foo = function(){
        console.log(1111);
    }
}
let f1 = new fn1();

//原型对象方式添加方法
var fn2 = function() {}
fn2.prototype.foo = function(){
    console.log(1111);
}
let f2 = new fn2();

7.4、避开闭包陷阱

闭包特点

• 外部具有指向内部的引用
• 在“外”部作用域访问“内”部作用域的数据

function foo(){
    var name = 'zs';
    function fn(){
        console.log(name);
    }
    return fn;
}
var a = foo();
a();

关于闭包：

• 闭包是一种强大的语法
• 闭包使用不当很容易出现内存泄漏
• 不要为了闭包而闭包

//html
add

//js, el不能回收，存在内存泄漏
function foo(){
    var el = document.getElementById('btn');
    el.onclick = function(){
        console.log(el.id);
    }
    //可以解决内存泄漏
    el = null;
}
foo();

7.5、避免属性访问方法使用

Javascript 中的面向对象

• JS不需要属性的访问方法，所有属性都是外部可见的
• 使用属性访问方法只会增加一层重定义，没有访问的控制力

//通过成员属性的访问函数访问
funciton Person(){
    this.name = 'zs';
    this.age = 18;
    this.getAge = function(){
        return this.age
    }
}
const p1 = new Person();
const a = p1.getAge();

//通过属性名称访问：性能更优
funciton Person(){
    this.name = 'zs';
    this.age = 18;
}
const p2 = new Person();
const a = p2.age;

7.6、For循环优化

var aBtns = document.getElementsByClassName('btn');
for(var i =0; i < aBtns.length; i++){
    console.log(i);
}
//优化写法
for(var i =0, len = aBtns.length; i < len; i++){
    console.log(i);
}

7.7、采用最优循环方式

var arrList = new Array(1, 2, 3, 4, 5);
arrList.forEach(function(item){
    console.log(item)
});

for(var i = arrList.length; i; i--){
    console.log(arrList[i]);
}

for(var i in arrList){
    console.log(arrList[i])
}
//性能 forEach > 优化后的for > for...in

7.8、文档碎片化节点添加优化

节点的添加操作必然会有回流和重绘

for(var i = 0; i < 10; i++){
    var oP = document.createElement('p');
    oP.innerHTML = i;
    document.body.appendChild(oP);
}

//优化后
const fragEle = document.createDocumentFragment();
for(var i = 0; i < 10; i++){
    var oP = document.createElement('p');
    oP.innerHTML = i;
    fragEle.appendChild(oP);
}
document.body.appendChild(fragEle);

7.9、克隆优化节点操作

for(var i = 0; i < 3; i++){
    var oP = document.createElement('p');
    oP.innerHTML = i;
    document.body.appendChild(oP);
}

//优化后
const oldP = document.getElementById('box1');
for(var i = 0; i < 3; i++){
    var newP = oldP.cloneNode(false);
    newP.innerHTML = i;
    document.body.appendChild(newP);
}

7.10、直接量替换 Object操作

var a1 = new Array(3);
a1[0] = 1;
a1[1] = 2;
a1[2] = 3;

//优化之后
var a2 = [1, 2, 3]

7.11、避免全局查找

全局查找相关

• 目标变量不存在于当前作用内，通过作用域链向上查找
• 减少全局查找降低实践消耗
• 减少不必要的全局变量定义
• 全局变量数据局部化