web前端頁面性能優化

爲了提升頁面的加載速度，讓用戶有更好的體驗，前端網站的性能優化是很是有必要的。

優化的方式有如下幾種：

1、 編輯html的時候注意語義結構化

　　結構語義化：根據內容的結構，選擇合適的標籤，以便於開發者閱讀和寫出更優雅的代碼，同時讓瀏覽器的爬蟲和機器很好地解析。

　　結構語義化的優勢包括：

　　　　1. 在頁面沒有css或者css還未加載出來的時候，頁面也能呈現出很好的結構。

　　　　2. 有利於SEO，易於被搜索引擎抓取，有利於推廣。

　　　　3. 方便盲人閱讀器、屏幕閱讀器等等設備來解析。

　　　　4. 用戶體驗更好，例如圖片的alt屬性，在圖片沒有加載出來時給予合理的解釋。

　　　　5. 便於團隊開發和維護。

　　　　6. 遵循分離結構和表現原則。

2、 對網站的文件和資源進行優化

　　1. 書寫css和js的時候要注意代碼優化，儘可能重複利用。

　　2. 能夠用一個大的css文件來合併多個小的css文件，瀏覽器在請求每個css文件時都會發送一個http請求，在http請求帶來的延遲沒有結束的時候，用戶都將在等待中度過。

　　3. 若是網頁中使用了大量背景圖片，那麼這些圖片每一張都會發送一個http請求，可使用css sprite來合併網頁中的須要頻繁加載的多個圖片。對於合併以後的圖片，咱們須要注意對它圖片質量和大小的優化，圖片越小加載速度越快。

　　4. css文件放置在head，js放置在文檔尾部。

3、 利用多個域名來存儲網站資源

　　1. 能夠節約cookie帶寬。 

　　2. 節約主域名的鏈接數，優化頁面響應速度。

4、利用緩存

　　Ajax調用都採用緩存調用方式，通常採用附加特徵參數方式實現，注意其中的<script src=」xxx.js?{VERHASH}」，{VERHASH}就是特徵參數，這個參數不變化就使用緩存文件，若是發生變化則從新下載新文件或更新信息。