Chrome性能调优技巧

在开发大型Web应用或复杂交互的网站，不免会遇到一些页面性能瓶颈的问题。本篇介绍一下如何利用Chrome的性能面板分析网站的性能瓶颈，应该对你有所帮助。

注意，为了减少一些Chrome插件对性能评估产生噪音，最好打开隐身模式访问页面进行测试。

当页面激活 Optimize 时，蓝色方块移动得更快。这是为什么？其实两种版本都应在相同的时间内将每个正方形移动相同的空间。我们可以在“性能”面板中进行录制，借以了解如何检测未优化版本中的性能瓶颈。

在DevTools中，单击记录按钮。当页面运行时，DevTools开始捕获性能指标

衡量任何动画性能的主要指标是每秒帧数（FPS）。当动画以 60 FPS 运行时页面是最流畅状态

当然，通过此演示，很明显发现这个页面效果不佳。但是究竟哪一部分有性能问题可能还不是很清楚，因此需要使用该工具进行精确分析和测量。

Screenshots 轨迹记录了每一帧的数据，在“概述”上拖动鼠标来放大单个“触发动画”事件，该概述是包括 FPS，CPU和NET图表的部分。Main 部分和 Summary 选项卡仅显示记录中所选部分的信息