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

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

具體的優化點有：資源合併與壓縮，圖片編碼原理和類型的選擇，瀏覽器的渲染機制，懶加載與預加載，瀏覽器存儲，緩存機制，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)

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

 

非核心代碼異步加載

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

 

利用瀏覽器緩存（重點）

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

 

 

使用CDN

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查詢次數。