阳泉网站设计,关键词搜索引擎工具,网站集约化建设标准,安卓搭建wordpressChrome DevTools 第二篇 Performance 主要介绍performance在我们日常开发中所起到的作用#xff0c;以及如何利用performance 面板进行性能分析和相关优化建议。 性能面板 Performance
记录和分析页面运行中的所有活动#xff0c;是解决前端性能问题的重要工具。
1. 控制栏…Chrome DevTools 第二篇 Performance 主要介绍performance在我们日常开发中所起到的作用以及如何利用performance 面板进行性能分析和相关优化建议。 性能面板 Performance
记录和分析页面运行中的所有活动是解决前端性能问题的重要工具。
1. 控制栏功能
录制: 点击 Record 按CtrlE开始录制。记录时按钮会变成红色。再次点击停止记录刷新: 刷新页面重新分析清除: 清除页面分析结果上下箭头: 用来上传和下载每一次性能检测报告**Screendshots:**显示屏幕快照是用来查看在每个时间段界面的变化Memory: 存储调用栈的大小在不同时间段的不同大小Disable Javascript samples: 禁用 JavaScript 调用栈Enable advanced paint instrumentation(slow): 记录渲染事件的细节Network: 模拟不同的网络环境网络环境配置是必须的因为我们在做性能优化的方案时需要有确定的网络环境来对比优化前后的量化指标。CPU: 模拟不同的CPU运行速度
2. 性能记录
准备记录之前最好打开一个无痕模式下的chrome避免我们安装的其他插件对结果造成影响。
运行时性能
首先进入目标页面打开 performance 面板点击 record 开始记录和页面的交互会被记录再次点击record 停止记录。 加载性能
首先进入目标页面打开 performance 面板点击 reload 开始记录开发者工具首先会前往 about:blank以清除所有剩余的屏幕截图和跟踪记录。在页面重新加载时记录性能指标然后自动停止。 网页活动内容
devtools会自动聚焦大部分活动的范围区间 各颜色代表意义
蓝色 Loading加载耗时黄色 Scripting脚本执行耗时紫色 Rendering渲染耗时绿色 Painting绘制耗时灰色 Ohter系统时间白色 Idle空闲时间
FPS
图示蓝框里面的一条红色部分是FPS也就是帧率预期是帧率越高动画效果越好红色代表帧率下降较多绿色代表帧率较高 CPU
CPU 图表中的颜色对应于“性能”面板底部的Summary标签页中的颜色。CPU 图表充满了颜色这一事实意味着在记录期间 CPU 已用尽。每当您看到 CPU 长时间达到上限时系统就会提示设法减少工作量。 缩略图
鼠标悬浮在CPU或NET面板上会展示当前时刻的屏幕截图 选择区间范围 CSS选择器性能分析 Selector Stats
列说明用时毫秒Elapsed浏览器匹配此 CSS 选择器所用的时间。此时间以毫秒 (ms) 为单位.尝试匹配次数浏览器引擎尝试与此 CSS 选择器匹配的元素数量。匹配数浏览器引擎与此 CSS 选择器匹配的元素数量。慢路径不匹配项所占百分比与此 CSS 选择器不匹配的元素与浏览器引擎尝试匹配的元素之间的比率以及浏览器引擎使用优化程度较低的代码进行匹配的元素所占的比例。选择器匹配的 CSS 选择器。样式表包含 CSS 选择器的 CSS 样式表。
