performance的使用

最新推荐文章于 2024-04-22 09:45:18 发布

vimin_M

最新推荐文章于 2024-04-22 09:45:18 发布

阅读量2.3k

点赞数

分类专栏：大前端课程总结 # JavaScript性能优化文章标签： performance工具内存管理 GC回收分离DOM 浏览器优化

本文链接：https://blog.csdn.net/weixin_45449964/article/details/113866292

版权

大前端课程总结同时被 2 个专栏收录

28 篇文章 2 订阅

订阅专栏

JavaScript性能优化

4 篇文章 0 订阅

订阅专栏

performance工具的使用

performance

performance

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

任务管理器

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

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

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

performance工具

在这里插入图片描述

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

内存的变化TimeLine

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

GC回收

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

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

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

堆块照查找分离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>

图解
在这里插入图片描述

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

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

vimin_M

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
performance的使用

performance工具的使用performance任务管理器performance工具内存的变化TimeLineGC回收堆块照查找分离DOMperformanceperformance是一种用于监控浏览器运行的时候性能变化的工具，他可以帮助我们观察页面运行时内存的变化，渲染的时长；并分析需要改进优化的地方。任务管理器通过shift+esc，我们可以调出浏览器的任务管理器。通过任务管理器我们可以观察页面的内存占用空间cpu使用率网络情况进程ID这里我们使用较多的时内存的占用以及cp
复制链接

扫一扫