如何通过DevTools工具实现Web前端性能自动化分析?

2020 年 9 月 13 日

如何通过DevTools工具实现Web前端性能自动化分析?

导语 | 大型项目最容易遇到性能问题,一般来说当我们遇到性能瓶颈的时候,才会开始去进行相应的分析。分析的方向除了与业务本身特点相关之外,常见的还可以借助一些工具来发现问题。下文就将和大家一起探讨前端性能分析该怎样走?文章作者:王贝珊,腾讯前端开发工程师。

一、前端性能分析工具

前端的性能分析通常可以从时间和空间两个角度来进行:

  • 时间:常见耗时,如页面加载耗时、渲染耗时、网络耗时、脚本执行耗时等;
  • 空间:资源占用,包括 CPU 占用、内存占用、本地缓存占用等。

那么,下面来看看有哪些常见的工具可以借来用用。由于我们的网页基本上跑在浏览器中,所以基本上大多数的工具都来源于浏览器自身提供,首当其冲的当然是 Chrome DevTools。本文我们也主要围绕 Chrome DevTools [1] 来进行说明。

1. Lighthouse

Lighthouse [2] 的前身是 Chrome DevTools 面板中的 Audits。在 Chrome 60 之前的版本中, 这个面板只包含网络使用率和页面性能两个测量类别,从 Chrome 60 版本开始, Audits 面板已经被 Lighthouse 的集成版取代。

而在最新版本的 Chrome 中,则需要单独安装 Lighthouse 拓展程序来使用,也可以通过脚本来使用。

原文链接:【 https://www.infoq.cn/article/rAXLMhJ1QHhN2yNbvMUK 】。未经作者许可,禁止转载。

登录后可解锁全站优质内容

免费畅享技术公开课、顶尖技术团队访谈、一线互联网大厂技术实践

文章
视频
电子书
研究报告
立即登录
2020 年 9 月 13 日 10:06 1114

评论

发布
暂无评论
发现更多内容

超简单入门MyBatis,看了就会了~

程序员的时光

mybatis

Vol.7 聊聊我热爱的陕西省图书馆

Lanpeng2020

记录 生活,随想

金灿灿的季节 - Apache DolphinScheduler收获5位新Committer

海豚调度

ARTS|Week 1 第一次使用LeetCode

Puran

LeetCode ARTS活动

认识数据产品经理(四 与互联网产品经理的区别)

马踏飞机747

大数据 互联网 职业规划 数据产品经理

写给产品经理的信(5):谈谈项目管理(青铜-王者)

夜来妖

产品 极客时间,项目管理 项目管理 产品经理 项目

深入浅出Mysql索引的那些事儿

猿人谷

MySQL 性能优化 索引

控制 Pod 内容器的启动顺序

张晓辉

Kubernetes

Rust 遇上 C/C++(二):函数传参

Coding Fatty

c c++ rust 编程语言

解决版权难题,“豪横”字体自己做

zhoo299

设计 CG

只用CSS实现响应式Full-Width img 2种方法

寇云

CSS css3

纯CSS“返回顶部”特效

寇云

CSS css3

服务化架构-状态码设计要点

图南日晟

微服务 RESTful 架构设计

XSKY发布XMotion纳管热迁移技术,OpenStack集群迁移效率提升超10倍

XSKY融合存储

安装R语言编译器:

唯爱

Java 学习笔记(三)数据类型

杜朋

在培训机构花了好几万学Java,当了程序员还常被鄙视,这是招谁惹谁了?

四猿外

Java 学习方法 程序员 个人成长 转行程序员

Eureka 实例注册状态保持 STARTING 的问题排查

张晓辉

spring Spring Cloud netflix

自定义列表样式

寇云

CSS css3

我来聊聊模型驱动的前端开发

欧雷

软件工程 软件开发 前端开发 前端工程 前端架构

磁盘挂载

唯爱

《中国互联网简史》系列笔记之P2P

dongh11

读书笔记

Vol.9 Web前端发展历程及前端工程化

Lanpeng2020

前端 前端工程

MySQL死锁系列-常见加锁场景分析

程序员历小冰

MySQL

如何通过样本数据推断其分布

张利东

Python

珍藏已久的 OS 学习网站拿出来分享给大家

cxuan

操作系统

【写作群星榜】5.22~5.28写作平台优秀作者&文章排名

InfoQ写作平台

写作平台 排行榜

避免争执

孙苏勇

职场 随笔杂谈

不懂送女朋友什么牌子的口红?没关系!Python 数据分析告诉你。

JackTian

Python 程序员 数据分析 python 爬虫 口红

时序数据库

pydata

Vol.8 云栖小镇游记

Lanpeng2020

阿里云 随笔 数字化转型

众安黑客马拉松大赛总决赛-InfoQ小编探班

众安黑客马拉松大赛总决赛-InfoQ小编探班

如何通过DevTools工具实现Web前端性能自动化分析?-InfoQ