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

课程大纲

使用场景:

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

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

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

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

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

1、录制脚本

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

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

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

2、报告分析

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

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

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

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

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

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

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

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

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

导出后的文件:

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

相关推荐
Nan_Shu_61410 分钟前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店20 分钟前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
蓝莓味的口香糖30 分钟前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒31 分钟前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser32 分钟前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan35 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family37 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_1 小时前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend1 小时前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome
幽络源小助理1 小时前
8、幽络源微服务项目实战:前端登录跨域同源策略处理+axios封装+权限的递归查询增删改+鉴权测试
前端·微服务·架构