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/metrics/

https://web.dev/user-centric-performance-metrics/

https://web.dev/custom-metrics/

  1. SSR
  2. SPA

TBT

Total Blocking Time

https://web.dev/tbt/

DCL

DOMContentLoaded Event DOM内容加载事件

https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics

https://web.dev/metrics/

FP 首次绘制

First Paint

https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics

https://web.dev/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

https://web.dev/lcp/

TTI 可交互时间

Time to Interactive

https://web.dev/tti/

FID 首次输入延迟

First Input Delay

https://web.dev/fid/

CLS 累积布局移位

Cumulative Layout Shift

https://web.dev/cls/

SI 速度指数

Speed Index

https://web.dev/speed-index/

https://web.dev/performance-scoring


requestAnimationFrame

https://developers.google.com/web/tools/lighthouse

https://www.webpagetest.org/

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的更多相关文章

  1. Chrome DevTools & performance optimization

    Chrome DevTools & performance ptimization https://www.bing.com https://developers.google.com/web ...

  2. [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 ...

  3. Chrome DevTools 调研笔记

    1  说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2  Elements 2.1  功能 检查和实时更新页面的HTML与C ...

  4. 【转】chrome devtools protocol——Web 性能自动化

    前言 在测试Web页面加载时间时,可能会是这样的: 打开chrome浏览器. 按F12打开开发者工具. 在浏览器上打开要测试的页面 查看开发者工具中Network面板的页面性能数据并记录 或者在开发者 ...

  5. chrome devtools的debug相关

    搜索ctrl+p:搜索Sources面板中指定的文件:然后在主窗口文件标签右键选择reveal in navigator可以在目录中显示当前文件.ctrl+f:搜索devtool主显示窗口所在文件的指 ...

  6. 全新Chrome Devtool Performance使用指南

    运行时性能表现(runtime performance)指的是当你的页面在浏览器运行时的性能表现,而不是在下载页面的时候的表现.这篇指南将会告诉你怎么用Chrome DevToos Performan ...

  7. chrome devtools tip(2)--自定义代码片段,构建你的工具箱

    平常开发中,有些代码片段常常用到的,比如,获取 url 参数,rgb转16进制,打印下当前页面的性能数据,给所有的 span 加个样式, 防抖节流,fetch接口,类似 jquery这样的顺手 选择 ...

  8. Chrome DevTools开发者工具调试

    1-1 Chrome DevTools 功能简介 (九大功能面板) (1)Elements元素面板 检查和调整页面,调试DOM,调试CSS (2)Network网络面板 调试请求,了解页面静态资源分布 ...

  9. Chrome DevTools 面板全攻略

    李华西,微医云服务团队前端开发工程师,喜欢瞎折腾,典型猫奴 Console 面板 此章节请打开 devtools/console/console.html 一起食用 一方面用来记录页面在执行过程中的信 ...

随机推荐

  1. 30分钟带你理解 Raft 算法

    为什么需要 Raft? Raft 是什么? Raft 的目标 前置条件:复制状态机 Raft 基础 Leader 选举(选举安全特性) 日志复制(Leader只附加.日志匹配) 安全 学习资料 使用 ...

  2. Wi-Fi IoT套件连PCF8563实现电子钟功能

    首先跟同样新入手单片机开发的小伙伴分享一点I2C通信的知识.我估计大部分入手开发板的小伙伴都有一定程序开发的能力,但是底层开发可能是新接触,我看有的小伙伴配置开发环境都有障碍,其实并不是多复杂,只是首 ...

  3. SpringBoot单元测试的两种形式

    @ 目录 前言 demo环境 springbootTest Junit 总结 前言 最近公司要求2021年所有的项目代码单元测试覆盖率要达到90%,作为刚毕业的小白来说这简直就是噩梦啊,springb ...

  4. ovsdb-client命令

    ovsdb-server 的命令行接口. 查看有哪些数据库: ovsdb-client list-dbs [server] 查看数据库 schema: ovsdb-client get-schema ...

  5. Cisco发现协议

    CDP Cisco Discovery Protocol: 思科发现协议 是一个提供关于直接相连的交换机.路由器和其它Cisco设备的综合信息的专有工具 CDP 能够发现直接相邻的设备而不管这些设备所 ...

  6. c++hook内联汇编模板

    1 #include "Windows.h" 2 #include "tlhelp32.h" 3 #include "String.h" 4 ...

  7. QQ好友状态,QQ群友状态,究竟是推还是拉? 网页端收消息,究竟是推还是拉?

    https://mp.weixin.qq.com/s/KB1zdKcsh4PXXuJh4xb_Zw 网页端收消息,究竟是推还是拉? 原创 58沈剑 架构师之路 2020-12-28   https:/ ...

  8. gstack pstack strace

    gstack pstack strace 通过进程号 查看 进程的工作目录 Linux神器strace的使用方法及实践 - 知乎 https://zhuanlan.zhihu.com/p/180053 ...

  9. C++学习之STL(二)String

    1.assign assign方法可以理解为先将原字符串清空,然后赋予新的值作替换. 返回类型为 string类型的引用.其常用的重载也有下列几种: a. string& assign ( c ...

  10. git本地检出远程分支

    场景:本地分支被误物理删除,想要重新将自己的分支代码从远程拉取下来.(此时取的是最后一次git push上去的分支代码) 1.与远程仓库重新建立关系 1 git clone git@gitlab.名称 ...