性能优化（1）——性能工具和指标

请叫我_议员
190 阅读3分钟

谷歌浏览器Chrome DevTools

一. Network选项卡

Network是网站的加载指标

1. 谷歌浏览器下的Network下需要勾选的信息

  • Use large request rows
  • Show overview（资源的加载时间表）
  • Capture screenshots（加载时间段的网页截图）

2. 请求大概指标

image.png

我们可以看到的指标有：52个请求、23.2MB大小、DOM完成的时间为1.11s、总资源加载的时间为4.11s

3. 各个资源的加载情况Waterfall

Waterfall也称瀑布图

image.png

把鼠标悬浮上去就能看到具体的指标信息

image.png

我们可以看到的指标有：Queueing（请求等待时间）、DNS Lookup（DNS解析时间）、Initial connection（TCP连接）、Request sent（上传时间）、Waiting（请求发出到响应的时间，是比较重要的指标）、Content Download（下载时间）

4. 时间线

image.png

蓝的这条是dom的加载时间，红的这条是所有声明资源加载的时间

二. Lighthouse选项卡

Lighthouse是网站的渲染指标

1. First Contentful Paint

这个指标的含义为非白屏的时间，可以是第一个文字或者图片出来的时间。

2. Speed Index

官方的速度

3. Largest Contentful Paint

最大的有意义内容花费的时间

4. Opportunity

分析出可优化的空间

Lighthouse

谷歌官方提供的性能测试工具（注意不是谷歌浏览器上的Lighthouse）

安装

npm install -g lighthouse

使用

lighthouse http://www.bilibili.com

我怎么感觉和谷歌浏览器上的一样呢，可能是现在浏览器升级了。

WebPageTest

国外评估网站性能的工具：webpagetest.org

可本地部署

Web标准APIs

接下来介绍一下web有关性能优化相关的api

performance对象

window.addEventListener('load', () => {
  let timing = performance.getEntriesByType('navigation')[0]
  let tti = timing.domInteractive - timing.fetchStart
  console.log(tti);
})

各个指标的含义：

  • 第 1 步 开始计时 startTime：记录开始时间。

  • 第 2 步 重定向 redirectStart：重定向开始时间。 redirectEnd：重定向结束时间。

  • 第 3 步 浏览器与服务器连接 fetchStart：浏览器发起 HTTP 请求时间。 domainLookupStart：DNS 查询开始时间。 domainLookupEnd：DNS 查询结束时间。 connectStart：TCP 连接开始时间。 connectEnd：TCP 连接结束时间。

  • 第 4 步 浏览器与服务器数据交互 secureConnectionStart：浏览器跟服务器建立安全连接的时间。 requestStart：浏览器向服务器开始发送数据的时间。 responseStart：服务器向浏览器开始发送数据的时间。 responseEnd：服务器向浏览器结束发送数据的时间。

  • 第 5 步 浏览器 DOM 解析 domLoading：DOM 开始解析的时间。 domInteractive：DOM 解析完成，开始加载内嵌资源的时间。 domContentLoadedEventStart：需要被执行的脚本已经被解析的时间。 domContentLoadedEventEnd：需要立即执行的脚本已经被执行的时间。 domComplete：文档解析完毕的时间。

指标的计算公式

  • 首屏加载时间: domComplete - navigationStart

  • 重定向次数：performance.navigation.redirectCount

  • 重定向耗时: redirectEnd - redirectStart

  • DNS 解析耗时: domainLookupEnd - domainLookupStart

  • TCP 连接耗时: connectEnd - connectStart

  • SSL 安全连接耗时: connectEnd - secureConnectionStart

  • 网络请求耗时 (TTFB): responseStart - requestStart

  • 数据传输耗时: responseEnd - responseStart

  • DOM 解析耗时: domInteractive - responseEnd

  • 资源加载耗时: loadEventStart - domContentLoadedEventEnd

  • 首包时间: responseStart - domainLookupStart

  • 白屏时间: responseEnd - fetchStart

  • 首次可交互时间: domInteractive - fetchStart

  • DOM Ready 时间: domContentLoadEventEnd - fetchStart

  • 页面完全加载时间（load）: loadEventStart - fetchStart

  • http 头部大小： transferSize - encodedBodySize

PerformanceObserver构造函数

示例：通过PerformanceObserver获取所有的longtask对象(加载比较大的)

let observer = new PerformanceObserver(list => {
  for(const entry of list.getEntries()) {
    console.log(entry);
  }
})

observer.observe({ entryTypes: ['longtask'] })

visibilitychange 选项卡的内容是否可见

let vEvent = document.webkitHidden ? 'visibilitychange' : 'webkitvisibilitychange'

function visibilitychange() {
  if(document.hidden || document.webkitHidden) {
    console.log('page is hidden');
    return
  }
  console.log('page is visibile');
}

document.addEventListener(vEvent, visibilitychange)

navigator 获取用户网络状态

let connection = navigator.connection || navigator.mozConnection || navigator.msConnection || navigator.webkitConnection
let type = connection.effectiveType

function updateConnectionStatus() {
  console.log('connection change from' + type + 'to' + connection.effectiveType);
}

connection.addEventListener('change', updateConnectionStatus)
avatar
文章
阅读
粉丝