web頁面性能優化

web前端頁面性能優化

　　網站的劃分通常爲二：前端和後臺。咱們能夠理解成後臺是用來實現網站的功能的，好比：實現用戶註冊，用戶可以爲文章發表評論等等。而前端呢？

其實應該是屬於功能的表現。而且影響用戶訪問體驗的絕大部分來自前端頁面。網站前端的用戶體驗決定了用戶是否想要去使用網站的功能，而網站的功

能決定了用戶是否會一票否決前端體驗。若是前端優化得好，他不只能夠爲企業節約成本，並且由於加強的用戶體驗，還給公司帶來更多的用戶。那麼我

們應該如何對咱們前端的頁面進行性能優化呢？

瀏覽器訪問優化

　　瀏覽器請求處理流程以下圖：

 

一、減小http請求，合理設置 HTTP緩存

　　http協議是無狀態的應用層協議，意味着每次http請求都須要創建通訊鏈路、進行數據傳輸，而在服務器端，每一個http都須要啓動獨立的線程去處理。

這些通訊和服務的開銷都很昂貴，減小http請求的數目可有效提升訪問性能。

　　減小http的主要手段是合併CSS、合併javascript、合併圖片。將瀏覽器一次訪問須要的javascript和CSS合併成一個文件，這樣瀏覽器就只須要一

次請求。圖片也能夠合併，多張圖片合併成一張，若是每張圖片都有不一樣的超連接，可經過CSS偏移響應鼠標點擊操做，構造不一樣的URL。瀏覽器請求數據會

優先考慮緩存，若是緩存裏有且沒有過時就會從緩存裏取。緩存的力量是強大的，恰當的緩存設置能夠大大的減小 HTTP請求。

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

　　1. 能夠節約cookie帶寬。 

　　一方面，cookie包含在每次請求和響應中，太大的cookie會嚴重影響數據傳輸，所以哪些數據須要寫入cookie須要慎重考慮，儘可能減小cookie中傳輸

的數據量。另外一方面，對於某些靜態資源的訪問，如CSS、script等，發送cookie沒有意義，能夠考慮靜態資源使用獨立域名訪問，避免請求靜態資源時發

送cookie，減小cookie傳輸次數。

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

突破瀏覽器併發限制（瀏覽器的併發請求數目限制是針對同一域名的，超過限制數目的請求會被阻塞）你隨便挑一個 G家的 url: https://lh4.googleu

sercontent.com/- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4換成

lh3,lh6 啥的，都照樣可以訪問，像地圖之類的須要大量併發下載圖片的站點，這個很是重要。

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

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

　　結構語義化的優勢包括：

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

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

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

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

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

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

四、啓用壓縮

　　在服務器端對文件進行壓縮，在瀏覽器端對文件解壓縮，可有效減小通訊傳輸的數據量。若是能夠的話，儘量的將外部的腳本、樣式進行合併，多個合

爲一個。文本文件的壓縮效率可達到80%以上，所以HTML、CSS、javascript文件啓用GZip壓縮可達到較好的效果。可是壓縮對服務器和瀏覽器產生必定

的壓力，在通訊帶寬良好，而服務器資源不足的狀況下要權衡考慮。

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

　　瀏覽器會在下載完成所有CSS以後纔對整個頁面進行渲染，所以最好的作法是將CSS放在頁面最上面，讓瀏覽器儘快下載CSS。若是將 CSS放在其餘地方

好比 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經開始渲染頁面了，這就致使頁面由無 CSS狀態跳轉到 CSS狀態，用戶體驗比較糟糕，因此能夠

考慮將CSS放在HEAD中。

　　Javascript則相反，瀏覽器在加載javascript後當即執行，有可能會阻塞整個頁面，形成頁面顯示緩慢，所以javascript最好放在頁面最下面。但若是頁面

解析時就須要用到javascript，這時放到底部就不合適了。