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 一起食用 一方面用来记录页面在执行过程中的信 ...
随机推荐
- 无法获取 vmci 驱动程序版本： 句柄无效。 驱动程序 vmci.sys 版本不正确。请尝试重新安装 VMware Workstation。 打开模块DevicePowerOn电源失败。
1.别打开电源,然后到虚拟机安装文件夹内.2.找到你的虚拟机系统文件中后缀为vmx的文件,右击用记事本或者Notepad++打开.2.搜索找到vmci0.present='TRUE',字段,把true ...
- 【rz】【sz】参数详解
参数 SYNOPSIS sz [-+8abdefkLlNnopqTtuvyY] file ... b:以二进制方式,默认为文本方式 e:对所有控制字符转义 待续 常见问题: 1.xshell 使用rz ...
- CF1190B
扯在前面 我们老师刚讲过的题目,很考验思维,本蒟蒻WA了十发才过,然后看到题解里只是指出了特殊情况没多解释,可能有人看不懂,特来分享一下 首先题目就很有意思,思考的过程也很有趣,想把所有情况思考全思考 ...
- Language Guide (proto3) | proto3 语言指南（开篇）
前言 近日在学习gRPC框架的相关知识时接触到Protobuf(protocol-buffers,协议缓冲区),proto3等知识.网上很多文章/帖子经常把gRPC与proto3放在一起,为避免初学者 ...
- 前台console调试技巧
前台console调试技巧 一.console.log() 二.console.warn() 三.console.dir() 四.console.table() 五.console.assert() ...
- python--可迭代对象、迭代器和生成器
迭代器 1.什么是迭代器? 不依赖于索引的取值方式 迭代是一个重复的过程,即每一次重复为一次迭代,并且每次迭代的结果都是下一次迭代的初始值 示例: str1 = 'abcde' count = 0 w ...
- 23.centos 7配置网络
1.ifconfig:查看网卡信息 如果centos7 最小化安装没有ifconfig这个命令,可以使用yum install net-tools 来安装. centos7 网卡命名规则: en ...
- BGP总结（一）
0.AS 狭义:在RIP.OSPF和EIGRP等IGP协议中,AS表示只运行此单种协议的路由域 广义:运行多个IGP协议的路由域,多个IGP协议之间通过路由重发布来实现通信,AS和AS之间通过BGP来 ...
- Vuejs 基础学习教程
(四)构建基础进阶-env文件与环境设置 我们在实际开发中,我们一般会经历项目的开发阶段,测试阶段,和最终上线阶段,每个阶段对于项目代码的需要可能都有所不同,那我们怎么让它在不同阶段呈现不同的效果呢? ...
- 线程不安全（Arraylist,HashSet,HashMap）和写时复制
package com.yangyuanyuan.juc1205; import java.util.List; import java.util.Map; import java.util.Set; ...