最全的前端性能定位總結(jié)
前言
為啥第一篇文章就要寫前端性能定位相關(guān)呢 其實(shí)老粉都知道 性能優(yōu)化文章我早在去年六月就說要完成的 各種事情一耽誤 就過了大半年了 也是跨年之前的一位粉絲私信我問性能優(yōu)化文章啥時候出 這才提醒我 哈哈(感覺自己還欠下了許多文章沒更新) 這篇文章我不會介紹前端性能優(yōu)化的具體方法 因?yàn)槲矣X得寫具體如何優(yōu)化的文章太多了 咱們主要來關(guān)注下 如何分析自己的系統(tǒng)前端性能瓶頸在哪里 看看自己的寫的代碼性能能到多少分 是不是很刺激 不過 文章有點(diǎn)長 前面的理論介紹會有點(diǎn)多 大家可以收藏下方便日后查漏補(bǔ)缺 最后 非常感謝鯊魚哥之前團(tuán)隊(duì)的一位同學(xué)（康智）幫忙整理 歡迎大家點(diǎn)擊 鏈接 加入到鯊魚哥的前端群 內(nèi)推 討論技術(shù) 摸魚 求助 皆可
整理不易 如果覺得本文有幫助 記得點(diǎn)贊三連哦 十分感謝！
性能優(yōu)化的意義
1. 性能是留住用戶很重要的一環(huán)
pinterest 重建了他們的頁面以實(shí)現(xiàn)性能，使感知等待時間減少了 40％，從而將搜索引擎流量和注冊量提高了 15％。
通過將平均頁面加載時間減少 850 毫秒，COOK 發(fā)現(xiàn)他們能夠?qū)⑥D(zhuǎn)化率提高 7％，將跳出率降低 7％，并將每個頁面的頁面數(shù)量增加 10％。
BBC 發(fā)現(xiàn)，他們在網(wǎng)站加載的每一秒鐘內(nèi)就會損失 10％ 的用戶。
DoubleClick by Google 發(fā)現(xiàn)，如果網(wǎng)頁加載時間超過 3 秒，則會有 53％ 的用戶放棄移動網(wǎng)站的訪問。
2. 性能是改善轉(zhuǎn)換率至關(guān)重要的一環(huán)
對于 Mobify，主頁加載速度每減少 100 毫秒，基于會話的轉(zhuǎn)換增加 1.11％，平均年收入增加近 380,000 美元。此外，結(jié)賬頁面加載速度減少 100 毫秒，基于會話的轉(zhuǎn)換增加了 1.55％，從而使年均收入增長近 530,000 美元 DoubleClick 發(fā)現(xiàn)在 5 秒內(nèi)加載網(wǎng)站的發(fā)布商的廣告收入是在 19 秒內(nèi)加載的網(wǎng)站的兩倍。. 當(dāng) AutoAnything 將頁面加載時間縮短一半時，他們的銷售額增長了 12-13％。
用戶角度的性能標(biāo)準(zhǔn)是什么
著名的 2-5-8 原則
當(dāng)用戶能夠在 2 秒以內(nèi)得到響應(yīng)時，會感覺系統(tǒng)的響應(yīng)很快；
當(dāng)用戶在 2-5 秒之間得到響應(yīng)時，會感覺系統(tǒng)的響應(yīng)速度還可以；
當(dāng)用戶在 5-8 秒以內(nèi)得到響應(yīng)時，會感覺系統(tǒng)的響應(yīng)速度很慢，但是還可以接受；
而當(dāng)用戶在超過 8 秒后仍然無法得到響應(yīng)時，會感覺系統(tǒng)糟透了，或者認(rèn)為系統(tǒng)已經(jīng)失去響應(yīng)，而選擇離開這個 Web 站點(diǎn)，或者發(fā)起第二次請求。
綜上所述：一個網(wǎng)站的性能好壞是留住用戶和實(shí)現(xiàn)變現(xiàn)的基礎(chǔ)
而我們的目標(biāo)就是力爭 1s，保住 2s
1s 的差距，看似微乎其微，但這 1s，瀏覽器實(shí)際上可以做非常多的事情 接下來讓我們來看看如何對一個網(wǎng)站進(jìn)行性能分析
常見網(wǎng)站性能指標(biāo)
FP 白屏（First Paint Time ）： 從頁面開始加載到瀏覽器中檢測到渲染（任何渲染）時被觸發(fā)（例如背景改變，樣式應(yīng)用等）
白屏?xí)r間過長，會讓用戶認(rèn)為我們的頁面不能用或者可用性差
FCP 首屏（first contentful paint ）：從頁面開始加載到頁面內(nèi)容的任何部分呈現(xiàn)在屏幕上的時間。 （關(guān)注的焦點(diǎn)是內(nèi)容，這個度量可以知道用戶什么時候收到有用的信息（文本，圖像等））
FMP 首次有效繪制（First Meaningful Paint ）： 表示頁面的“主要內(nèi)容”，開始出現(xiàn)在屏幕上的時間點(diǎn)，這項(xiàng)指標(biāo)因頁面邏輯而異，因此上不存在任何規(guī)范。（只是記錄了加載體驗(yàn)的最開始。如果頁面顯示的是啟動圖片或者 loading 動畫，這個時刻對用用戶而言沒有意義）
LCP（Largest Contentful Paint ）：LCP 指標(biāo)代表的是視窗最大可見圖片或者文本塊的渲染時間。 （可以幫助我們捕獲更多的首次渲染之后的加載性能，但這項(xiàng)指標(biāo)過于復(fù)雜，而且很難解釋，也經(jīng)常出錯，沒辦法確定主要內(nèi)容什么時候加載完。）
長任務(wù)（Long Task）：當(dāng)一個任務(wù)執(zhí)行時間超過 50ms 時消耗到的任務(wù) （50ms 閾值是從 RAIL 模型總結(jié)出來的結(jié)論，這個是 google 研究用戶感知得出的結(jié)論，類似用戶的感知/耐心的閾值，超過這個閾值的任務(wù)，用戶會感知到頁面的卡頓）
TTI （Time To Internative）：從頁面開始到它的主要子資源加載到能夠快速地響應(yīng)用戶輸入的時間。（沒有耗時長任務(wù)）
首次輸入延時 FID （first Input Delay）：從用戶第一次與頁面交互到瀏覽器實(shí)際能夠開始處理事件的時間。（點(diǎn)擊，輸入，按鍵）
總阻塞時間 TBT（total blocking time ）： 衡量從 FCP 到 TTI 之間主線程被阻塞時長的總和。
DCL （DOMContentLoaded）：當(dāng) HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)，無需等待樣式，圖像和子框架的完成加載。
L（onLoaded）：當(dāng)依賴的資源，全部加載完畢之后才會觸發(fā)
CLS(Cumulative Layout Shift): 是所有布局偏移分?jǐn)?shù)的匯總，凡是在頁面完整生命周期內(nèi)預(yù)料之外的布局偏移都包括。布局偏移發(fā)生在任意時間，當(dāng)一個可見元素改變了它的位置，從一個渲染幀到下一個
思考 ==$.ready 和 window.onLoad 有什么區(qū)別？==
上面介紹了 11 種性能指標(biāo) 大家沒必要搞懂每一個指標(biāo)的定義 我們來看看我們需要關(guān)注的核心的幾個性能指標(biāo)
Google Web Vitals - 使用者體驗(yàn)量化
web-vitals: Google 于 2020 年 5 年 5 日提出了新的使用者體驗(yàn)量化方式，推出 Web Vitals 是簡化這個學(xué)習(xí)的曲線，大家只要觀注 Web Vitals 指標(biāo)表現(xiàn)即可；
web-vitals 集成了 5 個指標(biāo)的 api,核心指標(biāo)有 3 個；
LCP 顯示最大內(nèi)容元素所需時間 (衡量網(wǎng)站初次載入速度) FID 首次輸入延遲時間 (衡量網(wǎng)站互動順暢程度) CLS 累計版面配置移轉(zhuǎn) (衡量網(wǎng)頁元件視覺穩(wěn)定性)
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>