📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • 衡量性能的核心指标
  • 衡量指标
  • 衡量工具
  • 浏览器开发者工具
  • Performance API
  • Lighthouse
  • 参考
在GitHub上编辑
  1. 前端安全与性能优化
  2. 前端性能优化

衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292

衡量性能的核心指标

tags: 前端性能 Created time: July 11, 2022 7:37 PM emoji: 🧭

衡量指标

假如没有相应的指标来衡量,那么就无法准确判断出性能优化的效果。Google为此给出了三大核心指标:

  • 最大内容绘制(LCP)

  • 首次输入延迟(FID)

  • 累计布局偏移(CLS)

除此之外还有一些重要的衡量指标

  • 首次内容绘制(FCP)

  • 首字节时间(TTFB)

最大内容绘制

首次加载时首屏中最大的图像块或文本块完成渲染的时间。相比较首次内容绘制,最大内容绘制更具代表性。

首次输入延迟

首次输入延迟是指用户第一次与页面交互到浏览器做出响应的时间,更短的延迟意味着更好的交互性。

累计布局偏移

累计布局偏移是指整个页面生命周期内发生的所有意外布局偏移的累计,更小的累计布局偏移就表示着页面视觉稳定性越好。

首次内容绘制

首次加载到页面任意部分渲染完成的时间,但是最快绘制完成任意内容块并不能表示最快绘制完成首屏内容,通常最大内容绘制时间比首次内容绘制时间更有代表性。

首字节时间

Time to First Byte (TTFB) 是衡量的是资源请求的第一个字节到响应的第一个字节到达的时间,是衡量网络情况和web服务器响应能力的重要指标。

衡量工具

浏览器开发者工具

衡量性能指标最简单最方便的工具就是浏览器开发者工具

查看三大核心指标

打开Edge开发者工具,在绘制一栏开启核心网页指标

查看TTFB

在网络一栏,打开页面html文件的详情页(通常是第一个),点击计时一栏

在这里不仅能看到TTFB,还可以看到其他请求响应相关的耗时,例如阻塞耗时。在这一块我更推荐火狐浏览器开发者版浏览器,可以查看的信息更多。

Performance API

Timing API

window.performance是一个包含一些页面性能指标的对象,在其timing属性中包含着页面生命周期的许多时间戳,可以通过时间戳的计算来算出某些事件的时长。

属性说明:

  • startTime:有些浏览器实现为navigationStart,代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com,在地址栏输入google.com并回车,浏览器的执行动作依次为:unload当前文档(即baidu.com)->请求下一文档(即google.com)。navigationStart的值便是触发unload当前文档的时间节点。如果当前文档为空,则navigationStart的值等于fetchStart。

  • redirectStart和redirectEnd:如果页面是由redirect而来,则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点;

  • unloadEventStart和unloadEventEnd:如果前一个文档和请求的文档是同一个域的,则unloadEventStart和unloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0;

  • fetchStart是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间,浏览器会检查当前文档的缓存;

  • domainLookupStart和domainLookupEnd分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询(比如使用了cache),则两者的值都等于fetchStart;

  • connectStart和connectEnd分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接(比如使用持久化连接webscoket),则两者都等于domainLookupEnd;

  • secureConnectionStart:可选。如果页面使用HTTPS,它的值是安全连接握手之前的时刻。如果该属性不可用,则返回undefined。如果该属性可用,但没有使用HTTPS,则返回0;

  • requestStart代表浏览器发起请求的时间节点,请求的方式可以是请求服务器、缓存、本地资源等;

  • responseStart和responseEnd分别代表浏览器收到从服务器端(或缓存、本地资源)响应回的第一个字节和最后一个字节数据的时刻;

  • domLoading代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性,domLoading的值就等于readyState改变为loading的时间节点;

  • domInteractive代表浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady,它早于DOMReady触发,代表html文档解析完毕(即dom tree创建完成)但是内嵌资源(比如外链css、js等)还未加载的时间点;

  • domContentLoadedEventStart:代表DOMContentLoaded事件触发的时间节点: 页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件,HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

  • domContentLoadedEventEnd:代表DOMContentLoaded事件完成的时间节点,此刻用户可以对页面进行操作,也就是jQuery中的domready时间;

  • domComplete:html文档完全解析完毕的时间节点,注意这会包含script执行的时间;

  • loadEventStart和loadEventEnd分别代表onload事件触发和结束的时间节点

常用的测量时间。

DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
白屏时间 = domContentLoadedEventEnd - fetchStart
domready可操作时间 = domContentLoadedEventEnd - fetchStart
onload总下载时间 = loadEventEnd - fetchStart

注意 最好设置一个定时器,延迟一段时间后再获取时间戳,因为某些属性在script标签执行时可能还没准备好,例如domComplete。

User Timing API

User Timing API 是基于时间的通用度量 API,你可以使用它任意标记时间点,然后测量这些标记之间持续的时间。

function wait() {
		return new Promise((resolve) => {
			setTimeout(() => {
				resolve()
			}, 1000)
		})
	}
	async function fn() {

		performance.mark('myTask:start');
		await wait()
		// 记录任务运行后的时间。
		performance.mark('myTask:end');

		// 测量任务开始和结束之间的增量
		console.log(performance.measure('myTask', 'myTask:start', 'myTask:end'));
	}

资源加载时间

performance.getEntries() 会返回一个包含所有资源加载信息的数组。

Lighthouse

测量页面性能指标更好的方法是使用测量工具,LightHouse是其中一个比较有代表性的工具,它不仅可以测量页面性能,还可以给出修改意见。

参考

《大型网站性能优化实战》

上一页前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1下一页图片懒加载

图片来自

关于User Timing更多API见

https://w3c.github.io/navigation-timing/
使用用户计时 API - Web API |MDN (mozilla.org)
https://w3c.github.io/navigation-timing/