2.前端性能优化-web性能指标
web性能指标
RAIL性能模型
基于用户体验的核心指标
FCP(First Contentful Paint) 首次内容绘制
LCP(Largest Contentful Paint) 最大内容绘制
FID(First Input Delay) 首次输入延迟
TTI(Time to Interactive) 可持续交互时间
TBT(Total Block Time) 总阻塞时间
CLS(Cumulative Layout Shift) 累计布局偏移
Speed Index 速度指数
新一代性能指标：Web Vitals
RAIL性能模型（Response、Animation、Idle、Load）
Google Chrome团队于2015年提出的性能模型，用于提升浏览器用户体验和性能
- 响应（Response）：尽快可能在100ms内响应用户
比如在点击按钮向后台发起某项业务处理请求时，首先反馈给用户开始处理的提示，然后在处理完成的回调后反馈完成的提示
- 动画（Animation）：每一帧以10ms进行渲染，保持动画效果一致，避免卡顿
- 空闲时间（Idle）：当使用js主线程时，应该把任务划分到执行时间小于50ms的片段中去，释放线程用于用户交互
利用浏览器空闲时间处理可延迟的任务，减少预加载的数据大小，保证网站或应用快速完成加载
- 加载（Load）：<5s加载网站并进行交互
在5s内完成加载并渲染出页面的要求，并非完成所有页面资源的加载。对于非关键资源的加载，延迟到浏览器空闲时再进行，例如渐进式优化策略，图片懒加载、代码拆分等优化手段
基于用户体验的核心指标
Google Chrome团队在web.dev提出
- FCP(First Contentful Paint) 首次内容绘制
浏览器首次绘制来自DOM的内容的时间，内容必须是文本、图片（包含背景图）、非白色的canvas或SVG，包括带有正在加载中的web字体的文本
速度指标
优化方案
First Contentful Paint (FCP)This post introduces the First Contentful Paint (FCP) metric and explains how to measure it
- LCP(Largest Contentful Paint) 最大内容绘制
可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户可见时间（2.5s）。
LCP考虑的元素：
<img>元素、<image>元素内的<svg>元素、<video>元素（封面图）、通过[url()]函数加载背景图片的元素、包含文本节点或其他内联文本元素子级的块级元素
第一个例子中，Instagram logo相对较早地加载，即使逐渐显示其他内容，它仍然是最大的元素。在Instagram logo第一帧中，一开始没有绿色框，是因为它是一个<svg>元素，<svg>元素当前不被视为LCP候选对象。
Google搜索结果页面示例中，最大的元素是一段文本，该文本在任何图像加载完成之前显示，它始终是最大的元素。
速度指标
优化方案
Optimize Largest Contentful PaintA step-by-step guide on how to break down LCP and identify key areas to improve.
- FID(First Input Delay) 首次输入延迟
从用户第一次与页面交互到浏览器能够响应交互的时间
输入延迟是引入浏览器忙于解析和执行应用程序加载的大量计算JavaScript。
第一次输入延迟通常发生在第一次内容绘制（FCP）和可持续交互时间（TTI）之间，这时页面已经呈现了一些内容，但还不能进行可靠地交互。
浏览器接收到用户输入操作时，主线程正在忙于执行一个耗时比较长的任务，只有当这个任务执行完成后，浏览器才能响应用户的输入操作，它必须等待的时间===该用户的FID值。
例如，以下所有的HTML元素都需要在响应用户交互之间等待主线程上正在进行的任务完成：
- 文本输入框，复选框和单选按钮<input>、<textarea>
- 选择下拉菜单<select>
- 链接<a>
速度指标
优化方案
First Input Delay (FID)This post introduces the First Input Delay (FID) metric and explains how to measure ithttps://web.dev/optimize-fid/
- TTI(Time to Interactive) 可持续交互时间
网页第一次完全达到可交互状态的时间点，浏览器可以持续性地响应用户的输入。完全达到可交互状态的时间点是在最后一个长任务完成的时间，并在随后的5s内网络和主线程是空闲的。
速度指标
优化方案
Time to Interactive (TTI)https://web.dev/tti/#how-to-improve-tti
- TBT(Total Block Time) 总阻塞时间
度量了FCP和TTI之间的总时间，在该时间范围内，主线程被阻塞足够长的时间以防止输入响应。我们说主线程“被阻止”是因为浏览器无法中断正在进行的任务，如果用户在较长的任务中间与页面进行交互，则浏览器必须等待任务完成才能响应。给定的长任务的阻止时间是其持续时间超过50ms，页面的总阻塞时间=FCP+TTI之间发生的每个长任务的阻塞时间的总和。
例如考虑页面加载期间浏览器主线程：
上面时间轴有5个任务，其中有3个持续时间超过50ms的长任务，下图显示了每个长任务的阻塞时间：
因此，虽然在主线程上运行任务话花费总时间为560ms，但只有345ms被视为阻塞时间。
速度指标
优化方案
Total Blocking Time (TBT)https://web.dev/tbt/#how-to-improve-tbt
- CLS(Cumulative Layout Shift) 累计布局偏移
CLS会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，它是一种保证页面的视觉稳定性，从而提高用户体验的指标方案。
页面内容的意外移动通常是由于异步加载资源或将DOM元素动态添加到现有内容上方的页面而发生的。可以使用加载占位符使布局不变。
速度指标
优化方案
Cumulative Layout Shift (CLS)https://web.dev/cls/#how-to-improve-clsOptimize Cumulative Layout ShiftCumulative Layout Shift (CLS) is a metric that quantifies how often users experience sudden shifts in page content. In this guide, we'll cover optimizing common causes of CLS such as images and iframes without dimensions or dynamic content.
- Speed Index 速度指数
页面可视区域中内容的填充速度的指标，可以通过计算页面可见区域内容显示的平均时间来衡量。
速度指标
优化方案
Speed Indexhttps://web.dev/speed-index/#how-to-improve-your-speed-index-score
新一代性能指标：Web Vitals
Google于2020年5月5日提出 Web Vitals 来衡量网站的用户体验-Core Web Vitals
Core Web Vitals是应用于所有Web页面的Web Vitals的子集。
- 加载性能（LCP）-显示最大内容元素所需的时间
- 交互性（FID）-首次输入延迟时间
- 视觉稳定性（CLS）-累积布局配置偏移
测量Web Vitals
- 性能测试工具，比如Lighthouse
- 使用web-vitals库
- 使用浏览器插件Web Vitals
2.前端性能优化-web性能指标相关推荐
- 前端性能优化 Web前端应该从哪些方面来优化网站?
作者:斯迪 链接:https://www.zhihu.com/question/21658448/answer/18903129 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
- 3 .前端性能优化-使用Lighthouse测试性能
一.准备 https://developer.chrome.com/docs/devtools/speed/get-started/https://developer.chrome.com/docs/ ...
- 【HTML】前端性能优化之CDN和WPO的比较
CDN通过将资源存储在更接近用户的位置,缩短到服务器的往返行程,加快页面加载时间来解决性能问题.WPO解决方案,如Radware的FastView,则在前端进行性能提升处理,使页面更有效地呈现在浏览器 ...
- 笔试题http请求方式 状态码 布局 多标签通信 前端性能优化
企业 前端面试题 QA 页面从输入 URL 到加载显示完成,过程发生什么 前端性能优化 1.加载优化 2. 图片优化 3.css优化 4.js优化 5.渲染优化 6.首屏优化 7.打包优化(主要是we ...
- 超实用web前端开发工具推荐（web开发+前端性能优化+浏览器兼容性测试+……）
要说有哪些好用的前端开发软件和工具,我可有发言权哈~因为在学习的过程中积累了不少实用型前端开发工具.今天我就从浏览器兼容性测试工具.web开发工具.前端性能优化工具.大数据可视化工具这四个方向来和大家 ...
- 深度讲解：web前端性能优化
一.课程简介: 1.课程大纲 涉及到的分类 网络层面 构建层面 浏览器渲染层面 服务端层面 涉及到的功能点 资源的合并与压缩 图片编解码原理和类型选择 浏览器渲染机制 懒加载预加载 浏览器存储 缓存机 ...
- 大型网站技术架构（3）：WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类 这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
- WEB前端性能优化小结
1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
- 列举6个常见且实用的Web前端性能优化方法
在如今这个信息爆炸的时代,人们的节奏总是快速的,对于一个网站的耐心毕竟是有限的可怜的,如果网站不进行优化必定会流失相当一部分的客户,带来不必要的损失.那么从Web前端的性能优化上来说有哪些常见.实用的 ...
最新文章
- java中List深拷贝的简单实例
- 最终篇：简洁易懂，初学者挑战学习Python编程30天 (五)
- javascript移动端 电子书 翻页效果
- centos7安装redmine3.4
- python模块之collections模块
- 什么是java？为什么大家都学习java技术？
- json-server模拟后台接口
- 性别有什么用_为啥不让男孩玩布娃娃？别让你的“性别偏见”，给孩子的人生设限...
- png、jpg、gif那些事情
- 功率 dbm 和 mw 的换算
- python凯撒密码流程图_python实现凯撒密码、凯撒加解密算法
- [OpenCV] 练习题实现代码 使用 cv.addWeighted 函数在文件夹中创建图像的幻灯片放映，并在图像之间进行平滑过渡
- 华为回应出售手机业务传闻：假消息；微软将ChatGPT整合到更多工具中：不用写代码就能开发应用；苹果更新Mac产品线|极客头条
- 大学python搜题软件_2020中国大学MOOC的APP慕课用Python玩转数据期末考试搜题公众号答案...
- 计算机各分数段人数,Excel中求优分率、及格率及各分数段人数.doc
- LaTex 数学公式中的空格
- 如何应对互联网大数据时代的挑战
- 静态内存分配与动态内存分配
- MySQL在线备份与恢复工具 -- Xtrabackup
- Android 多国语言转换 Excel 和 Excel 转换为 string