• chrome 内存泄漏如何定位


    1. 使用 performance monitor 实时查看内存变化

    查看 JS Heap size 和 DOM Nodes的数量,如果持续升高,则表明内存泄漏

    2. 使用 memory 面板分析内存变化

    memory有3种方式,可以分析内存:

    1. Heap snapshot - 用以打印堆快照,堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配

    2. Allocation instrumentation on timeline - 在时间轴上记录内存信息,随着时间变化记录内存信息。

    3. Allocation sampling - 内存信息采样,使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销,可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。

    方法1:用Heap snapshot快照的方式

    记录几次快照,比较前后的内存中,各个对象的数量变化,如果有大量该对象,或比对中,数量差异明显,则可能存在泄漏。

    重点分析该对象,可点开对应的代码分析源码。

    方法2:用时间线收集

    通过时间线快照,面板上面有蓝线,表示内存占用,若持续出现,表示未被释放。可以将范围缩小到给蓝线。查看下面的对象数量,若有对象的个数非常多,则表明该对象可能出现内存泄漏。
    展开该对象,查看下面的对象,点击对象,可定位到源码。分析源码,是否有内存泄漏。

    3. 产生内存泄漏的几种场景

    1. 意外的全局变量            函数中意外的定义了全局变量,每次执行该函数都会生成该变量,且不会随着函数执行结束而释放。
    2. 未清除的定时器           定时器没有清除,它内部引用的变量,不会被释放
    3. 脱离DOM的元素引用    一个dom容器删除之后,变量未置为null,则其内部的dom元素则不会释放。通过Memory的快照,可以看到detached的dom元素,即为脱离dom的元素引用
    4. 闭包引起内存泄漏
    5. 持续绑定的事件           函数中addEventListener绑定事件,函数多次执行,绑定便会产生多次,产生内存泄漏。

  • 相关阅读:
    初步学习vue.js
    ie兼容CSS3渐变写法
    关于javascript dom扩展:Selector API
    jquery 性能优化高级技巧
    三行代码CSS竖向居中
    JS中 (function(){...})()立即执行函数
    Null 和 undefined 的区别
    CSS 交集选择器和并集选择器
    Vue-cli 构建项目后 npm run build 如何在本地运行查看
    Cubic-bezier 曲线
  • 原文地址:https://www.cnblogs.com/mengff/p/12912795.html
Copyright © 2020-2023  润新知