拉钩-JS 性能优化-总结篇

左手的ㄟ右手 2022-11-10 10:55 130阅读 0赞

基于之前写的俩篇做个总结  
[JS 性能优化][JS]  
[JS 性能优化2][JS _2]

# part1 #

## V8 ##

理解优化前需要了解V8。

### JavaScript中的垃圾回收 ###

*  JavaScript中的内存管理时自动的
 *  对象不再被引用时是垃圾
 *  对象不能从根上访问到时是垃圾（比如说语法代码错误无法找到这个对象）

### JavaScript中的可达对象 ###

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

### GC算法介绍(注意是GC算法，V8的下面说) ###

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

#### 引用计数 ####

原理  
所谓的引用计数法就是给每个对象一个引用计数器，每当有一个地方引用它时，计数器就会加1；当引用失效时，计数器的值就会减1；任何时刻计数器的值为0的对象就是不可能再被使用的（立即回收）。  
![在这里插入图片描述][20210318165625171.png]

#### 标记清除 ####

**原理**  
**因为原理更简单，解决问题多，V8中大量使用此算法。**![在这里插入图片描述][20210318164749203.png]

#### 标记清除算法优缺点 ####

![在这里插入图片描述][20210318165548916.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]

#### 标记整理 ####

原理  
和标记清除算法一样会在V8中大量使用。

*  标记整理可以看作是标记清除的增强
 *  标记阶段的操作和标记清除一致
 *  清除阶段会先执行整理，移动对象位置（使得地址连续）  
    ![在这里插入图片描述][20210318165511114.png]

#### 分代回收 ####

V8垃圾回收策略

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

V8中常用的GC算法

1.  分代回收
2.  空间复制
3.  标记清除
4.  标记整理
5.  标记增量

--------------------

##### V8如何回收新生代对象 #####

*  V8空间一分为二
 *  小空间用于存新生代对象（64位中32M | 32位中16M）
 *  新生代是存活较短的对象（例如局部变量，函数完了就回收了，但全局变量需要等整个程序退出才回收）

##### 回收新生代对象实现原理 #####

*  回收过程采用复制算法和标记整理
 *  新生代内存一分为二from和to
 *  使用空间为from，空闲空间为to
 *  活动对象放入from中（form空间到达一定存储量后会标记整理拷贝到to，到to后释放form的空间，完成新生代回收操作。）
 *  标记整理后讲活动对象拷贝到to
 *  from to 交换空间完成释放。  
    ![在这里插入图片描述][2021031817024264.png]
 *  拷贝时某个使用空间老年代也有 这个时候就会晋升。
 *  一轮GC后还存活的
 *  To空间使用率超过25%的时候

#### 回收老生代对象实现 ####

*  主要采用标记清除，标记整理，增量标记算法
 *  1首先用标记清除回收空间
 *  2如果新生代移动到老生代空间时老生代空间不够的情况会进行标记整理（使空间连续）
 *  3采用增量标记进行效率优化（标记增量，是将整个垃圾回收操作分成多个小步，组合着去完成当前的整个回收，从而去替代之前一口气做完的垃圾回收操作，好处是让程序执行和垃圾回收去交替着完成，而不像以前那样程序运行的时候不做垃圾回收，做垃圾回收的时候不能运行程序。这样带来的时间消耗更加合理一些。）

##### V8 垃圾回收总结 #####

![在这里插入图片描述][2021031817003843.png]

## JS中的性能优化 ##

### 什么是分离DOM？ ###

当前的DOM节点从DOM树上脱离了，但 JS 代码中还有人在引用着，这种DOM就叫分离DOM。  
这种分离DOM 在界面上是看不见的，但是在内存里却占据着空间，所以在这种情况下就是内存泄漏。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]

[JS]: https://blog.csdn.net/weixin_45345105/article/details/109921684
[JS _2]: https://blog.csdn.net/weixin_45345105/article/details/109965210
[20210318165625171.png]: /images/20221022/f3dabebf7b98494287f1e36dcd4cf844.png
[20210318164749203.png]: /images/20221022/e3db814755d348bcb8f49cf900baaa02.png
[20210318165548916.png]: /images/20221022/e4b43ff835b146c197a11b12f418954a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210318165204595.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[20210318165511114.png]: https://img-blog.csdnimg.cn/20210318165511114.png
[2021031817024264.png]: https://img-blog.csdnimg.cn/2021031817024264.png
[2021031817003843.png]: https://img-blog.csdnimg.cn/2021031817003843.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210318170551126.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70