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 一起食用 一方面用来记录页面在执行过程中的信 ...
随机推荐
- 前端PDF文件转图片方法
第一步:先下载pdfjs,网址:PDF下载地址,再引入到项目中,我是标签直接引用的 <script src="pdfjs/build/pdf.js"></scri ...
- python3多进程 进程池 协程并发
一.进程 我们电脑的应用程序,都是进程,进程是资源分配的单位.进程切换需要的资源最大,效率低. 进程之间相互独立 cpu密集的时候适合用多进程 #多 ...
- 前端面试之CSS权重问题!
前端面试之CSS权重问题! 下面的权重按照从小到大来排列! 1.通用选择器(*) 2.元素(类型)选择器 权重1 3.类选择器 权重10 4.属性选择器 5.伪类 6.ID 选择器 权重100 7.内 ...
- Windows Server 2012 R2 英文版汉化安装中文语言包教程更改为中文版
是这样的,一台海外的windows机器默认是英文版的,但是特别费劲用起来,就更改为中文版,因为海外的供应商并不提供中文版镜像. 1.首先打开控制面板,找到add language,拉到底就是有中文,很 ...
- 【Windows】Win10家庭版启用组策略gpedit.msc
[前言] 大家都认为,Windows 10家庭版中并不包含组策略,其实不然,它是有相关文件的,只是不让你使用而已.那么我们让系统允许你使用就好了. [操作步骤] 1.首先你需要在桌面上新建一个txt文 ...
- Flutter--Flutter开发环境搭建
一.前言 Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台.高保真.高性能.开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台. Fl ...
- Language Guide (proto3) | proto3 语言指南(八)未知字段和任意类型
未知字段和任意类型篇幅较少,因此将他们合并到本文进行描述. Unknown Fields - 未知字段 未知字段是格式良好的协议缓冲区序列化数据,表示解析器无法识别的字段.例如,当一个旧二进制代码解析 ...
- Java网络基础
本来主要是讲自己在网络编程方面的学习总结,里面主要讲计算网络的基础.TCP的通信协议,还有些简单的案例.下面是我学习的一个简单路线, 一.概述 计算机网络是将不同地理位置的具有独立功能的多台计算机及其 ...
- Display属性学习总结
HTMl元素根据表现形式,常见的可以分为两类. (1)块元素(block) (2)行内元素(inline). 当然,除了以上两种元素类型外,还有inline-block.table-cell等元素类型 ...
- Weblogic漏洞利用
Weblogic漏洞 Weblogic任意文件上传(CVE-2018-2894) 受影响版本 weblogic 10.3.6.0.weblogic 12.1.3.0.weblogic 12.2.1.2 ...