Javascript中的内存监控

内存问题的体现

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

界定内存问题的标准

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

监控内存的几种方式

• 浏览器任务管理器
• Timeline时序图记录
• 堆快照查找分离DOM
• 判断是否存在频繁的垃圾回收
  • Timeline中频繁的上升下降
  • 任务管理器中数据频繁的增加减小

v8运行流程

• 通过scanner对脚本扫描进行词法分析出对应tokens
• 通过parser对词法进行语法解析出对应ast,解析分为预解析预解析和全量解析:
  • 预解析用来跳过未被使用的代码、不生成ast创建无变量引用和声明的scopes解析速度更快
  • 全量解析解析被使用的代码，生成ast,构建具体scopes信息，变量引用、声明、抛出所有语法错误
• 最终进行机器码编译

执行环境

• Scope Chain:作用域链用于解析变量引用以及决定其查找的层级
• Outer Environment:
• AO(Activation Object):在javascript执行上下文中用于记录当前范围内的标识符变量映射，在执行前创建.在旧版本js中使用VO(Varaiable Object)可变对象

内存回收

• 主动回收设置为null
• GC检查是否有被引用自动回收

性能优化

• 缩短变量访问层级
• dom事件采用事件委托
• 缓存数据
• 根据情景采用防抖与节流
• 减少层级判断和循环
• 尽可能使用字面量对象