最近参加拉勾教育大前端高薪训练营，开始对前端知识体系进行一个系统的扩展跟学习，通过每天定期的学习，对一些不常使用的知识点进行了了解和补充，同时对已经使用过的知识点温故而知新
在此记录学习笔记，并根据学习进度定时跟新
内存管理
由开发者主动申请、使用、释放内存空间
JavaScript中的内存管理是自动的
- 申请内存空间
- JavaScript中没有提供内存空间申请的API
- 当定义一个变量，变量被声明赋值时，系统自动分配相应的内存空间
- 使用内存空间
- 对变量进行修改赋值等操作
- 释放内存空间
- JavaScript中没有提供内存空间释放的API
- 手动将变量赋值为null，使内存空间不再被变量所引用，内存将在下次垃圾回收过程中被释放
垃圾回收
- 什么是JavaScript中的垃圾？
- 对象不再被引用时，是垃圾
- 对象不能从根上被访问到时，是垃圾
- 可达对象
- 可以访问到的对象，即为可达对象
- 可达的标准是从根出发能否被访问到
- JavaScript中的根可以理解为全局变量对象
GC算法介绍
GC是垃圾回收机制的缩写
GC可以找到内存中的垃圾，并释放和回收内存空间
- GC的垃圾是什么
- 程序不再使用的对象
- 程序不能再访问到的对象
- 常见GC算法
- 引用计数
- 标记清除
- 标记整理
- 分代回收
引用计数算法
核心思想是，设置引用数，判断当前引用数是否为0，为0则进行垃圾回收
引用关系发生改变时，引用计数器修改引用数
- 优点
- 发现垃圾立即回收
- 最大限度减少程序暂停
- 缺点
- 无法回收循环引用的对象（引用计数不为0）
- 资源开销大
标记清除算法
核心思想是，分为标记和清除两个阶段
先遍历所有对象，找到活动对象（可达可访问）进行标记
再遍历所有对象，回收未被标记的对象，并清除已被标记的对象的标记
- 优点
- 可以回收循环引用对象（不可达对象不会被标记）
- 缺点
- 内存空间碎片化（内存地址不连续），浪费空间
标记整理算法
标记整理算法是标记清除算法的增强
标记阶段与标记清除算法相同
清除阶段会先进行整理操作，移动对象位置，使内存地址连续
V8引擎
V8是一款主流JavaScript执行引擎
采用即时编译
内存设有上限
- V8垃圾回收策略
- 采用分代回收思想，将内存分为新生代、老生代，针对不同对象采用不同算法
- V8中常用的GC算法
- 分代回收
- 空间复制
- 标记清除
- 标记整理
- 增量增量
- V8内存分配
- 内存空间分为两个部分
- 小空间（64位系统32M|32位系统16M）用于存放新生代对象（存活时间较短的对象）
- 大空间（64位系统1.4G|32位系统700M）用于存放老生代对象（存活时间较长的对象，例如全局对象下存放的对象，以及闭包中存放的对象等）
- 新生代对象回收
- 采用空间复制 + 标记整理算法
- 将新生代内存区分为大小相等的两个空间，使用空间为From，空闲空间为To
- 触发GC时，使用标记整理算法对From空间进行标记，并将活动对象拷贝到To空间
- 回收释放From空间，并与To空间进行互换
- 新生代对象从From空间拷贝到To空间过程中可能出现晋升操作（将新生代对象移动至老生代对象存储区域）
- 一轮GC后还存活的新生代对象将晋升
- To空间使用率超过25%时
- 老生代对象回收
- 采用标记清除、标记整理、增量标记算法
- 先使用标记清除完成垃圾空间回收（回收速度快）
- 当出现晋升时，如果空间不足，会使用标记整理算法进行空间优化
- 采用增量标记进行效率优化
- 垃圾回收会阻塞JavaScript程序代码执行
- 将垃圾回收的对象进行分段，使垃圾回收过程与程序代码执行交替进行，避免需要回收的对象较多时（上限1.5G，回收只需1秒）长时间阻塞程序执行
- 新生代回收 vs 老生代回收
- 新生代空间小，使用空间换时间（空间复制算法）
- 老生代空间大，不适合使用空间复制算法
Performance工具介绍
浏览器中查看web程序执行性能的辅助工具，提供多种监控方式
- 使用方式
- 打开浏览器，输入目标网址
- 打开开发人员工具，进入Performance工具选项页面，点击录制
- 访问目标网址，进行用户操作
- 停止录制
- 查看性能监控信息
监控内存的几种方式
- 浏览器任务管理器
- 快捷键Shift + Esc (Chrome) 查看JavaScript内存使用列
- Timeline时序图记录
- Performance工具中录制查看
- 堆快照查找分离DOM
- 什么是分离DOM？
- 脱离DOM树，未被代码引用的DOM为垃圾，会被回收，仍被代码引用的DOM，即为分离DOM
- 使用浏览器开发者选项中的内存工具Memory，获取堆快照Heap Snapshot
- 过滤关键字，查找Detached，结果中的Detached HTML**Element，即为分离DOM
- 什么是分离DOM？
- 判断是否存在频繁垃圾回收
- 任务管理器或Timeline中查看内存是否频繁变化
代码优化
-
使用基于benchmark.js的jsperf来评估JavaScript代码的性能
-
慎用全局变量
- 全局对象定义在全局上下文，一直存在与全局上下文执行栈，直到程序退出才会释放
- 局部作用域出现同名变量容易出现变量污染
- 使用局部变量的代码，性能要优于使用全局变量的代码
-
缓存全局变量
- 缓存全局变量，再使用缓存的变量进行代码操作，性能要优于直接使用全局对量，但性能差距非常小
-
通过原型对象添加附加方法
- 构造函数中添加方法，每个实例对象中都会创建一个相同的方法，占用内存
- 构造函数原型对象上添加方法，每个实例共享一个方法，性能更好
-
避开闭包陷阱
-
闭包在外部作用域访问内部作用域的数据，具有指向内部的引用
-
闭包外层函数调用完成后，内部函数及变量仍被引用，未被释放，容易引起内存泄露
-
闭包使用完成后，手动将引用清空（赋值为null）
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">hello</button> <script> // function foo() { // let btn = document.getElementById('btn') // btn.onclick = function() { // console.log(btn.id) // } // } // foo() function foo() { let btn = document.getElementById('btn') btn.onclick = function() { console.log(this.id) } btn = null } foo() </script> </body> </html>
-
-
避免属性访问方法使用
- JavaScript的面向对象的属性是直接对外暴露的，并不需要属性的访问方法（类似Java的getXXX、setXXX方法）
- 属性访问方法相当于在构造函数中添加实例方法
- 直接使用属性访问，在性能上，比使用属性访问方法来访问属性更好
-
For循环优化
-
对要遍历的数组的length进行提前获取并缓存
let array = [1, 2, 3, 4, 5] for (let i = 0, len = array.length; i < len; i++) { console.log(i) }
-
-
选择最优的循环方法
在数据量较大的情况下，执行效率排序
while > for > forEach > for...of > map > for...in
- for
- forEach
- 无法break或return中断
- for...of
- for...in
- map
- while
-
文档碎片（document fragment）优化节点添加
添加dom节点必然会产生回流和重绘，使用文档碎片，将多次节点添加统一成一次，可以减少回流reflow和重绘repaint
- 使用
document.createDocumentFragment创建文档碎片，并将要添加的节点append到文档碎片中，最后append到body
const fragment = document.createDocumentFragment() for (let i = 0; i < 10; i++) { fragment.append(document.createElement('div')) } document.body.append(fragment) - 使用
-
克隆优化节点添加
- 使用
element.cloneNode(false)通过克隆的方式来创建节点，比使用document.createEleemnt()性能好一些，但差距不是特别大
- 使用
-
直接字面量替换new Object
网友评论