經典面試題-Web前端性能優化方法（1）

昨天寫了一篇文章《經典面試題：從地址欄輸入URL到頁面加載完成發生了什麼？》，是針對所有程序員在面試中可能會被問到的問題。那麼今天寫的這篇文章就是專門針對前端開發工程師在面試中經常被問到的問題，就是關於Web前端頁面的性能優化。

Web前端性能優化

Web前端性能優化是一個複雜的過程，涉及到的知識點非常多，包括網頁，服務器，CSS，Javascript，圖片等方面。之前雅虎有總結過Web性能優化的14條原則，在這裡我們做一下梳理，下面圖片中的內容基本包含了所有可能的方式：

性能優化的方式

我們會對這些原則一一進行講解，由於篇幅過長，我會分為幾篇文章來寫。今天就先來看看跟次數有關的幾個內容

規則1-減少HTTP請求數量

• 圖片-CSS Sprites

我們都知道圖片對於頁面來說是一個獨立的資源，每張圖片都會發送一次HTTP請求去獲取。如果頁面上任何大小的圖片都發送一次請求，那麼對於圖片類型的網站性能來說將會是一個噩耗，那麼我們該怎麼做呢？

假想一下，如果多張類似於導航的小圖片都集成在一張大圖片上，只需要發送一次請求就可以得到，然後通過位置去獲取具體的圖片，這樣是不是會減少很多次HTTP請求呢？

沒錯，這就是CSS Sprites（雪碧圖）的由來，它主要是將多個圖片合成為一張圖片，然後通過位置獲取具體的圖片。下圖就是一張雪碧圖

雪碧圖

在使用雪碧圖時，一般會設置一個通用的類，它們有共同的background-image屬性，然後具體的類通過background-position屬性去獲取具體的位置，如下代碼所示

使用CSS Sprites圖的樣式

• 圖片-Base64編碼

在之前寫過的一篇文章《關於圖片的Base64編碼，你瞭解嗎？》中，講過Base64編碼的圖片，也可以減少HTTP請求的次數。但是使用這種方式也存在弊端，太大的圖片並不適合Base64編碼，而且圖片並不會被緩存，Base64編碼的圖片需要看真實環境再使用。

• CSS，JS文件合併

在一個系統中我們通常會將頁面的HTML，CSS樣式，Javascript腳本區分開，但是也並不是說CSS和JS文件劃分的越細越好，因為每個CSS和JS文件都會發送一次HTTP請求，能合併的CSS和JS文件都合併。一般一個網站會有一個通用的CSS和JS文件，然後每個頁面都會有一個CSS和JS文件。

規則2-減少DNS查詢次數

DNS的解析會消耗時間，如果在頁面上嵌入不同域下文件比較多，例如在頁面廣告中嵌入的圖片和腳本，在頁面的首次加載時，解析這些外部的DNS會消耗一定的時間。下面是CSDN極客頭條首頁加載請求的JS文件，在該頁面中就有很多個來自外域請求的JS文件。

外域請求的JS文件

規則3-避免頁面跳轉

在服務器處理完HTTP請求後，會返回HTTP響應報文，如果瀏覽器收到的是一個3XX的響應，則網頁會進行重定向。在報文頭中會包含如下信息，瀏覽器會根據重定向的信息重新發送一次請求，如果重定向的次數過多，則網頁會一直呈現刷新狀態，而用戶卻看不到內容，這是一中很糟糕的用戶體驗，因此應該避免頁面太多的跳轉。

響應頭信息

總結

今天這篇文章只是介紹了幾種性能優化的方式，後面會繼續寫剩餘優化方式的文章，歡迎持續關注噢~