blog-test's People
Watchers
blog-test's Issues
Markdown 样式测试
标题1
标题2
标题3
标题4
标题5
sdgfsdgdsgds
- dsvsd
- dgfsdgs
| 指标 | 描述 | 计算方式 | 意义 |
|---|---|---|---|
| unload | 前一个页面卸载耗时 | unloadEventEnd - unloadEventStart | |
| redirect | 重定向耗时 | redirectEnd - redirectStart | 重定向的时间 |
| appCache | 缓存耗时 | domainLookupStart - fetchStart | 读取缓存的时间 |
| DNS时间 | DNS时间 | domainLookupEnd - domainLookupStart | 可观察域名解析服务是否正常 |
| TCP握手时间 | TCP握手时间 | connectEnd - connectStart | 建立连接的耗时 |
| ssl | SSL 安全连接耗时 | connectEnd - secureConnectionStart | 反映数据安全连接建立耗时 |
| TTFB（首字节时间） | TTFB是发出页面请求到接收到应 答数据第一个字节所花费的毫秒数 | responseStart – requestStart |
// FMP
// 前提设置某个DOM元素的elementtiming属性值为meaningful
new PerformanceObserver((entryList, observer) => {
let perfEntries = entryList.getEntries();
FMP = perfEntries[0];//startTime 2000以后
observer.disconnect();//不再观察了
}).observe({ entryTypes: ['element'] });//观察页面中的意义的元素observer.disconnect(); 行内代码块
Markdown 样式测试
标题1
标题2
标题3
标题4
标题5
sdgfsdgdsgds
- dsvsd
- dgfsdgs
| 指标 | 描述 | 计算方式 | 意义 |
|---|---|---|---|
| unload | 前一个页面卸载耗时 | unloadEventEnd - unloadEventStart | |
| redirect | 重定向耗时 | redirectEnd - redirectStart | 重定向的时间 |
| appCache | 缓存耗时 | domainLookupStart - fetchStart | 读取缓存的时间 |
| DNS时间 | DNS时间 | domainLookupEnd - domainLookupStart | 可观察域名解析服务是否正常 |
| TCP握手时间 | TCP握手时间 | connectEnd - connectStart | 建立连接的耗时 |
| ssl | SSL 安全连接耗时 | connectEnd - secureConnectionStart | 反映数据安全连接建立耗时 |
| TTFB（首字节时间） | TTFB是发出页面请求到接收到应 答数据第一个字节所花费的毫秒数 | responseStart – requestStart |
// FMP
// 前提设置某个DOM元素的elementtiming属性值为meaningful
new PerformanceObserver((entryList, observer) => {
let perfEntries = entryList.getEntries();
FMP = perfEntries[0];//startTime 2000以后
observer.disconnect();//不再观察了
}).observe({ entryTypes: ['element'] });//观察页面中的意义的元素observer.disconnect(); 行内代码块
前端性能上报
前端性能上报
前端性能上报的实现中，主要利用Performance API
首先来看看与性能相关的信息节点
相关属性解释
- navigationStart 准备加载页面的起始时间
- unloadEventStart 如果前一个文档和当前文档同源, 返回前一个文档开始 unload 的时间
- unloadEventEnd 如果前一个文档和当前文档同源, 返回前一个文档开始 unload 结束的时间
- redirectStart 如果有重定向, 这里是重定向开始的时间.
- redirectEnd 如果有重定向, 这里是重定向结束的时间.
- fetchStart 开始检查缓存或开始获取资源的时间
- domainLookupStart 开始进行 dns 查询的时间
- domainLookupEnd dns 查询结束的时间
- connectStart 开始建立连接请求资源的时间
- connectEnd 建立连接成功的时间.
- secureConnectionStart 如果是 https 请求. 返回 ssl 握手的时间
- requestStart 开始请求文档时间 (包括从服务器, 本地缓存请求)
- responseStart 接收到第一个字节的时间
- responseEnd 接收到最后一个字节的时间.
- domLoading 返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的readystatechange事件触发时）的Unix毫秒时间戳
- domInteractive 返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的Unix毫秒时间戳。
- domContentLoadedEventStart DOMContentLoaded 事件开始的时间
- domContentLoadedEventEnd DOMContentLoaded 事件结束的时间
- domComplete 返回当前网页DOM结构生成时（即Document.readyState属性变为“complete”，以及相应的readystatechange事件发生时）的Unix毫秒时间戳。
- loadEventStart 触发 onload 事件的时间
- loadEventEnd onload 事件结束的时间
根据字段计算出来有效信息：
| 指标 | 描述 | 计算方式 | 意义 |
|---|---|---|---|
| unload | 前一个页面卸载耗时 | unloadEventEnd - unloadEventStart | |
| redirect | 重定向耗时 | redirectEnd - redirectStart | 重定向的时间 |
| appCache | 缓存耗时 | domainLookupStart - fetchStart | 读取缓存的时间 |
| DNS时间 | DNS时间 | domainLookupEnd - domainLookupStart | 可观察域名解析服务是否正常 |
| TCP握手时间 | TCP握手时间 | connectEnd - connectStart | 建立连接的耗时 |
| ssl | SSL 安全连接耗时 | connectEnd - secureConnectionStart | 反映数据安全连接建立耗时 |
| TTFB（首字节时间） | TTFB是发出页面请求到接收到应 答数据第一个字节所花费的毫秒数 | responseStart – requestStart | |
| response | 响应数据传输耗时 | responseEnd – responseStart | 观察网络是否正常 |
| dom | DOM解析耗时 | domInteractive – responseEnd | 观察DOM结构是否合理，是否有 JS阻塞页面解析 |
| dcl | DOMContentLoaded事件耗时 | domContentLoadedEventEnd – domContentLoadedEventStart | 当 HTML 文档被完全加载和解析 完成之后，DOMContentLoaded 事件被触发，无需等待样式表、 图像和子框架的完成加载 |
| resources | 资源加载耗时 | domComplete – domContentLoadedEventEnd | 可观察文档流是否过大 |
| domReady | DOM阶段渲染耗时 | domContentLoadedEventEnd – fetchStart | DOM树和页面资源加载完成时 间，会触发 domContentLoaded 事件 |
| 首次渲染耗时 | 首次渲染耗时 | responseEnd-fetchStart | 加载文档到看到第一帧非空图像 的时间，也叫白屏时间 |
| 首次可交互时间 | 首次可交互时间 | domInteractive-fetchStart | DOM树解析完成时间，此时 document.readyState为 interactive |
| 首包时间耗时 | 首包时间 | responseStart- domainLookupStart | DNS解析到响应返回给浏览器第 一个字节的时间 |
| 页面完全加载时间 | 页面完全加载时间 | loadEventStart - fetchStart | |
| onLoad | onLoad事件耗时 | loadEventEnd – loadEventStart |
| 指标 | 描述 | 备注 | 计算方式 |
|---|---|---|---|
| FP | First Paint(首次绘制) | 包括了任何用户自定义的背景绘制，它是首先将像素 绘制到屏幕的时刻 | performance.getEntriesByName('first-paint')[0] |
| FCP | First Content Paint(首次内容绘制) | 是浏览器将第一个DOM渲染到屏幕的时间,可能是文本、图像、SVG等,这其实就是白屏时间 | performance.getEntriesByName('first-contentful-paint')[0] |
| FMP | First Meaningful Paint(首次有意义绘制) | 页面有意义的内容渲染的时间 | 设置某个DOM元素的elementtiming属性值为meaningful |
| LCP | (Largest Contentful Paint)(最大内容渲染) | 代表在viewport中最大的页面元素加载的时间 | |
| DCL | (DomContentLoaded) (DOM加载完成) | 当 HTML 文档被完全加载和解析完成之 后,DOMContentLoaded 事件被触发，无需等待样式 表、图像和子框架的完成加载 | |
| L | (onLoad) | 当依赖的资源全部加载完毕之后才会触发 | |
| TTI | (Time to Interactive)可交互时间 | 用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点 | |
| FID | First Input Delay(首次输入延迟) | 用户首次和页面交互(单击链接，点击按钮等)到页面响应交互的时间 |
// FP
let FP = performance.getEntriesByName('first-paint')[0];// FCP
let FCP = performance.getEntriesByName('first-contentful-paint')[0];// FMP
// 前提设置某个DOM元素的elementtiming属性值为meaningful
new PerformanceObserver((entryList, observer) => {
let perfEntries = entryList.getEntries();
FMP = perfEntries[0];//startTime 2000以后
observer.disconnect();//不再观察了
}).observe({ entryTypes: ['element'] });//观察页面中的意义的元素// LCP
new PerformanceObserver((entryList, observer) => {
let perfEntries = entryList.getEntries();
LCP = perfEntries[0];
observer.disconnect();//不再观察了
}).observe({ entryTypes: ['largest-contentful-paint'] });//观察页面中最大的元素加载时间参考文章
just a test
just a test sdgsd
just a test
这是DJL箫氏的博客的文章详情页面
just a test
http://localhost/article/5f8edbfcf89eaa7c4e2cd31c
这是DJL箫氏的博客的文章详情页面
Markdown 样式测试
标题1
标题2
标题3
标题4
标题5
sdgfsdgdsgds
- dsvsd
- dgfsdgs
| 指标 | 描述 | 计算方式 | 意义 |
|---|---|---|---|
| unload | 前一个页面卸载耗时 | unloadEventEnd - unloadEventStart | |
| redirect | 重定向耗时 | redirectEnd - redirectStart | 重定向的时间 |
| appCache | 缓存耗时 | domainLookupStart - fetchStart | 读取缓存的时间 |
| DNS时间 | DNS时间 | domainLookupEnd - domainLookupStart | 可观察域名解析服务是否正常 |
| TCP握手时间 | TCP握手时间 | connectEnd - connectStart | 建立连接的耗时 |
| ssl | SSL 安全连接耗时 | connectEnd - secureConnectionStart | 反映数据安全连接建立耗时 |
| TTFB（首字节时间） | TTFB是发出页面请求到接收到应 答数据第一个字节所花费的毫秒数 | responseStart – requestStart |
// FMP
// 前提设置某个DOM元素的elementtiming属性值为meaningful
new PerformanceObserver((entryList, observer) => {
let perfEntries = entryList.getEntries();
FMP = perfEntries[0];//startTime 2000以后
observer.disconnect();//不再观察了
}).observe({ entryTypes: ['element'] });//观察页面中的意义的元素observer.disconnect(); 行内代码块
[Markdown 样式测试](http://localhost/article/5f7fcb1d58025b60279d8c24)
dgsdg
http://localhost/admin/article/5f8edbfcf89eaa7c4e2cd31c
这是DJL箫氏的博客的文章详情页面
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.