利用chrome开发者工具来进行前端性能优化

kugga
259 阅读4分钟

概述

在开发前端项目时，特别是3D类型的项目常常会遇到性能问题，如何找到性能问题的症结和解决它是一个开发工程师必须面对的问题。

今天我们聊一下，如何利用chrome的开发工具来进行性能优化的工作。

内存导致的性能问题

  • 内存泄漏： 网页性能随着时间变得越来越差
  • 内存膨胀： 网页性能一直很差，网页占用内存，超过最佳网页所需的内存
  • 频繁的内存回收： 网页的性能延迟或似乎经常暂停

为解决这些和内存有关的问题，我们第一步是要发现问题。我们选择 Chrome 任务管理器来调查内存问题。

Chrome的任务管理器查看内存

按 Shift+Esc 或前往 Chrome 主菜单，然后依次选择更多工具 > 任务管理器以打开任务管理器。

image.png

在任务管理器的内容栏中右键，启用 JavaScript 内存。

image.png 我们只需要关注 内存占用空间 和 JavaScript使用的内存 这2列，它们一个表示DOM节点和渲染引擎占用的系统内存。一个表示js对象占用的内存。

如果内存占用空间异常增长，可能是动态创建DOM节点没有正确回收。

如果js对象占用异常增长，可能是内存泄漏（闭包、变量未回收、定时器未清理）。

Chrome的性能面板

f12打开开发者工具，点击性能选项卡

  1. 勾选内存
  2. 点击扫把（执行垃圾回收）
  3. 点击录制

image.png

录制完成会生成如下图的报告，我们可以将该报告使用ctrl+s保存到本地，也可以从本地加载其他的报告用于分析。

image.png

录制报告

概览图时间轴

顶部是一个时间轴选择器，它能让你选择想要详细查看的时间段。 同时它会显示FPS、内存 或 网络 图表。 如图我选择19000ms~20800ms时间段，该段时间的概览图会被放大，方便详细查看。

image.png chrome官方文档

帧渲染

帧渲染图块的顶部是时间轴的坐标。 在它下面的是帧渲染花费的时间。如图当存在样式更新任务时帧渲染花费了16-17ms左右的时间。

image.png

当浏览器主线程在一帧周期中完成了工作后的剩余时间没有被利用时，这一帧称为空闲帧。图中的灰色区块为空闲帧。

image.png

火焰图

火焰图是一种执行时间和调用关系可视化的性能分析工具，广泛应用于定位代码性能瓶颈（如 CPU 占用过高、函数调用耗时过长）。它通过图形化的堆栈信息，帮助开发者快速识别“热点”函数。

如下图我们来关注帧渲染耗时33ms的一帧中发生了些什么。主要观看时间跨度大的色块（耗时长），它可以帮助观察，总体的执行进度和时间。

image.png

内存分配曲线图

火焰图下方的就是我们勾选内存后会出现的，内存分配图。

image.png

  1. JS 堆（JavaScript Heap） ：表示 JavaScript 对象在堆内存中的占用情况。
  2. 文档（Documents） ：表示当前页面中加载的文档数量。
  3. 节点（Nodes） ：表示 DOM 节点的数量，反映了页面结构的复杂度。
  4. 监听器（Listeners） ：表示事件监听器的数量，过多的监听器可能会影响性能。
  5. GPU 内存：表示 GPU 使用的内存量。

这些信息可以帮助了解程序在运行过程中内存的动态变化，识别出内存泄漏、内存碎片等问题，并进行相应的优化。

性能面板的其他功能

打开性能面板时有三个最大且显眼的评估指标LCP、CLS、INP。

image.png

LCP-内容加载性

它表示最大的内容块渲染完成的时间。其衡量加载性能，及页面内容的加载速度。

  • 优秀：≤ 2.5 秒
  • 需要改进：2.5 秒 - 4 秒
  • 较差：≥ 4 秒

CLS-布局跳动性

表示在页面加载过程中，可见元素意外移动的频率和幅度。它衡量视觉稳定性，即布局的跳动性。

  • 优秀：≤ 0.1
  • 需要改进：0.1 - 0.25
  • 较差：≥ 0.25

INP-交互响应性

用户与界面交互后，页面响应的延迟时间。衡量交互响应性，即操作反馈速度。

  • 优秀：≤ 200 ms
  • 需要改进：200 ms - 500 ms
  • 较差：≥ 500 m
avatar
文章
阅读
粉丝