是否遇到过需要对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 问题
- 大开销输入处理程序影响响应或动画, 让浏览器尽可能晚地处理触摸和滚动，或者绑定侦听
- 时机不当的 JavaScript 影响响应、动画、加载, 使用requestAnimationFrame、使 DOM 操作遍布各个帧、使用网络工作线程
- 长时间运行的 JavaScript 影响响应, 将纯粹的计算工作转移到web worker中。如果需要 DOM 访问权限，配合使用requestAnimationFrame
样式：
样式更改开销较大，在这些更改会影响 DOM 中的多个元素时更是如此。 只要将样式应用到元素，浏览器就必须确定对所有相关元素的影响、重新计算布局并重新绘制
下面是一些常见的CSS问题
- 大开销样式计算影响响应或动画, 任何会更改元素几何形状的 CSS 属性，如宽度、高度或位置；浏览器必须检查所有其他元素并重做布局。避免会触发重排的CSS属性
- 复杂的选择器影响响应或动画, 嵌套选择器强制浏览器了解与所有其他元素有关的全部内容，包括父级和子级。尽量在CSS中引用只有一个类的元素
重排
布局（或重排）是浏览器用来计算页面上所有元素的位置和大小的过程。
网页的布局模式意味着一个元素可能影响其他元素, 例如: body元素的宽度一般会影响其子元素的宽度以及树中各处的节点等等。
这个过程对于浏览器来说可能很复杂。 一般的经验法则是，如果在帧完成前从 DOM请求返回几何值，将发现会出现“强制同步布局”，在频繁地重复或针对较大的 DOM 树执行操作时这会成为性能的大瓶颈。
performance面板可以确定页面何时会导致强制同步布局。 这些Layout事件使用红色竖线标记.
“布局抖动”是指反复出现强制同步布局情况。 这种情况会在 JavaScript 从 DOM 反复地写入和读取时出现，将会强制浏览器反复重新计算布局
重绘
绘制是填充像素的过程, 经常是渲染流程开销最大的部分。如果在任何情况下注意到页面出现卡顿现象，很有可能存在绘制问题。
合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。大多数情况下，如果坚持仅合成属性并避免一起绘制，性能会有极大的改进，但是需要留意过多的层级数
