首先來看一下前端性能優化所涉及的層面有如下四個：網絡層面，構建層面，瀏覽器渲染層面，服務端層面

具體的優化點有：資源合並與壓縮，圖片編碼原理和類型的選擇，瀏覽器的渲染機制，懶加載與預加載，瀏覽器存儲，緩存機制，PWA，Vue-SSR等等

首先來了解一下web前端的本質

web前端的本質是一種GUI軟件，是可以直接借鑒其他GUI系統架構設計的方法，但是web前端有點特別

下面是CS架構的GUI軟件的開發和部署過程，CS架構的GUI軟件在用戶從商店下載下來後，是一個APK包，通過解壓安裝到手機的操作系統上，實際上當打開這個APP的時候需要訪問的資源都已經在手機本地有一份了，訪問的是本地的資源

而web前端的開發和部署過程跟APP是不一樣的，如下：

發布的過程跟cs架構不一樣，不是發布一個安裝包，而是將前端代碼發布到遠程服務器（webServer）和遠程的CDN上，那麽運行的過程是用戶使用瀏覽器輸入相應網址，這時候瀏覽器才會向遠程的瀏覽器發出請求，動態的增量式加載靜態資源，所以web前端去訪問的過程是動態的增量的加載靜態資源的過程，通過瀏覽器發出HTTP請求到遠程的服務端，有服務端返回，最終瀏覽器拿到資源，那麽這個過程中能夠更快的拿到資源對web前端來說體驗就會更好

瀏覽器的一個請求從發送到返回都經歷了什麽

詳情查看：前端性能優化成神之路—瀏覽器的一個請求從發送到返回都經歷了什麽

資源合並與壓縮減少HTTP請求

詳情查看：前端性能優化成神之路—資源合並與壓縮減少HTTP請求

圖片相關優化

詳情查看：前端性能優化成神之路—圖片相關的優化

CSS放在頁面最上部，javascript放在頁面最下面

瀏覽器會在下載完成全部CSS之後才對整個頁面進行渲染，因此最好的做法是將CSS放在頁面最上面，讓瀏覽器盡快下載CSS。如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經開始渲染頁面了，這就導致頁面由無 CSS狀態跳轉到 CSS狀態，用戶體驗比較糟糕，所以可以考慮將CSS放在HEAD中

Javascript則相反，瀏覽器在加載javascript後立即執行，有可能會阻塞整個頁面，造成頁面顯示緩慢，因此javascript最好放在頁面最下面。但如果頁面解析時就需要用到javascript，這時放到底部就不合適了。

Lazy Load Javascript（只有在需要加載的時候加載，在一般情況下並不加載信息內容。）隨著 Javascript框架的流行，越來越多的站點也使用起了框架。不過，一個框架往往包括了很多的功能實現，這些功能並不是每一個頁面都需要的，如果下載了不需要的腳本則算得上是一種資源浪費 -既浪費了帶寬又浪費了執行花費的時間。目前的做法大概有兩種，一種是為那些流量特別大的頁面專門定制一個專用的 mini版框架，另一種則是 Lazy Load。

查看這篇文章：前端性能優化--圖片懶加載(lazyload image)

非核心代碼異步加載

查看這篇文章：前端性能優化-異步加載

利用瀏覽器緩存（重點）

查看這篇文章：前端性能優化成神之路-利用瀏覽器緩存

使用CDN

就是在將一些css文件和js文件放到CDN服務器上，然後直接鏈接這裏的文件，就是讓網絡快速到達服務端把資源請求過來，尤其是當第一次請求頁面的時候，瀏覽器緩存起不到任何作用，那麽使用CDN就是一個很重要的性能優化的一個點

預解析DNS

什麽是 DNS Prefetch ?
DNS Prefetch 是一種DNS 預解析技術，當你瀏覽網頁時，瀏覽器會在加載網頁時對網頁中的域名進行解析緩存，這樣在你單擊當前網頁中的連接時就無需進行DNS的解析，減少用戶等待時間，提高用戶體驗。 Dns-prefetch是瀏覽器上的可以降低延遲的技術

使用方式直接在link標簽上添加這個屬性

<link rel="dns-prefetch" href="http://www.spreadfirefox.com/">
<link rel="dns-prefetch" href="//www.spreadfirefox.com">

控制dns預解析是否開啟

服務器和瀏覽器都可以開啟關閉dns預解析功能，瀏覽器關閉預解析功能如下

<meta http-equiv="x-dns-prefetch-control" content="off">  //通過設置on可以開啟dns預解析

瀏覽器上配置dns預解析

可以關閉瀏覽器的dns預解析功能

network.dns.disablePrefetch設置為true

瀏覽器在https協議下默認dns預解析不可用，可以通過設置

network.dns.disablePrefetchFromHTTPS 的值為false來啟動

dns-prefetch需慎用，多頁面重復DNS預解析會增加重復DNS查詢次數。

前端性能優化成神之路-總結