Skip to main content

Chrome Dev Tools---[性能篇]

· 7 min read

本文主要记录Chrome Dev Tools 关于性能调优的使用方法。基础用法请参见基础篇

Performance​

  • 与loading相对,是running的性能,找出页面性能瓶颈,建议:
    • 在隐身模式下使用.
    • Capture Settings->20x slowdown(for mobile)
  • 右键 -> Save profile/ Load profile
  • Record结果分析:
    • FPS出现红色时,说明丢帧严重,绿色越高,性能越好.
    • CPU与底部的Summary相呼应,当该栏被颜色填满时，说明CPU满负荷.
    • 鼠标悬浮于FPS,CPU,NET上面时,可以看到放大的screenshot
    • 鼠标悬浮于Frames,查看FPS,不应高于60.
    • Frames中,点击某一帧,Summary中显示Screenshot,点击可放大;此时若开启Enable advanced paint instrumentation,会显示Layer
    • Interactions:用户交互事件
    • Cmd + Shift + p->show rendering,显示Rendering Tab
    • Overview上点击、按住并移动鼠标,来聚焦某一个时间段.(或者使用W A S D键)
  • 找出瓶颈bottleneck
    • Summary中,Rendering是否过多->减少Rendiering
    • Memory勾选后显示内存使用情况
    • Network,左侧线:request sent之前的事件;浅色:request sent,waiting;深色:content download;右侧线:等待主进程.
    • 展开Main,x:时间,越宽说明运行时间越长;y:callstack.
    • Main中,Shift+鼠标选择区域,可以看到具体时间
    • Main中,颜色随机分配,深黄色Scriping,紫色Rendering,
    • Main中,事件右上角红色三角,说明很可能有性能问题.
    • 点击Main中的事件,Summary中会显示详情,reveal跳转至相应code
    • console旁边有rendering.Paint Flashing layer borders scrolling performance issues
    • 在调用栈最底层的紫色事件(Layout),放大后很可能也有红色三角,点击,再从Summary跳转至对应代码,可以发现右侧又事件,指示出强制重绘的事件.
    • 事件类型参考
  • 查看调用栈,分析性能
    • 三个Tab均展示选中事件
    • 右侧Show Heaviest Stack
    • call tree查找哪一个root activity消耗了最多的时间
    • bottom up展示直接消耗时间的事件
    • event log按调用顺序展示,filter选择事件类型

Memory​

  • Menu -> More tools -> Task manager 打开任务管理器
    • 右键点击表格标题 -> 启用JavaScript memory
    • Memory列表示原生内存，JavaScript Memory表示JS堆。
  • 内存术语
    • 对象可通过两种方式占用内存：
      • 直接通过对象自身占用，对象自身占用内存大小在分析结果中表现为Shadow Size。
      • 通过保持对其他对象的引用隐式占用。对象本身、连同其无法从GC根到达的相关对象一起删除后释放的内存大小，在分析结果中表现为Retained Size。
    • Distance是指该内存节点与GC 根之间的距离。如果相同类型的几乎所有对象的距离都相同，只有少数对象的距离偏大，则有必要进行调查。
  • Devtools -> Performance面板 -> 启用Memory复选框
    • 在记录时点击Collect garbage，可以强制垃圾回收。
    • Overview窗格中HEAP图表表示JS堆
    • 最下方窗格为JS HEAP、Documents、Nodes、Listeners、GPU Memory
  • 使用堆快照，发现已从DOM Tree分离节点的内存泄漏。
    • 选择Take Heap Snapshot ，然后点击Take Heap Snapshot按钮。
    • 执行一段时间后，从左侧面板选择该快照，快照名字下方显示JS对象总大小。
    • Summary视图显示按构造函数名称分组的对象，Containment 视图提供了对象结构视图，有助于分析全局命名空间 (window) 中引用的对象以找出是什么让它们始终如影随形。使用此视图可以分析闭包以及在较低级别深入了解您的对象。
    • 在Summary视图的 Class filter 文本框中键入 Detached，搜索已分离的 DOM 树。
    • 展开三角符号，以黄色突出显示的节点具有 JavaScript 代码对它们的直接引用。
    • 点击黄色节点，在 Object 窗格中，可以看到与正在引用该节点的代码相关的更多信息。
  • 使用分配时间线确定 JS 堆内存泄漏
    • 选择Record Allocation Timeline单选按钮，按Start按钮，执行您怀疑导致内存泄漏的操作。完成后，按stop recording按钮。
    • 点击记录的profile文件查看，选择展现形式为Chart。分配时间线上的蓝色竖线表示新内存分配。
    • 点击下方内容，可以查看具体代码。
  • 按函数调查内存分配
    • 选择Record Allocation Profiler 类型，可以按照 JavaScript 函数查看内存分配。
    • 点击start按钮，执行期望观察的操作，完成后点击stop。
    • Profile默认视图为 Heavy (Bottom Up)，将分配了最多内存的函数显示在最上方。
  • 发现频繁垃圾回收
    • 如果感觉页面经常暂停，则可能存在垃圾回收问题。
    • 在任务管理器中，Memory 或 JavaScript Memory 值频繁上升和下降表示存在频繁的垃圾回收。
    • 在Timeline记录中，JS 堆或节点计数图表频繁上升和下降指示存在频繁的垃圾回收。

Application​

  • storage: 查看local storage,session storage,IndexedDB,Web SQL,
  • Application Cache: 查看通过Application Cache API创建的资源和规则
  • Cache Storage: 查看Service Worker相关缓存
  • Clear Storage: 删除缓存
  • Cookies: 查看、删除cookie,不可修改
  • Frame: 安框架组织Resources
    • 右键->复制链接、在新页面中打开、保存、在Network中查看