阅读 306

前端性能分析利器-Chrome性能分析&性能监视器

是否遇到过需要对JavaScript或CSS进行优化, 但却找不到一种方法定位问题呢?

也许你会说, 可以使用Chrome的timeline来记录, 但timeline只记录数据,并不会实时更新。

这里,你可以考虑使用Chrome DevTools的“Performance Monitor”性能监控工具,它可以实时观察到性能数据。

调出Performance Monitor性能监视器

按以下方式, 即可打开性能监视器

  • 打开浏览器, 输入需要监视的网址
  • F12打开Chrome控制台
  • 按组合键Ctrl+P(windows, mac快捷键为command + p)
  • 输入> Show Performance Monitor, 打开性能监视器

注意, 在按组合键Ctrl+P(windows, mac快捷键为command + p), 可输入?, 会提示6种不同的命令:

  • ..., open file, 打开文件(Source)
  • :, Go to line, 跳转至文件的指定行
  • @, Go to symbol
  • !, Run snippet, 运行代码片段
  • >, Run command, 运行command

Performance Monitor性能指标

可以看到, 主要有4

  • CPU usage, CPU占用率
  • JS head size, JS内存使用大小
  • DOM Nodes, 内存中挂载的DOM节点个数
  • JS event listeners, 事件监听数
  • Document
  • Document Frames
  • Layouts / sec, 布局重排, 浏览器用来计算页面上所有元素的位置和大小的过程
  • Style recalcs / sec, 页面样式重绘

执行后的效果:

Audits

对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

详细使用方法, 可以参阅: Chrome DevTools Audits 功能介绍

注意, 使用Chrome Audits需要"翻墙"

Performance性能分析

这些问题, 可以通过Performance Monitor性能监视器来进行观察, 然后使用Performance工具进行性能分析.

如上图所示, 执行一段时间后(几秒或几分钟), Chrome Devtools即会输出一会分析报告, 如下图所示:

常见的性能问题

JavaScript 计算

特别是会触发大量视觉变化的计算会降低应用性能。 不要让时机不当或长时间运行的 JavaScript 影响用户交互下面是一些常见 JavaScript 问题

  1. 大开销输入处理程序影响响应或动画, 让浏览器尽可能晚地处理触摸和滚动,或者绑定侦听
  2. 时机不当的 JavaScript 影响响应、动画、加载, 使用requestAnimationFrame、使 DOM 操作遍布各个帧、使用网络工作线程
  3. 长时间运行的 JavaScript 影响响应, 将纯粹的计算工作转移到web worker中。如果需要 DOM 访问权限,配合使用requestAnimationFrame

样式:

样式更改开销较大,在这些更改会影响 DOM 中的多个元素时更是如此。 只要将样式应用到元素,浏览器就必须确定对所有相关元素的影响、重新计算布局并重新绘制

下面是一些常见的CSS问题

  1. 大开销样式计算影响响应或动画, 任何会更改元素几何形状的 CSS 属性,如宽度、高度或位置;浏览器必须检查所有其他元素并重做布局。避免会触发重排的CSS属性
  2. 复杂的选择器影响响应或动画, 嵌套选择器强制浏览器了解与所有其他元素有关的全部内容,包括父级和子级。尽量在CSS中引用只有一个类的元素

重排

布局(或重排)是浏览器用来计算页面上所有元素的位置和大小的过程。

网页的布局模式意味着一个元素可能影响其他元素, 例如: body元素的宽度一般会影响其子元素的宽度以及树中各处的节点等等。

这个过程对于浏览器来说可能很复杂。 一般的经验法则是,如果在帧完成前从 DOM请求返回几何值,将发现会出现“强制同步布局”,在频繁地重复或针对较大的 DOM 树执行操作时这会成为性能的大瓶颈。

performance面板可以确定页面何时会导致强制同步布局。 这些Layout事件使用红色竖线标记.

“布局抖动”是指反复出现强制同步布局情况。 这种情况会在 JavaScript 从 DOM 反复地写入和读取时出现,将会强制浏览器反复重新计算布局

重绘

绘制是填充像素的过程, 经常是渲染流程开销最大的部分。如果在任何情况下注意到页面出现卡顿现象,很有可能存在绘制问题。

合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。大多数情况下,如果坚持仅合成属性并避免一起绘制,性能会有极大的改进,但是需要留意过多的层级数

相关链接

关注下面的标签,发现更多相似文章
评论