Chrome DevTools & performance & keywords
Chrome DevTools & performance & keywords
performance / 优化性能

https://developers.google.com/web/updates/2020/05/devtools
utm_source
https://developers.google.com/web/updates/2020/05/devtools?utm_source=devtools#performance
以用户为中心的性能指标
https://github.com/WICG/paint-timing
https://w3c.github.io/longtasks/
https://web.dev/how-to-measure-speed/#lab-data-vs-field-data
https://web.dev/vitals/#core-web-vitals
https://github.com/GoogleChrome/tti-polyfill
https://speedcurve.com/blog/user-timing-and-custom-metrics/
https://developers.google.com/web/fundamentals/performance/rail
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
https://developers.google.com/analytics/devguides/collection/protocol/v1
https://developers.google.com/web/fundamentals/performance/http2#server_push
https://developers.google.com/web/updates/2015/11/app-shell
https://developers.google.com/web/progressive-web-apps
https://developers.google.com/web/updates/2015/08/using-requestidlecallback
Metrics 指标
Measure and optimize performance and user experience 衡量并优化性能和用户体验
https://web.dev/user-centric-performance-metrics/
https://web.dev/custom-metrics/
- SSR
- SPA

TBT
Total Blocking Time


DCL
DOMContentLoaded Event DOM内容加载事件
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
FP 首次绘制
First Paint
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
FCP 首次内容绘制
First Contentful Paint
https://web.dev/first-contentful-paint
https://web.dev/fcp/

FMP 首次有效绘制
First Meaningful Paint
https://web.dev/first-meaningful-paint/
LCP 最大内容绘制
Largest Contentful Paint

TTI 可交互时间
Time to Interactive

FID 首次输入延迟
First Input Delay

CLS 累积布局移位
Cumulative Layout Shift
SI 速度指数
Speed Index

https://web.dev/performance-scoring
requestAnimationFrame
https://developers.google.com/web/tools/lighthouse
API
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry
https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp
https://developer.mozilla.org/en-US/docs/Web/Events/visibilitychange
https://wicg.github.io/largest-contentful-paint/
https://w3c.github.io/performance-timeline/
https://w3c.github.io/performance-timeline/#dom-performanceobserverinit- buffered
https://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface
幸存者偏差
https://en.wikipedia.org/wiki/Survivorship_bias
Survivorship bias or survival bias is the logical error of concentrating on the people or things that made it past some selection process and overlooking those that did not, typically because of their lack of visibility.
生存偏差或生存偏差是逻辑错误,即将注意力集中在经过某些选择过程的人员或事物上,而忽略那些没有选择的人员或事物,通常是由于他们缺乏可见性。
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
Chrome DevTools & performance & keywords的更多相关文章
- Chrome DevTools & performance optimization
Chrome DevTools & performance ptimization https://www.bing.com https://developers.google.com/web ...
- [Forward]Improving Web App Performance With the Chrome DevTools Timeline and Profiles
Improving Web App Performance With the Chrome DevTools Timeline and Profiles We all want to create h ...
- Chrome DevTools 调研笔记
1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2 Elements 2.1 功能 检查和实时更新页面的HTML与C ...
- 【转】chrome devtools protocol——Web 性能自动化
前言 在测试Web页面加载时间时,可能会是这样的: 打开chrome浏览器. 按F12打开开发者工具. 在浏览器上打开要测试的页面 查看开发者工具中Network面板的页面性能数据并记录 或者在开发者 ...
- chrome devtools的debug相关
搜索ctrl+p:搜索Sources面板中指定的文件:然后在主窗口文件标签右键选择reveal in navigator可以在目录中显示当前文件.ctrl+f:搜索devtool主显示窗口所在文件的指 ...
- 全新Chrome Devtool Performance使用指南
运行时性能表现(runtime performance)指的是当你的页面在浏览器运行时的性能表现,而不是在下载页面的时候的表现.这篇指南将会告诉你怎么用Chrome DevToos Performan ...
- chrome devtools tip(2)--自定义代码片段,构建你的工具箱
平常开发中,有些代码片段常常用到的,比如,获取 url 参数,rgb转16进制,打印下当前页面的性能数据,给所有的 span 加个样式, 防抖节流,fetch接口,类似 jquery这样的顺手 选择 ...
- Chrome DevTools开发者工具调试
1-1 Chrome DevTools 功能简介 (九大功能面板) (1)Elements元素面板 检查和调整页面,调试DOM,调试CSS (2)Network网络面板 调试请求,了解页面静态资源分布 ...
- Chrome DevTools 面板全攻略
李华西,微医云服务团队前端开发工程师,喜欢瞎折腾,典型猫奴 Console 面板 此章节请打开 devtools/console/console.html 一起食用 一方面用来记录页面在执行过程中的信 ...
随机推荐
- Flask之路由系统
路由系统 路由的两种写法 1.第一种方法: def index(): return render_template('index.html') app.add_url_rule('/index', ' ...
- uni-app通过canvas实现手写签名
分享一个uni-app实现手写签名的方法 具体代码如下: <template> <view > <view class="title">请在下面 ...
- CMU数据库(15-445)实验2-B+树索引实现(下+课上笔记)
4. Index_Iterator实现 这里就是需要实现迭代器的一些操作,比如begin.end.isend等等 下面是对于IndexIterator的构造函数 template <typena ...
- 转 14 jmeter性能测试实战--数据库MySQL
14 jmeter性能测试实战--数据库MySQL 需求 测试用户表(对用户表select操作) 测试步骤 1.MySQL驱动下载并安装. 2.测试计划面板点击"浏览"按钮,将 ...
- GStreamer环境搭建篇
GStreamer是一套强大的多媒体中间件系统,跟FFmpeg功能类似. 各个Linux发行版(Ubuntu,fedora),大都集成了GStreamer相关工具,而作为软件层次结构最上层的播放器,几 ...
- linux系统层面调优
linux系统层面调优和常见的面试题 - 云+社区 - 腾讯云 https://cloud.tencent.com/developer/article/1664287
- dict 切片 间隔取值
1. 字典型d[k].d.get(k),如果键名不存在 报错.返回None 2. 可以为键设置不存在情况的下的覆盖None的返回值 3. 字符串str可以看成是list 4. 对字符串的截取通过切片实 ...
- 网际互连__OSI七层模型
概述 OSI(Open System Interconnection,开放系统互连)七层网络模型称为开放式系统互联参考模型 ,是一个逻辑上的定义.一个规范.它把网络从逻辑上分为了7层.每一层都有相关. ...
- .Net Core 使用 CSRedisCore 访问 Redis 的哨兵和主从复制
一.创建Redis服务 运行环境是Window,安装Redis请看:安装教程. 直接开始创建Redis服务,演示就创建两个一主一从,先把安装路径下的 redis.windows.conf 文件复制一份 ...
- Java中详述线程间协作
线程协作 首先引入一段代码: package 线程间数据共享; import java.util.Date; public class Watch { private static String ti ...