第三节 Performance工具

最新推荐文章于 2024-01-17 10:54:18 发布

小夜（noct）

最新推荐文章于 2024-01-17 10:54:18 发布

阅读量539

点赞数

分类专栏： javaScrip性能优化文章标签： javascript

本文链接：https://blog.csdn.net/qq_30732045/article/details/109923172

版权

javaScrip性能优化专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第三节 Performance工具

文章内容输出来源：拉勾教育Java高薪训练营

1.为什么使用Performance

GC的目的是为了实现内存空间的良性循环
良性循环的基石是否合理
时刻关注才能确定是否合理
Performance提供了多种工具监控内存变化

使用步骤

打开浏览器输入目标网址
进入开发人员工具面板,选择性能
开启录制功能,访问具体界面
执行用户行为,一段时间后停止录制
分析界面中记录的内存信息

2.内存问题的体现

页面出现延迟加载或经常性暂停(可能出现频繁的GC)
页面持续性出现糟糕的性能(使用网站不流畅,感觉不是很好用,可能出现内存膨胀)(内存膨胀是我们的系统为了达到一定的效果,申请了很大的内存空间,但是内存空间远超设备所提供的内存大小)
页面的性能随时间延长越来越差(伴随着内存泄漏)

3. 监控内存的几种方式

3.1 内存出现的几个问题

内存泄漏: 内存使用持续升高,整个过程没有下降
内存膨胀: 内存膨胀是我们的系统为了达到一定的效果,申请了很大的内存空间,但是内存空间远超设备所提供的内存大小
频繁垃圾回收: 通过内存变化图进行分析

3.2 内存监控的几个方式

浏览器任务管理器
- 直接以数值的形式显示当前的内存
Timeline时序图记录,
- 把应用程序执行过程中,内存变化的走势图,以时间点的方式给呈现出来
堆快照查找分离DOM
- 很有针对性的查找,当前的界面对象是否存在分离的DOM
- 分离的DOM就是一种内存泄漏
内存走势图,分享是否频繁GC

4. 任务管理器监控内存

google快捷键 shift + esc 调出任务管理
执行程序,观察网页内存变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">add</button>
    <script>
        const btn = document.getElementById('btn')
        btn.onclick = function() {
            let arr = new Array(10000000)   
        }

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

5.Timeline记录内存

界面连续点击四次,内存走势图有升有降,显示正常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">add</button>
    <script>
        const arr = []
        function test() {
            for (let index = 0; index < 110000; index++) {
                document.body.appendChild(document.createElement('p'))
                
                arr.push(new Array(1000000).join('x'))
            }
        }
        document.getElementById('btn').addEventListener('click',test)
    </script>
</body>
</html>

6.堆快照查找分离DOM

堆快照留存js堆照片
什么是分离DOM
- 界面元素存活从DOM树上分离(在界面上分离了,但是js代码还引用着,在内存还占据空间)
  - 垃圾对象是的DOM 节点
  - 分离状态的DOM节点

打开页面然后在开发者调试工具memory中执行快照

执行完之后,可以搜索对应的对象

然后触发操作,再次执行快照
搜索detached关键字,发现分离的快照

7.判断是否存在频繁GC

GC工作时应用程序是停止的
频繁过长的GC会导致应用假死
用户使用中感知应用卡顿

怎么判断
Timeline中频繁的上升下降
任务管理器中数据频繁的增加减少

小夜（noct）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第三节 Performance工具

第三节 Performance工具1.为什么使用PerformanceGC的目的是为了实现内存空间的良性循环良性循环的基石是否合理时刻关注才能确定是否合理Performance提供了多种工具监控内存变化使用步骤打开浏览器输入目标网址进入开发人员工具面板,选择性能开启录制功能,访问具体界面执行用户行为,一段时间后停止录制分析界面中记录的内存信息2.内存问题的体现页面出现延迟加载或经常性暂停(可能出现频繁的GC)页面持续性出现糟糕的性能(使用网站不流畅,感觉不是很好用,可
复制链接

扫一扫