前端性能優化筆記

前端性能優化能夠從下載資源上着手優化

一、 資源越小下載的越快，壓縮文件（html，css，js等）
服務器端的資源文件被壓縮的越小，客戶端在下載的時候，就越快
圖片優化，不用的時候不加載（懶加載），選擇合適的圖片類型

二、 路徑上，經過CDN（content delivery network）， 內容分發網絡，讓資源下載的更快
使用CDN的好處

採用CDN的時候，不帶cookie，能夠減小請求頭的大小
減小主域的壓力
實現靜態資源和動態資源分離
同一個域名下請求的數量是有限的，經過瀏覽器工具的network可看到request數量
安全問題，但主域不工做的時候，CDN能夠響應請求

三、 瀏覽器緩存
每次請求時，不是從新去請求數據，而是從緩存中讀取數據。具體參考http緩存

前端性能測試工具

pageSpeed 重點測試頁面的加載速度

• 首次內容繪製FCP（frist conntentful paint） 瀏覽器將第一個dom渲染到屏幕的時間，也就是一般所說的白屏時間
• 文檔加載時間DCL（domContentLoaded）

lighthouse 側重於用戶體驗

• 首次有意義的繪製FMP（frist meaningful paint） ，就是說主要內容出如今頁面上的時間，用戶但願看到的主要內容出如今屏幕上的時間

首屏出現後，即FCP出現後，儘快出現有意義的繪製，即儘快出現FMP
經過計算關鍵元素的渲染時間來測量FCP，好比測量主要css的加載完成時間，或者測量關鍵圖片的加載完成時間等等。
如何測量呢，經過新的APT，如PerformanceObserver, PerformanceEntry可計算加載完成時間。

瀏覽器控制檯

瀏覽器控制檯中newtork中的disable cache 顧名思義就是不容許緩存
意思就是瀏覽器端，確定去發送http請求，而且請求頭中帶上：
'cache-control: no-cache'; 這樣必定去請求響應

經過瀏覽器控制檯去進行性能分析的時候，常常查看的地方，主要有瀑布圖（Timing），藍線與紅線（DOMContentLoaded，Load的時間）
經過查看瀑布圖，可看到是在哪些地方花時間了，而後看能不能在這裏進行優化
DOMContentLoaded的時間： html文檔被加載和解析成DOM的時間
Load的時間： 全部資源被加載完成， 包括css，js，圖片，視頻，音頻等

前端性能優化還能夠從下載資源後，頁面進行渲染性能優化

優化首屏時間

首屏時間指的是：在用戶沒有與瀏覽器交互的狀況下，在瀏覽器上看到完整內容而且達到能夠交互的狀態的這一段時間。

優化css的發送過程：
若是css很大，超過15kb， 則須要經過外聯加載，
若是很小，好比不到1kb， 但是直接放在head中，經過inline的方式加載進來，（可經過構建工具將css導入到head中）
這樣能夠加速首屏的時間。

js放在body底部的理由

都說js放在底部可讓頁面儘快呈現，理由是什麼呢。

渲染引擎取得內容以後，在進行渲染的時候，
一、先解析html構建dom樹，同時解析css構建規則樹
二、經過第一步生成的dom樹和規則樹構建render樹
三、佈局render樹
四、根據佈局繪製，最後顯示頁面

個人疑惑：
body底部的js若是沒有被執行完成，DOM樹能生成碼？

理解： DOM樹的構成是由解析器從上至下，一步一步輸出的，DOM樹構建的同時，瀏覽器還會構建呈現樹。
也就是說，瀏覽器每解析一個節點的同時，也開始構建呈現樹，只要這個節點被解析完成，就能夠經過js獲取這個節點。
當解析完html，dom content loaded完成。
也就是說，出如今js前面的dom節點，能夠經過js獲取前面的dom進行相關的操做，
也就是說js的執行不須要等DOM樹所有被解析完。

也就是說DOM樹完成以前需不須要等待body中的js執行完？

正常狀況下，DOM樹完成以前須要等待body中的js執行完,也就是說DOM content loaded完成以前，須要全部的js執行完。
除非script是defer或者是async加載的，就不會影響DOM的生成。

script標籤放在body底部加載的話，爲何不會影響dom樹的構建？

script標籤的位置，不影響DOM content loaded的時間。
可是會影響首屏的時間。
首屏的時間就是輸入url後，達到與瀏覽器進行交互的時間。
首屏的內容被渲染出來，便不必定是DOM content loaded已經完成。
由於渲染和DOM解析是同步進行的，首屏須要的內容的DOM被解析成功，而且首屏須要的內容的css被解析完，
到此爲止的渲染樹被構建，進而佈局，開始繪製，首屏須要的內容被繪製完成則就是首屏的時間。

參考文獻：
https://www.cnblogs.com/caizh...
https://www.html5rocks.com/zh...