这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战
在chrom的工具栏,有一个面板performance,点开之后操作后,你会看到一堆五颜六色的图表,但是具体是干什么的,未可知
performance面板是Chrome 的性能分析工具，那应该和页面有关系，所以我们就从页面性能方向开始看一下
一.页面性能受哪些影响
我感觉和页面性能挂钩的方向大概有：网络情况、服务器、前端渲染效率、用户端的硬件等,接着详细来看下这几个方向
网络
网络往往是页面性能比较关键的地方，域名解析、交换机、路由器、网络服务提供商等,任何一个出问题或响应过慢都会有不好的体验
服务器
因为我们发送的都是http请求,所以请求最终都要服务器来处理，服务器处理不当,无法响应或响应过慢也会直接影响页面的性能
前端的渲染效率
浏览器解析 HTML、CSS、图片等静态资源，呈现给用户的过程
用户与页面交互后，浏览器重新计算需要呈现的内容，然后重新绘制页面的过程
这些处理效率也是影响性能的重要因素
用户硬件
发起网络请求，解析网络响应，页面渲染绘制等过程都需要消耗计算机硬件资源, 所以计算机资源，特别是 CPU 和 GPU 资源短缺时,也会影响页面性能
Chrome 工具栏的工具 各有自己的侧重点， Network 工具的有资源拉取顺序的详细信息，它的侧重点在于分析网络相关的影响
Performance 工具的侧重点则在于前端渲染过程，它拥有帧率条形图、CPU 使用率面积图、资源瀑布图、主线程火焰图等模块，它们和渲染息息相关，善用它们可以清晰地观察整个渲染阶段。
不用纠结这些关键词,因为后面都会详细的一一给大家讲解到
二.开始性能分析
首先,以下连接是网上找的小demo,我们就围绕着这个demo来进行性能的分析
googlechrome.github.io/devtools-sa…
打开demo后,接着打开你浏览器的控制台
一般移动端的cpu性能要比电脑若很多,所以我们选择性能较低的场景来进行计算
模拟移动设备的CPU
- 单击 Performance 选项卡
- 确保选中了 Screenshots (选中才会有屏幕快照)
- 单击 设置按钮,其中包含了捕获性能指标相关的设置
- 对于 CPU选项, 选择 4x slowdown, 进行 CPU 节流，使其比平时慢4倍
因为我们每个人的电脑,性能都有一定的差异,所以此demo可以自定义演示
- 继续单击 Add 10，直到蓝色方块移动明显比以前慢
- 单击 Optimize，蓝色方块应该移动得更快更流畅
- 单击 Un-Optimize，蓝色方块应该移动得更慢且更加卡顿 注意：如果你看不到优化版本和未优化版本之间的明显差异，请尝试单击 Subtract 10 几次，然后再试一次
本篇先讲到这里，下篇文章继续哇
与问题欢迎批评指正哦～
