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

课程大纲

使用场景:

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

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

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

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

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

1、录制脚本

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

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

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

2、报告分析

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

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

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

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

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

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

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

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

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

导出后的文件:

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

相关推荐
二川bro几秒前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹11 分钟前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风15 分钟前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱21 分钟前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年22 分钟前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵32 分钟前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_36 分钟前
分片上传-
前端·javascript·状态模式
东北南西40 分钟前
手写React状态hook
前端·javascript·react.js
诗书画唱41 分钟前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf42 分钟前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台