性能分析（二）好戲開始：數據從何而來

上回書說到，前戲作足，因而咱們採起了rollup來打包咱們的js-sdk，那麼工具都有了，就要準備正事了。

本篇內容是連續，建議收藏，開篇會有前幾篇連接。開此專題會帶領你們如何開發一個真正的，有意義的性能分析系統，而不是單純的炫技。

性能分析，首要的就是數據，本期就帶你們在數據的海洋裏撈針。

前情回顧：性能分析（一）前戲：用 rollup 打包一個 js-sdk

收集數據

Performance - Web APIs | MDN

PerformanceAPI 是使用最多的，經過這個 api，咱們能夠採集到頁面的不少數據，例如domCompleteDOM 完成時間，domInteractiveDOM 可交互時間等等。

const [pagePerformance] = performance.getEntries();
console.log(pagePerformance);
複製代碼

能夠看到，pagePerformance是個很是大的對象，咱們來分析一下這個對象。

參數	翻譯	含義
startTime	開始時間	表示整個 document 資源開始的時間，通常爲 0
redirectStart	重定向時間	表示開始重定向的時間（若是沒有則爲 0）
redirectEnd	重定向結束時間	表示結束重定向的時間（若是沒有則爲 0）
redirectCount	重定向次數	表示產生重定向的次數
fetchStart	請求開始時間	表示客戶端開始準備請求的時間
domainLookupStart	創建DNS開始	表示DNS開始創建的時間
domainLookupEnd	DNS創建結束	表示DNS創建成功的時間
connectStart	創建TCP開始	表示TCP鏈接開始創建的時間
secureConnectionStart	HTTPS創建時間	若是有HTTPS，則記錄HTTPS創建開始時間
connectEnd	TCP創建結束	表示TCP鏈接創建成功的時間
requestStart	資源開始請求時間	表示資源開始請求的時間
responseStart	首字節到達時間ttfb	表示服務端返回第一個字節記錄的時間
responseEnd	資源徹底抵達時間	表示資源徹底抵達，dom開始渲染
domInteractive	dom可交互時間	表示dom渲染進入可交互時間
domContentLoadedEventStart	domContentLoaded 事件觸發時間	表示 domContentLoaded 事件觸發的時間
domContentLoadedEventEnd	domContentLoaded 事件完成觸發時間	表示 domContentLoaded 事件結束觸發的時間
domComplete	dom完成的時間	表示dom完成的時間
nextHopProtocol	http 協議	-

這一個大表看下來，你們會以爲，東西太亂太雜了，是的，由於沒有通過加工的數據，就是雜亂無章的，因此咱們稍微整理一下。首先咱們須要知道，頁面加載的流程是什麼，通過我不懈努力的尋找，獲得下面這個圖

按照上圖，咱們能夠獲得新的結構(這裏的時間是毫秒時間，eg: 14.644999988377094 ms)

參數	翻譯	算法
startTime	開始時間	startTime || fetchStart
redirect	重定向時間	redirectEnd-redirectStart
dns	DNS 創建時間	domainLookupEnd-domainLookupStart
tcp	TCP 創建時間	connectEnd-connectStart
response	資源加載時間	responseEnd-requestStart(注意這裏是response-request)
interactive	可交互時間	domInteractive-responseEnd
content	內容加載時間	domContentLoadedEventEnd-domContentLoadedEventStart
complete	dom 完成時間	domComplete-responseEnd
nextHopProtocol	http 協議	-

新的結構看起來就舒服多了，咱們能夠看到，有些數據是表示間隔，有些數據則是同一個timeline，那麼這張圖，咱們獲得一個新的性能分析timing圖以下所示:

上下其手

既然知道須要收集什麼數據，咱們就開始着手行動

1. 收集咱們上一節提到的perormance timing數據
2. 收集一些額外的物理數據，例如 瀏覽器信息、操做系統信息等
3. 制定上報策略，環境隔離

瀏覽器信息 & 操做系統信息

經過user-agent咱們能夠解析上述信息，這裏我提供給你們兩個不錯的解析工具，固然網上也能夠搜到不少相關資料，暫不贅述。

UAParser.js A JavaScript-based User-Agent string parser. Can be used either in browser (client-side) or in node.js (server-side) environment.

useragent.js A User-agent analyze project.

分辨率信息

利用window.screen提供的width和height便可

開工

import UAParser from 'ua-parser-js';
import axios from 'axios';

class FirstPaintTiming {
  get requestUrl() {
    return (
      {
        test: 'https://ihap.txdy.test.fakeurl/api/v1/page',
        production: 'https://ihap.txdy.production.fakeurl/api/v1/page',
      }[this.env] || false
    );
  }

  constructor(options = { env: 'test' }) {
    this.env = options.env;
  }

  upload2Server() {
    try {
      requestUrl && axios.post(requestUrl, [this.getPageInfo()]);
    } catch {}
  }

  getPageInfo() {
    return {
      ...this._getPagePerformance(),
      ...this._getPhysics(),
    };
  }

  _getPagePerformance() {
    const [pagePerformance] = performance.getEntries();
    return {
      startTime: pagePerformance.startTime || pagePerformance.fetchStart,
      redirect: pagePerformance.redirectEnd - pagePerformance.redirectStart,
      dns: pagePerformance.domainLookupEnd - pagePerformance.domainLookupStart,
      tcp: pagePerformance.connectEnd - pagePerformance.connectStart,
      response: pagePerformance.responseEnd - pagePerformance.requestStart,
      interactive: pagePerformance.domInteractive - pagePerformance.responseEnd,
      content:
        pagePerformance.domContentLoadedEventEnd - pagePerformance.domContentLoadedEventStart,
      complete: pagePerformance.domComplete - pagePerformance.responseEnd,
      nextHopProtocol: pagePerformance.nextHopProtocol,
    };
  }

  _getPhysics() {
    const uaParser = new UAParser().getResult();

    const { name: browserName, version: browserVersion } = uaParser.browser;
    const { name: osName, version: osVersion } = uaParser.os;
    return {
      os: `${browserName}${browserVersion}`,
      browser: `${osName}${osVersion}`,
    };
  }
}
複製代碼

本期總結

本期，咱們講了數據從何而來以及數據採集的方法，可是實現一個性能分析的js-sdk咱們目前仍然缺乏一些關鍵的內容：

1. 上報策略制定
2. 數據上報以後如何分析
3. 統一上報接口
4. 對接外網出口（驗籤體系）
5. npm 包管理，beta/正式版本管理
6. (extra) 資源數據分析模塊
7. (extra) 如何對業務產生有效的影響？如何利用性能分析系統加強業務支持。

下期預告

下次咱們會進入慢熱節奏，着重講述上報策略與統一上報接口的內容。請你們拭目以待！我是 ihap 技術黑洞的 ihap 肥少，歡迎點贊打賞，也請你們關注咱們的公衆號，ihap 技術黑洞。

參考文獻

www.cnblogs.com/lzbk/p/6330… 前端頁面性能參數蒐集 www.w3.org/TR/navigati… Navigation Timing developer.mozilla.org/en-US/docs/… Performance - Web APIs | MDN