performance工具的使用

  • performance
  • 任务管理器
  • performance工具
  • 内存的变化TimeLine
  • GC回收
  • 堆块照查找分离DOM


performance

performance是一种用于监控浏览器运行的时候性能变化的工具，他可以帮助我们观察页面运行时内存的变化，渲染的时长；并分析需要改进优化的地方。

任务管理器

通过shift+esc，我们可以调出浏览器的任务管理器。通过任务管理器我们可以观察页面的

  • 内存占用空间
  • cpu使用率
  • 网络情况
  • 进程ID

performance_schema 哪些开启了 performance examine_任务管理器


这里我们使用较多的时内存的占用以及cpu的消耗，任务管理器可以实时的查看内存空间的占用，但缺点是，无法看到页面的内存空间占用的趋势图，没有办法很好的分析内存的使用情况

performance工具

performance_schema 哪些开启了 performance examine_javascript_02

  • 打开控制台（按f12，或打开开发者工具）
  • 点击performance
  • 点击小圆点就可以开始记录页面运行的情况

    • performance_schema 哪些开启了 performance examine_内存空间_03

  • 点击stop可以停止记录，并分析运行的情况

    • performance_schema 哪些开启了 performance examine_内存空间_04

内存的变化TimeLine

打开memory，可以看到页面在运行的时候内存的随时间的变化趋势图，红色框标识的地方就是内存的变化，通过这个变化我们就知道什么时候在哪里的内存消耗不合理或者有异常，并对代码进行优化

performance_schema 哪些开启了 performance examine_javascript_05

GC回收

GC在运行的时候，应用程序是停止的，所以频繁的GC会导致程序假死，导致用户有明显的使用卡顿。

我们可以从TimeLine去判断什么时候进行GC回收操作

当存在频繁的内存升高和下降的时候，就说明有频繁的GC回收操作，这是不合理的，也是需要优化的地方

performance_schema 哪些开启了 performance examine_html_06

堆块照查找分离DOM

首先我们得理解什么是分离DOM，DOM有三种形式

  • 存在于DOM树中的DOM元素
  • 垃圾DOM：不存在于DOM树，且没有被引用的DOM元素
  • 分离DOM：不存在于DOM树，但被引用的DOM元素

分离DOM会导致DOM无法被回收，从而造成内存泄漏，通过堆块照的方式，我们可以找到代码中的分离DOM，并进行优化

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分离DOM</title>
</head>

<body>
  <button id="addDom">addDom</button>
  <script>
    let dom = null
    document.querySelector('#addDom').onclick = function (e) {
    	// 点击按钮的时候，会新建一个dom元素，并保存在全局，但不插入DOM树内，这时就会产生一个分离dom
      dom = document.createElement('div')
    }

  </script>
</body>
</html>

图解

performance_schema 哪些开启了 performance examine_html_07


performance_schema 哪些开启了 performance examine_javascript_08

疑问
GC回收操作是在一定的时间段内执行，还是当发现内存不足的时候再执行，或是其他？

注：本文章主要是对学习知识进行总结，如有不同观点欢迎讨论