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. 前端PDF文件转图片方法

    第一步:先下载pdfjs,网址:PDF下载地址,再引入到项目中,我是标签直接引用的 <script src="pdfjs/build/pdf.js"></scri ...

  2. jmeter三种阶梯式加压

    一.前言 在做性能测试的时候,在某些场景下需要逐渐加压,不总是停下来再修改线程再加压,且可以对比加压,找出服务的性能拐点. 二.三种逐渐加压方式 备注:普通的压测方式,并发的Samples是可预知的: ...

  3. 使用amoeba实现mysql读写分离

    使用amoeba实现mysql读写分离 1.什么是amoeba? ​ Amoeba(变形虫)项目,专注 分布式数据库 proxy 开发.座落与Client.DB Server(s)之间.对客户端透明. ...

  4. 实用 nginx.conf 用法大全

    服务器拒绝非GET方式请求保障安全性,因为 DELETE.POST.PUT 是可以修改数据的. Nginx 解决方案 在 nginx.conf 配置文件的网站配置区域中添加如下代码片段: 非 GET ...

  5. java native：Java本地方法调用（jni方式）

    https://www.cnblogs.com/zh1164/p/6283831.html

  6. 【实战】ZooKeeper 实战

    1. 前言 这篇文章简单给演示一下 ZooKeeper 常见命令的使用以及 ZooKeeper Java客户端 Curator 的基本使用.介绍到的内容都是最基本的操作,能满足日常工作的基本需要. 如 ...

  7. python 利用正则表达式获取IP地址

    例:import retest= '$MYNETACT: 0,1,"10.10.0.9"'pattern =re.compile(r'"(\d+\.\d+\.\d+\.\ ...

  8. SpringBoot配置文件 application.properties，yaml配置

    SpringBoot配置文件 application.properties,yaml配置 1.Spring Boot 的配置文件 application.properties 1.1 位置问题 1.2 ...

  9. oracle 常用语法（）

    一ORACLE的启动和关闭 1在单机环境下 2在双机环境下 Oracle数据库有哪几种启动方式 1startup nomount 2startup mount dbname 3startup open ...

  10. 终于有人把Elasticsearch原理讲透了!学习的第一篇总览全局

    诗词大会引出的话题 随着央视诗词大会的热播,小史开始对诗词感兴趣,最喜欢的就是飞花令的环节. 但是由于小史很久没有背过诗词了,飞一个字很难说出一句,很多之前很熟悉的诗句也想不起来. 倒排索引 吕老师: ...