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

课程大纲

使用场景:

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

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

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

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

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

1、录制脚本

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

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

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

2、报告分析

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

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

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

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

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

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

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

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

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

导出后的文件:

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

相关推荐
古时的风筝12 分钟前
暴论:2025年,程序员必学技能就是MCP
前端·后端·mcp
古时的风筝12 分钟前
这编程圈子变化太快了,谁能告诉我 MCP 是什么
前端·后端·mcp
王月lydia17 分钟前
环境变量篇-vue3的H5项目从0到1工程化落地经验篇2
前端
赵要上天17 分钟前
利用TTP协议 ETag + 路由守卫 实现前端发版后通知用户更新得一个方案
前端
李剑一19 分钟前
写一个vitepress新建文章脚本,自动化创建链接,别再手写了!
前端·node.js·vitepress
火星思想20 分钟前
React如何实现时间切片
前端·react.js
小学生豆豆25 分钟前
eslint以及其扩展插件
前端
Electrolux31 分钟前
【前端bug】Safari的选区机制导致的前端@人组件的bug
前端
w236173460133 分钟前
Tomcat:从零理解Java Web应用的“心脏”
java·前端·tomcat
姝然_952737 分钟前
cursor vue3 rules
前端