JavaScript|JavaScript 性能优化—学习笔记 JavaScript性能优化

JavaScript内存管理

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

JavaScript中的垃圾回收

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

JavaScript中的可达对象

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

JavaScript中的引用和可达
GC算法

垃圾回收机制的简写
可以找到内存中的来及，并释放和回收空间

GC里面的垃圾是什么

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

GC算法是什么

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

常见的GC算法引用计数算法

核心思想：设置引用数，判断当前引用数是否为0
引用计数器
引用关系发生改变时修改引用数字
引用数字为0时立即回收

引用计数算法优点

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

引用计数算法缺点

无法回收循环引用的对象
时间开销大

标记清除算法

核心思想:分标记和清除二个阶段完成
遍历所有对象找标记活动对象
遍历所有对象清楚没有标记对象
回收相应空间

标记算法优缺点优点：解决循环引用不能回收的问题
缺点：空间碎片化，不能让空间得到最大化的使用
标记整理算法

标记整理可以看作是标记清除的增强
标记阶段的操作和标记清除一致
清除阶段先执行整理，移动对象位置
常见GC算法的总结

认识V8

V8是一款主流的javaScript执行引擎
V8采用即时编译
V8内存设限

V8垃圾回收策略

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

V8中常见的GC算法

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

V8如何回收新生代对象
V8内存分配

V8内存空间一分为二
小空间用于存储新生代对象
新生代指的是存活时间比较短的对象

新生代对象回收实现

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

老生代对象回收实现

主要采用标记清除、标记整理、增量标记算法
首先使用标记清除完成垃圾空间的回收
采用标记整理进行空间优化

新生代对象回收和老生代对象回收的对比

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

Performance使用步骤

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

内存问题的外在表现

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

界定内存问题的标准

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

监控内存的几种方式

浏览器任务管理器
Timeline时序图记录
堆快照查找分离Dom
判断是否存在频繁的垃圾回收

TimeLine记录内存
慎用全局变量
为什么要慎用

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

缓存全局变量
将使用中无法避免的全局变量缓存到局部
通过原型新增方法
在原型对象上新增实例对象需要的方法避开闭包陷阱闭包的特点 【JavaScript|JavaScript 性能优化—学习笔记】外部具有指向内部的引用
在"外"部作用域访问"内"部作用的数据
关于闭包闭包是一种强大的语法
闭包使用不当很容易出现内存泄漏

function foo() { var el = document.getElementById('btn'); el.click = function () { el.onclick = function () { console.log(el.id) } } el = null; } foo();

避免属性访问方法使用

function Person() { this.nama = 'icoder' this.age = 18 this.getAge = function () { return this.age } } const p1 = new Person() const a = p1.getAge; // 效率高 function Person() { this.nama = 'icoder' this.age = 18 } const p2 = new Person(); const b = p2.age;

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); }

采用最优循环方式

var arrList = new Array(1, 2, 3, 4, 5); // 效率最高 arrList.forEach((item => { console.log(item); })) // 其次 for (let i = 0; i < arrList.length；i++) { console.log(i); } // 最差 for (let item in arrList) { console.log(arrList[item]); }

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

for (let i = 0; i < 10; i++) { let oP = document.createElement('p'); oP.innerHTML = i; document.body.appendChild(oP); } // 效率高 const fragEle = document.createDocumentFragment; for (let i = 0; i < 10; i++) { let oP = document.createElement('p'); oP.innerHTML = i; fragEle.appendChild(oP); } document.body.appendChild(fragEle)

克隆优化节点操作

for (let i = 0; i < 3; i++) { let oP = document.createElement('p'); oP.innerHTML = i; document.body.appendChild(oP); } // 效率高 const oldP = document.getElementById('box1'); ; for (let i = 0; i < 3; i++) { let newP = oldP.cloneNode(false); newP.innerHTML = i; document.body.appendChild(newP); }

直接两替换new Object