百度運維部一面之web頁面效能優化

有幸進入百度運維部進行面試，面的是運維部的研發工程師，涉及前端和運維。9月29號下午2點面的，一面通過後緊接著二面，現在等結果，不知道會不會有三面...不管怎麼樣，還是要總結一下之前被忽略的“前端效能優化問題”。

問題是：web頁面效能在前端、NA（Native App）端和後端各有哪些優化方法？

1.優化影象

影象在吸引訪客方面起著舉足輕重的作用，但是你新增到頁面上的每一張圖片都需要使用者從你的伺服器下載到他們的電腦上，這無疑增加了頁面的載入時間，因此若載入時間過長很可能會讓使用者離開你的網站。所以，優化影象是非常必要的。

優化影象的方法有：

a.使用CSS Sprites（雪碧圖）、CSS3寫的圖、base64位引用小的icon圖；
b.支援WebP圖片格式；
c.支援針對不同的網路頻寬下載不同的圖片格式，比如WIFI下載高清圖，4G普通圖，3G低質量的圖；
d.png為無損格式，適合精準的按鈕圖示；在網頁中需要瀏覽大圖時，採用jpg壓縮格式，能夠大大節省流量；
e.圖片的懶載入、預載入；
f.減小圖片大小、減少圖片請求。

2.減少檔案數量或壓縮檔案

a.許多JS、CSS檔案可以合併時最好合並，減少頁面上的檔案數量可以減少http請求數；
b.壓縮JS、CSS檔案。

3.將CSS檔案放在頁面頂部，而JS檔案放在底部

a.把 CSS檔案放在頁面頂部可以禁止頁面逐步渲染，節省瀏覽器載入和重繪頁面的資源；
b.把JS檔案放在底部可以避免程式碼執行前的等待時間，從而提升頁面載入速度（在某些情況下，需要將JS在頁面的頂部載入，如某些第三方跟蹤指令碼）。

4.非同步載入JS

如何實現JS非同步載入

5.延遲載入和執行非必要指令碼

網頁中有很多指令碼在頁面完全載入完前都是不需要執行的，所以可以延遲載入和執行非必要指令碼。這些指令碼可以在onload事件之後執行，避免對網頁上重要內容的呈現造成影響。這些指令碼可以是你自己網頁的指令碼，更多的是一些第三方指令碼，比如評論、廣告、智慧推薦、分享等等，而這些完全可以等主題內容載入完後再執行。

6.減少DNS查詢

DNS查詢需要很長時間來返回一個主機名的IP地址，而瀏覽器在查詢結束前不會進行任何操作。所以應該減少外部JS、CSS、圖片等資源的引用，不同域名的使用越少越好。

7.客戶端預載入（利用瀏覽器快取）

瀏覽器快取是允許訪客的瀏覽器快取你網站頁面副本的一個功能。這可以使訪客再次訪問時，直接從快取中讀取內容而不必重新載入，這就節省了向伺服器傳送HTTP請求的時間。此外優化你的網站的快取系統往往也會降低你的網站的頻寬和託管費用。

8.使用CDN（內容分發網路）

CDN的全稱是Content Dilivery Network，即內容分發網路。它可以使使用者就近取得所需內容，解決網路擁塞的情況（當時有被問到“CDN是如何實現加速的”，這是答案！）。就好比在某貓超市上買東西，他會根據你的收貨地址來選擇發貨的倉庫。CDN網路可以將源站的內容快取到分佈全球的CDN節點，根據使用者訪問的IP，就近連線CDN，提高網站響應速度。

9.啟用GZIP壓縮

在伺服器上壓縮網站的頁面是提升網站訪問速度非常有效的一種方法。使用GZIP壓縮可以做到這一點。GZIP是一個減小傳送給訪客的HTML、JS、CSS檔案體積的工具。壓縮的檔案可以減少HTTP響應時間。據Yahoo報導，該方法可以減少70%的下載時間。而目前90%的通過瀏覽器的流量都支援GZIP壓縮，因此，這是一個提升網站效能有效的選項。

10.靜態檔案放在單獨域名的伺服器上

a.避免請求靜態資原始檔時攜帶cookie資訊，增加請求損耗；
b.突破瀏覽器併發限制，像地圖之類的需要大量併發下載圖片的站點，這一點非常重要。