前端性能优化的指标分析

我是大龄程序员
523 阅读4分钟

分析指标的方式

指标

  • TTFB （Time to First Byte）

    表示浏览器接收第一个字节的时间， 是一个衡量对资源的请求和响应的第一个字节开始和到达之间时间的指标。

    image.png

    TTFB 是下列请求节点的时间损耗汇总：

    Redirect time 重定向时延

    Service worker 启动时延（如果适用）

    DNS 查询时延

    建立连接和 TLS 所消耗时延

    请求，直到响应的第一个字节到达为止的时延

    减少连接建立和后端服务的时延将有助于降低 TTFB

    image.png

  • FP （First Paint）

    首次绘制: 标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点.

  • FCP (First Contentful Paint)

    首次内容绘制： 标记浏览器渲染来自 DOM 第一位内容的时间点

    Contentful 可以是如下类型：

    • <img> 元素
    • <svg> 中的 <image> 元素
    • <video> 元素（如果定义了封面图，会影响LCP）
    • 带 url() 背景图的元素
    • 块级元素带有文本节点或者内联文本子元素

  • LCP (Largest Contentful Paint)

    最大内容渲染: 代表可视区“内容”最大的可见元素开始出现在屏幕上的时间点。

    如果一个页面的 LCP 值很高，那么用户可能需要等待很长时间才能看到页面的主要内容，这可能会导致用户的体验下降，甚至可能导致用户离开页面。

    当页面在载入的过程中，Google 会去抓取页面可视范围中最大的元素，并会随时针对可视范围中的内容改变，直到页面完全载入(load)后，才会将页面中最大的元素订为LCP

    image.png

    以上图为例，绿色方块的区域是内容最大的元素，所以在这个例子中，LCP等于这个元素开始渲染的时间

    LCP的 Contentful 可以是如下类型：

    • <img> 元素
    • <svg> 中的 <image> 元素
    • <video> 元素（如果定义了封面图，会影响LCP）
    • 带 url() 背景图的元素
    • 块级元素带有文本节点或者内联文本子元素

    LCP控制到不超过2.5秒 image.png

    ps： LCP 绘制时间上报

    由于Web页面都是分阶段加载的，所以最大元素可能随时会发生变化。

    为了捕获这种变化，浏览器会派发一个类型是 largest-contentful-paint 的 PerformanceEntry 对象，表示浏览器绘制第一帧的时候最大的元素。在后来的渲染帧中，如果最大元素发生变化，会再次派发一个 PerformanceEntry 对象。

    举个例子，一个页面包含一个文本标题和一张图片，首帧渲染的时候，文本是最大元素，随着图片加载完成，图片或成为最大元素。

    只有元素已经渲染，而且对用户可见，这个元素才可以被当成最大元素。未加载的图片未被渲染，所以不会被考虑在内。如果用了自定义字体的文本，在字体文件加载之前，也不会被当成最大元素。

    后来被JS添加到dom树上的节点，如果尺寸大于之前的最大元素，浏览器也会派发一个 PerformanceEntry 对象。

    如果元素被移除，这个元素不会被当成最大元素。如果图片元素的src属性更改了，在新图片加载之前，这个元素也不会被当成最大元素。

    如果用户产生了交互行为（如点击、滚动、按键等），浏览器会停止上报新的entry，因为用户的交互行为可能会导致页面元素的可见性变化。

    对统计而言，你只需要统计最近上报的一次 PerformanceEntry 即可。

    需要注意的是，如果用户打开页面之后，切换到后台，等再次回到前台的时候，用户产生了交互行为，该埋点就不准确了，会比真实的时间延长一些。

  • TBT (Total Blocking Time)

    总阻塞时间 该指标测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间

  • DCL 表示DomContentloaded事件触发的时间。

  • L 表示onLoad事件触发的时间。

    DomContentloaded事件与onLoad事件的区别是，

    浏览器解析HTML这个操作完成后立刻触发DomContentloaded事件，

    而只有页面所有资源都加载完毕后（比如图片，CSS），才会触发onLoad事件。

avatar
文章
阅读
粉丝