锐客网

  1. 首页 > it技术 > >

性能相关的指标

一、各种性能 加载的性能、交互的性能、代码运行时的性能......
二、参考指标 1、navigationTimewindow.performance.timing 或window.performance .getEntriesByType('navigation')
?navigationStart：0点击页面链接、刷新、导航栏被修改
?redirectStart：重定向时才有
【性能相关的指标】?redirectEnd：重定向时才有
?fetchStart：49开始加载资源
?domainLookupStart：49dns 查询开始
?domainLookupEnd：49dns 查询结束
?connectStart：49TCP 链接开始建立的时间
?secureConnectionStart：49TCP 加密握手开始建立的时间
?connectEnd：49TCP链接建立完成的时间
?requestStart：51浏览器发出文档加载 HTTP 请求的时间点
?responseStart：183Time to first byte (TTFB)
?responseEnd：187连接关闭
?domLoading：189浏览器获取到了足够的 HTML，即将开始进行解析；这时 document.readyState 变为 'loading'
?domInteractive：393DOM 构建完成；这时 document.readyState 变为 ‘interactive’
?domContentLoaded：393The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.DOM 和 CSSOM 都构建完成了，可以开始构建 render tree。如果没有 JavaScript 脚本需要解析，那么 domInteractive 之后立刻就是 domContentLoaded。
?domComplete：518所有的资源（CSS、字体、图片等）都加载完成。这时 document.readyState 变为 'complete'
?loadEventStart：518the time immediately before the load event is fired
?loadEventEnd：518the load event is completed
2、paintTimewindow.performance.getEntriesByType('paint')
First Paint: The time when the first pixel is painted onto the screen. For example a background color of the page.
First Contentful Paint (FCP): The time when the first content piece from the DOM is painted, i.e. some text or an image.
First Meaningful Paint(FMP): The time when the browser paints the content that users are interested in. This is highly depends on the page.
The first two can actually be tracked by Chromes timing API and reported in Google Analytics for example.
The first meaningful paint (FMP) cannot be measured from browser APIs at the moment. The general idea when measuring the FMP would be to define Hero Elements, i.e. elements that make up the main user content, and measure their paint times. Currently there is no way to get the paint times of a specific element in the DOM
Tools like Lighthouse or WebPageTest estimate the FMP by taking the biggest layout change when rendering as the primary candidate.

性能相关的指标
文章图片

三、page lifecycle

dom树构建完成document.readyDOMContentLoaded– the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures 性能相关的指标
文章图片
首屏计算方案
https://github.com/weidian-inc/FE-blog/issues/1
参考： https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint
https://stackoverflow.com/questions/42209419/time-to-first-paint-vs-first-meaningful-paint
https://www.html5rocks.com/en/tutorials/webperformance/basics/

    推荐阅读


    上一篇：芦苇被微微吹过

    下一篇：将你们捧在手中