想做前端性能優(yōu)化，就要知道從輸入url按下回車那一刻，到頁面呈現(xiàn)到你面前這個過程到底經(jīng)歷了什么？
從1.png的圖中我們可以總結(jié)為4點：
1、DNS解析次數(shù)
2、TCP連接接時間
3、Http請求和響應(yīng)
4、瀏覽器渲染
下面，我們將性能優(yōu)化分為請求速度優(yōu)化和渲染優(yōu)化兩部分來講：
1、請求速度優(yōu)化
資源從請求發(fā)出到接受這個部分要經(jīng)歷，DNS解析，TCP連接，請求和服務(wù)端響應(yīng)這幾個部分，并且這些部分都是要花費時間的，下面我們依次來講述如何減少各個節(jié)點的時間：
DNS解析
說到DNS解析，我們能做的就是將解析過程前置，就是俗稱的預(yù)解析，dns解析后會緩存，待真正請求資源時，就不會再花費DNS解析的時間。
注：瀏覽器會將我們頁面中使用的域名自動進(jìn)行dns解析，所以我們只需配置頁面中沒有出現(xiàn)的域名即可，但是要注意的是，要合理配置dns的解析，否則會浪費一些不必要的資源
TCP連接
講解如何減少TCP連接次數(shù)之前，先來復(fù)習(xí)下三次握手和四次揮手：
TCP三次握手??
Https比Http多了SSL解析（第四次握手??）
TCP四次揮手??
從上圖可以看到這個每次http請求所要連接和斷開的時間遠(yuǎn)遠(yuǎn)比我們想象的要多，但是頁面中避免不開http的請求，所以下面我們就要來說說如何減少tcp的連接次數(shù)：
1、Keep-alive
2、握手復(fù)用
3、減少http請求
4、http2戳我??
減少http請求我們常用的方法有：
1、合并靜態(tài)資源
2、緩存
3、本地存儲
緩存分為Memory cache，Disk cache，Servivce worker cache三種：
具體如何設(shè)置呢，打開控制臺，仔細(xì)看一看請求頭中的字段，可以總結(jié)為下圖：
服務(wù)端響應(yīng)
tcp建立連接后，就要面對靜態(tài)資源傳輸速度的問題，從傳輸這兩個字來看，肯定會和傳輸大小和傳輸距離有關(guān)，所以我們就要考慮如何將靜態(tài)資源變的小，傳輸距離變得短？
1、Gzip
2、構(gòu)建工具縮小js，css文件大小
3、CDN
CDN域名我們需要注意一下下，它和我們的域名是不一樣的哦，這樣它就不需要攜帶cookie，這樣也變相的減少了請求頭的大小
4、選擇合理的圖片類型
其他
多域名，利用瀏覽器的并發(fā)性，瀏覽器一次可以請求同域名下4-6個靜態(tài)資源，所以在遇到阻塞的情況，不同域名下的靜態(tài)資源則不會收到影響，所以可以利用多域名來加載靜態(tài)資源，但需要注意的是，不要設(shè)置過多域名，會造成性能浪費，3-4個就好
2、瀏覽器渲染優(yōu)化
眾所周知頁面解析時遇到link，js標(biāo)簽會停下等待資源的加載，并且為了防止瀏覽器裸奔，render tree的形成很重要，所以css放在頭部，js放在尾部是必然的
減少重繪和回流的次數(shù)
重繪：當(dāng)render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會影響布局的，比如background-color，則稱為重繪
回流：當(dāng)render tree中的一部分(或全部)因為元素的規(guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建，這就稱為回流
注意：回流必將引起重繪，而重繪不一定會引起回流
回流何時發(fā)生：
1、添加或者刪除可見的DOM元素
2、元素位置改變
3、當(dāng)頁面布局或幾何屬性改變——邊距、填充、邊框、寬度和高度
4、內(nèi)容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變
5、頁面渲染初始化
6、瀏覽器窗口尺寸改變——resize事件發(fā)生時
7、獲取offsetTop/Left/Width/Height , scrollTop/Left/Width/Height ,
clientTop/Left/Width/Height，Width/Height
所以：
1、用class來改變樣式
2、脫離文檔流，display：none或者position：absolute/fixed
3、dom結(jié)構(gòu)離線處理后一次插入
4、不要經(jīng)常訪問會引起瀏覽器flush隊列的屬性，如果你確實要訪問，利用緩存
懶加載
原則就是將必須呈現(xiàn)的東西快速加載，其余的資源可以按需加載，讓用戶快速看到頁面，減少等待時間
1、白屏?xí)r間（從按下回車到第一個元素出現(xiàn)的時間）
2、首屏?xí)r間（第一屏展示出的時間）
總結(jié)
極端的總結(jié)為一句話??：請求能少發(fā)就少發(fā)，資源能多小就多小，請求距離能多短就多短，dom操作能不變就不變，能一次做的絕不兩次做
性能優(yōu)化是一個漫長的過程，慢慢體驗??
