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. 02_Python基础

    2.1 第一条编程语句 print("Hello, Python!") print("To be, or not to be, it's a question." ...

  2. Qt 使用tablib获取多媒体tag信息

    最近项目需要, 要获取音乐文件tag信息. 有两个方式, 本人偏向第二种方式. 效率比较高,可控性比较好. 一.QML方式 使用QML Audio component 进行解析. 将多媒体文件都放到P ...

  3. 脑裂 CAP PAXOS 单元化 网络分区 最终一致性 BASE

    阿里技术专家甘盘:浅谈双十一背后的支付宝LDC架构和其CAP分析 https://mp.weixin.qq.com/s/Cnzz5riMc9RH19zdjToyDg 汤波(甘盘) 技术琐话 2020- ...

  4. XA Transactions

    XA Transactions XA is a two-phase commit protocol that is natively supported by many databases and t ...

  5. Convert a string into an ArrayBuffer

    https://github.com/mdn/dom-examples/blob/master/web-crypto/import-key/spki.js How to convert ArrayBu ...

  6. makefile自动生成学习

    https://www.cnblogs.com/jrglinux/p/6964169.html 关键是如何写Makefile.am  其他的交给 自动工具完成 添加一个 很好的博客 学习下 https ...

  7. mysql中int型的数字怎么转换成字符串

    字段:number  是integer类型    在表test中 select cast(number as char) as number from test; 或者convert()方法.因为转换 ...

  8. 谁再把IDEA的Project比作Eclipse的Workspace,我就跟谁急

    前言 你好,我是A哥(YourBatman). 有一个观点:若一个Java开发者能把IDEA玩得666,则技术一定不会差:但若玩不转IDEA(如不会设置.定制.解决日常问题.快捷键等等),那大概率水平 ...

  9. python 中excel表格的操作【转载】

    传说中python操作ms office功能最强大的是win32com,但只能要ms上使用. 不过对于比较简单的需求显得有些小题大作.那么来看下简单的,分别是xlrd和xlwt模块, 不过暂时只支持e ...

  10. Java——I/O,字节流与字符流,BufferedOutputStream,InputStream等(附相关练习代码)

    I/O: I/O是什么? 在程序中,所有的数据都是以流的形式进行传输或者保存. 程序需要数据的时候,就要使用输入流读取数据. 程序需要保存数据的时候,就要使用输出流来完成. 程序的输入以及输出都是以流 ...