前面我們講了如何用
rollup打包代碼蟋恬，如何拿到數(shù)據(jù)，那么本期趁冈，我們就要講數(shù)據(jù)的用處
前情回顧：
制定標(biāo)準(zhǔn)
回歸我們的主題歼争，性能分析拜马，既是分析，那么就要有拆分的標(biāo)準(zhǔn)沐绒，分析不是主觀上的我認(rèn)為俩莽、我覺得，更不是我要我覺得乔遮。
既然制定標(biāo)準(zhǔn)扮超，我們就不是拍腦門去想。要科學(xué)的制定蹋肮，就必須有理論依據(jù)出刷，所以我查了很多官方資料。
名詞解釋
如果這里不知道這些名詞從哪里來的坯辩，我這里給個(gè)傳送門 性能分析（二）好戲開始：數(shù)據(jù)從何而來
domInteractive
domInteractive 是用戶代理將當(dāng)前文檔準(zhǔn)備就緒設(shè)置為interactive之前的時(shí)間馁龟，具體則表現(xiàn)為:
- 瀏覽器已完成對(duì)所有 HTML 的解析，并且 DOM 構(gòu)建已完成
- 瀏覽器處理頁面子資源開始
我們通常會(huì)將此刻稱之為 頁面可交互時(shí)間
domContentLoaded
domContentLoaded 是兩個(gè) DOM 都準(zhǔn)備就緒并且沒有樣式表阻止 JavaScript 執(zhí)行的關(guān)鍵點(diǎn)
- 此事件通常在 DOM 和 CSSOM 都準(zhǔn)備就緒時(shí)進(jìn)行標(biāo)記
- 意味著現(xiàn)在可以構(gòu)建渲染樹
- 如果沒有阻止 JavaScript 的解析器濒翻，則 DOMContentLoaded 將在 domInteractive 之后立即觸發(fā)
我們通常將此刻稱之為 DOM 準(zhǔn)備就緒時(shí)間屁柏，通常domContentLoaded會(huì)在domInteractive后立即執(zhí)行
domComplete
domComplete 是用戶代理將當(dāng)前文檔準(zhǔn)備就緒設(shè)置為“完成”之前的時(shí)間
- 它僅表示頁面及其所有子資源已準(zhǔn)備就緒
- 所有處理均已完成，頁面上的所有資源（圖像等）均已完成下載有送，chrome 上面那個(gè)轉(zhuǎn)圈圈也會(huì)停止
我們通常將此刻稱之為 DOM 完全就緒時(shí)間
新名詞制定
白屏?xí)r間
這里對(duì)https://juejin.im/timeline/following掘金的關(guān)注頁面截圖分析
FAST 3G 狀態(tài) FAST 3G 狀態(tài) FAST 3G 狀態(tài)
也就是大概再 4000ms 之前頁面所處于的狀態(tài)淌喻，那么如何得到這個(gè) 4000ms 呢？
很多爭議點(diǎn)都在此雀摘，很多人會(huì)有不同的定義方式裸删。這里給大家提供三個(gè)方案：
- 截止到
domInteractive - 截止到
domContentLoadedEventEnd - 截止到
performance.getEntries()中{ name: 'first-contentful-paint' }的時(shí)間
先說第三種，第三種是performanceAPI提供給我們的阵赠，也就是chrome認(rèn)為此刻處于有效內(nèi)容渲染時(shí)間涯塔，有效內(nèi)容渲染則表示為頁面的一部分渲染上去的時(shí)間。
第一種和第二種相差無幾清蚀，我個(gè)人比較推薦使用domInteractive這個(gè)來當(dāng)作白屏?xí)r間匕荸，首先通過domInteractive的含義:
瀏覽器已完成對(duì)所有 HTML 的解析，并且 DOM 構(gòu)建已完成
那么在此刻枷邪，document 已經(jīng)結(jié)束榛搔，解下來是資源的問題，如果我們頁面不包含任何外部資源东揣，那么此刻頁面即將立刻開始渲染践惑，所以這個(gè)時(shí)間點(diǎn)，恰好是進(jìn)行白屏卡邊的時(shí)間點(diǎn)嘶卧。
當(dāng)然你也可以認(rèn)為first-contentful-paint是白屏的結(jié)束尔觉，因?yàn)檫@是 chrome 提出的時(shí)間點(diǎn)。但是請(qǐng)明確芥吟，chrome 并不認(rèn)為此刻是白屏?xí)r間的結(jié)束侦铜，first-paint也同樣提供出來专甩，但是我們可以從圖上看出，完全不對(duì)钉稍。
DOM 完全就緒時(shí)間
這個(gè)就是domComplete就可以了配深，不過多贅述。
秒開率
既然我們制定了 白屏?xí)r間嫁盲，那么我們可以根據(jù) 白屏?xí)r間 制定第一個(gè)標(biāo)準(zhǔn) —— 秒開率
白屏?xí)r間在 1s 內(nèi) —— 秒開率
這個(gè)數(shù)據(jù)有什么意義？這個(gè)叫做指標(biāo)烈掠，通常情況下羞秤，我們會(huì)把績效盡可能的用客觀的角度去形容/描述。
“你去做一個(gè)調(diào)查左敌，問問大家對(duì) markdown 作為文檔編輯器怎么看瘾蛋？”
這是一個(gè)非常主觀的問題，在這種情況下矫限，大家會(huì)怎么做哺哼？首先，我們要制定一些標(biāo)準(zhǔn)：
- 你認(rèn)為 markdown 在編輯文檔的時(shí)候叼风，是否比使用 word 在便捷性上更好取董？
- 非常/偶爾/遜色/抵制
- 你認(rèn)為 markdown 在編輯文檔的時(shí)候，支持你需要的所有格式无宿？
- 非常/偶爾/遜色/抵制
- ...
我們通過對(duì)主觀問題茵汰，盡可能的通過客觀的描述，而客觀的描述孽鸡，最好是基于數(shù)字
跑題了一下蹂午，回歸我們的主題，所以我們需要盡量去制定客觀標(biāo)準(zhǔn)彬碱，而秒開率就是其中之一豆胸。
95 值（或者 N 值，N ∈ [0, 100]）
95 值是指所有數(shù)據(jù)的第 95%的位置的數(shù)據(jù)巷疼，通常我們把這個(gè)數(shù)據(jù)作為一個(gè)基線晚胡，例如 95%的白屏?xí)r間為 100ms，嘖說明全體用戶的 95%都已經(jīng)可以在 100ms 內(nèi)完成頁面白屏皮迟，這個(gè)數(shù)字是具體真實(shí)意義的搬泥。我們不可照顧到全體用戶，網(wǎng)絡(luò)環(huán)境/特殊情況導(dǎo)致你的數(shù)據(jù)會(huì)存在垃圾數(shù)據(jù)伏尼，那么我們的覆蓋面究竟要多少忿檩？
初期，我們可以降低標(biāo)準(zhǔn)爆阶，例如燥透，我們可以以 80 值開始沙咏，逐步開始增加到 85，80班套，95肢藐，甚至是 99，如果達(dá)到了 99 值吱韭，你的頁面已經(jīng)無敵了吆豹！
繪制圖
目前我們得到了幾個(gè)標(biāo)準(zhǔn)，更多的標(biāo)準(zhǔn)理盆，期待大家在留言中回復(fù)我痘煤。
白屏?xí)r間 | DOM 完全就緒時(shí)間
我們可以通過上報(bào)的數(shù)據(jù)，每天降維存儲(chǔ)猿规，最后以 95 值的形式體現(xiàn)衷快。
秒開率
我們可以通過追蹤每天數(shù)據(jù)，形成曲線姨俩，曲線更具表現(xiàn)變化蘸拔。
本期總結(jié)
本期我們講述了一些名詞的含義以及一些標(biāo)準(zhǔn)是如何制定的，相比到這里环葵，大家也對(duì)性能分析有一定了解了调窍。
下期預(yù)告
下期（或者后面幾期）我將會(huì)細(xì)致講述：
- 通過哪些方面的優(yōu)化可以提升上述指標(biāo)
- 業(yè)務(wù)環(huán)境下，如何跟蹤優(yōu)化業(yè)務(wù)過程
- 【暫時(shí)保密】
我是 ihap 技術(shù)黑洞的 ihap 肥少积担，歡迎點(diǎn)贊打賞陨晶，也請(qǐng)大家關(guān)注我們的公眾號(hào)，ihap 技術(shù)黑洞帝璧。
參考文獻(xiàn)
