越來越发现前端工程中性能的重要性。不管使用什么技术栈,性能优化都是绕不过去的问题。
优化性能之前,首先要知道如何查看网页性能。
chrome 浏览器提供的performance就是一个最常用的工具。
摁 Control+shift+I
打开开发者工具就可以找到 performance
(旧版本也叫Timeline
)
使用方法
- 点击面板左上方圆形按钮开始记录,然后操作页面,一段时间之后在面板上点击停止,即可得到这段操作过程的记录结果。
- 点击面板上左上方刷新按键,可以重新加载页面并获得该过程记录结果。
- 点击面板左上方禁止符号,可以清除记录结果。
下面逐一讲解各版块的功能:
缩略图版块
Network
和 CPU
两个下拉框选项的作用是模拟移动端运行环境。
缩略图中一共分为5行,从上到下依次是:
- FPS,表示每一秒的帧数,用来衡量页面动画的性能指标。fps图中绿色柱状越高表示体验越好。若出现红色长条则表示在该时间端出现长帧,可能影响用户体验。
- CPU,表示cpu的使用情况,其中颜色含义和底下的
Summary
模块中相同。从该行中颜色块的跨越时长可以分析哪类事件消耗的时间较长,从而找到性能瓶颈。 - NET,每一个颜色条表示加载一种文件。蓝色表示html文件、黄色表示js文件、紫色表示样式文件、绿色表示媒体文件、灰色表示其他资源。
- 缩略图,对应每一时刻页面的显示情况。通过勾选上方
Screenshots
来控制显示或隐藏。 - HEAP,表示堆内存使用情况。可通过勾选上访
Menory
来控制显示或隐藏。
详情图版块和Summary面板
缩略图下面是各部分的详细图表,可以查看对应时间发生的加载、脚本、动画等事件。
滚动滑轮可以对图表窗口进行缩放,点击图表中的色条,可以在Summary中看到对应过程的详细信息