JS 垃圾回收 & 性能优化 & 代码优化

垃圾回收：

引用计数法

在该的机制下，内存中的每一个值都会对应一个引用计数。当垃圾收集器感知到某个值的引用计数为 0 时，就判断它 “没用” 了，随即这块内存就会被释放。

局限性：引用计数法无法区分循环引用场景下的 “垃圾”，将会造成内存泄漏(b.a=b a.b=a)

标记清除法

• 标记阶段：垃圾收集器会先找到根对象，在浏览器里，根对象是 Window；在 Node 里，根对象是 Global。

从根对象出发，垃圾收集器会扫描所有可以通过根对象触及的变量，这些对象会被标记为 “可抵达”。

• 清除阶段： 没有被标记为 “可抵达” 的变量，就会被认为是不需要的变量，这波变量会被清除

        缺点：效率不稳定，会产生大量的空间碎片

标记复制算法

        将可用内存划分为大小相等的两块，每次只使用其中一块，当一块内存使用完后将存活对象复制到另一块内存区域，再将已使用的内存清理。一般不在老年代使用。

        缺点：内存只能使用一半，空间浪费，暂停用户线程

标记整理算法

        与标记复制算法前置相同，不过不进行复制而是将清理后的空间碎片向一段进行整理。

        缺点：暂停用户线程，操作负重大

分代回收

        将使用的对象分为新生代和老生代（对象的存活时间）

        新区存放的对象存活时间较短，而旧区中存放的对象时间较长或常驻内存的对象。

性能优化：

• 加载优化

合并打包减少资源加载请求数，精灵图

压缩减少资源请求体积

加快请求速度CDN加载

资源加载顺序，js最后

缓存

• 图片优化：懒加载/响应式/webp/Iconfont替代
• 首屏优化：预加载/SSR/资源压缩
• 渲染优化

渲染优化：服务端渲染，PIPELINE, 资源加载顺序，css/JS, 代码优化

CSS link加载，避免选择器嵌套过深&计算属性，浏览器属性在前，标准属性在后

js 减少回流重绘 文档碎片 fragment使用，多次操作合并为一次

js动画使用requestAnimationFrame

jsbench.me 进行性能测试

不必要的全局变量和全局属性查找 循环引用（闭包）

字面量创建替代new Object

setInterval 替代 setTimeout

Vue优化：按需加载 & keep-alive & 路由懒加载 & Object.freeze

事件委托 

减少读取次数：合并循环变量和条件（多次使用的变量进行定义，条件IF可以提前return）