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

课程大纲

使用场景:

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

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

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

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

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

1、录制脚本

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

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

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

2、报告分析

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

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

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

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

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

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

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

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

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

导出后的文件:

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

相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript