F12抓包12:Performance(性能)前端性能分析

课程大纲

使用场景:

① 前端界面加载性能测试。

② 导出性能报告给前端开发。

复习:后端(接口)性能分析

① 所有请求耗时时间轴:"网络"(Network) - 概览。

② 单个请求耗时:"网络"(Network) - 请求详情 - 时间。

1、录制脚本

① 打开F12 " 性能 " **面板:**鼠标右键 - "检查" - "性能"(Performance)。

**② 开始录制:**点击录制,在网页执行操作,浏览器录制UI自动化脚本。

**③ 结束录制:**点击停止,系统开始加载性能报告。

2、报告分析

**蓝色(Loading):**网络通信和HTML解析时间。

**黄色(Scripting):**JavaScript执行时间。

**紫色(Rendering):**渲染时间。

**绿色(Painting):**重绘。

**灰色(system):**系统花费的时间。

**浅灰色(Idle):**空闲时间。

**总计:**此界面显示需要的总时间。

3、导入/导出报告(json文件)

**① 导出性能报告:**点击导出,导出后为json文件。

导出后的文件:

**② 导入性能报告:**导入报告json,原样显示性能报告。

相关推荐
超人不会飛13 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦17 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想19 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z27 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982433 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴38 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干42 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗44 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder1 小时前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder1 小时前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github