需求調(diào)研
最近有接手一個(gè)新項(xiàng)目需要獲取一系列的性能指標(biāo)：建連時(shí)間? ssl握手時(shí)長(zhǎng) 首包時(shí)間? 首屏?xí)r間? 下載時(shí)長(zhǎng)? 下載總時(shí)間? 下載速率? 穆桂，需要模擬一系列的測(cè)試場(chǎng)景：需要對(duì)比1k,10k,100k,1m,10m,100m需要對(duì)比視頻流播放城豁，需要對(duì)比文件下載咪啡，需要對(duì)比多路重傳
手工測(cè)試方案：使用chrome的dev tool查看記錄數(shù)據(jù)
解決方案：
1狭魂、獲取性能指標(biāo)：
使用window.performance.timing API
(https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceTiming)
PerformanceTiming.navigationStart 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)萍鲸，表征了從同一個(gè)瀏覽器上下文的上一個(gè)文檔卸載(unload)結(jié)束時(shí)的UNIX時(shí)間戳趟妥。如果沒有上一個(gè)文檔钝侠，這個(gè)值會(huì)和PerformanceTiming.fetchStart相同脱柱。
PerformanceTiming.unloadEventStart 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)伐弹，表征了unload事件拋出時(shí)的UNIX時(shí)間戳。如果沒有上一個(gè)文檔，or if the previous document, or one of the needed redirects, is not of the same origin, 這個(gè)值會(huì)返回0.
PerformanceTiming.unloadEventEnd 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)惨好，表征了unload事件處理完成時(shí)的UNIX時(shí)間戳煌茴。如果沒有上一個(gè)文檔，or if the previous document, or one of the needed redirects, is not of the same origin, 這個(gè)值會(huì)返回0.
PerformanceTiming.redirectStart 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)日川，表征了第一個(gè)HTTP重定向開始時(shí)的UNIX時(shí)間戳蔓腐。如果沒有重定向，或者重定向中的一個(gè)不同源龄句，這個(gè)值會(huì)返回0.
PerformanceTiming.redirectEnd 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)回论，表征了最后一個(gè)HTTP重定向完成時(shí)（也就是說是HTTP響應(yīng)的最后一個(gè)比特直接被收到的時(shí)間）的UNIX時(shí)間戳。如果沒有重定向分歇，或者重定向中的一個(gè)不同源傀蓉，這個(gè)值會(huì)返回0.
PerformanceTiming.fetchStart 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)，表征了瀏覽器準(zhǔn)備好使用HTTP請(qǐng)求來獲取(fetch)文檔的UNIX時(shí)間戳职抡。這個(gè)時(shí)間點(diǎn)會(huì)在檢查任何應(yīng)用緩存之前葬燎。
PerformanceTiming.domainLookupStart 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)，表征了域名查詢開始的UNIX時(shí)間戳缚甩。如果使用了持續(xù)連接(persistent connection)谱净，或者這個(gè)信息存儲(chǔ)到了緩存或者本地資源上，這個(gè)值將和 PerformanceTiming.fetchStart一致擅威。
PerformanceTiming.domainLookupEnd 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)壕探，表征了域名查詢結(jié)束的UNIX時(shí)間戳。如果使用了持續(xù)連接(persistent connection)郊丛，或者這個(gè)信息存儲(chǔ)到了緩存或者本地資源上浩蓉，這個(gè)值將和 PerformanceTiming.fetchStart一致。
PerformanceTiming.connectStart 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)宾袜，返回HTTP請(qǐng)求開始向服務(wù)器發(fā)送時(shí)的Unix毫秒時(shí)間戳捻艳。如果使用持久連接（persistent connection），則返回值等同于fetchStart屬性的值庆猫。
PerformanceTiming.connectEnd 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)认轨，返回瀏覽器與服務(wù)器之間的連接建立時(shí)的Unix毫秒時(shí)間戳。如果建立的是持久連接月培，則返回值等同于fetchStart屬性的值嘁字。連接建立指的是所有握手和認(rèn)證過程全部結(jié)束。
PerformanceTiming.secureConnectionStart 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)杉畜，返回瀏覽器與服務(wù)器開始安全鏈接的握手時(shí)的Unix毫秒時(shí)間戳纪蜒。如果當(dāng)前網(wǎng)頁不要求安全連接，則返回0此叠。
PerformanceTiming.requestStart 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)纯续，返回瀏覽器向服務(wù)器發(fā)出HTTP請(qǐng)求時(shí)（或開始讀取本地緩存時(shí)）的Unix毫秒時(shí)間戳。
PerformanceTiming.responseStart 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)，返回瀏覽器從服務(wù)器收到（或從本地緩存讀肉怼）第一個(gè)字節(jié)時(shí)的Unix毫秒時(shí)間戳窗看。如果傳輸層在開始請(qǐng)求之后失敗并且連接被重開，該屬性將會(huì)被數(shù)制成新的請(qǐng)求的相對(duì)應(yīng)的發(fā)起時(shí)間倦炒。
PerformanceTiming.responseEnd 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)显沈，返回瀏覽器從服務(wù)器收到（或從本地緩存讀取，或從本地資源讀确昊健）最后一個(gè)字節(jié)時(shí)（如果在此之前HTTP連接已經(jīng)關(guān)閉拉讯，則返回關(guān)閉時(shí)）的Unix毫秒時(shí)間戳。
PerformanceTiming.domLoading 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)鳖藕，返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)開始解析時(shí)（即Document.readyState屬性變?yōu)椤發(fā)oading”遂唧、相應(yīng)的 readystatechange事件觸發(fā)時(shí)）的Unix毫秒時(shí)間戳。
PerformanceTiming.domInteractive 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)吊奢，返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)結(jié)束解析盖彭、開始加載內(nèi)嵌資源時(shí)（即Document.readyState屬性變?yōu)椤癷nteractive”、相應(yīng)的readystatechange事件觸發(fā)時(shí)）的Unix毫秒時(shí)間戳页滚。
PerformanceTiming.domContentLoadedEventStart 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)召边，返回當(dāng)解析器發(fā)送DOMContentLoaded 事件，即所有需要被執(zhí)行的腳本已經(jīng)被解析時(shí)的Unix毫秒時(shí)間戳裹驰。
PerformanceTiming.domContentLoadedEventEnd 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)隧熙，返回當(dāng)所有需要立即執(zhí)行的腳本已經(jīng)被執(zhí)行（不論執(zhí)行順序）時(shí)的Unix毫秒時(shí)間戳。
PerformanceTiming.domComplete 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)，返回當(dāng)前文檔解析完成，即Document.readyState 變?yōu)?'complete'且相對(duì)應(yīng)的``readystatechange 被觸發(fā)時(shí)的Unix毫秒時(shí)間戳油宜。
PerformanceTiming.loadEventStart 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)，返回該文檔下躏敢，load事件被發(fā)送時(shí)的Unix毫秒時(shí)間戳。如果這個(gè)事件還未被發(fā)送整葡，它的值將會(huì)是0件余。
PerformanceTiming.loadEventEnd 只讀
是一個(gè)無符號(hào)long long 型的毫秒數(shù)，返回當(dāng)load事件結(jié)束遭居，即加載事件完成時(shí)的Unix毫秒時(shí)間戳啼器。如果這個(gè)事件還未被發(fā)送，或者尚未完成俱萍，它的值將會(huì)是0.
自動(dòng)化:puppeteer支持chrome devtool protocol獲取協(xié)議名稱
(https://chromedevtools.github.io/devtools-protocol/)
調(diào)用過程
使用tracing api獲取性能指標(biāo)
開啟端壳，關(guān)閉tracing：
解析tracing：
2、性能數(shù)據(jù)入庫
nodejs+sqlite3方案;
數(shù)據(jù)：
3枪蘑、可視化展示
Django+layui+echarts
使用puppteer測(cè)試框架损谦，基于它對(duì)chrome的良好支持岖免，可以把很多chrome調(diào)試的手工工作實(shí)現(xiàn)自動(dòng)化，大家對(duì)puppeteer有什么妙用呢成翩？歡迎回復(fù)和討論！
