【讀書筆記】如何進行web前端性能優化

前面我們講過了,性能測試的方法,執行完性能測試你會得出一系列的性能測試數據,然後彙編成報告,由於大型網站結構複雜,用戶從瀏覽器發出請求知道數據庫完成操作事務,中間需要經過很多環節,如果測試或者用戶報告網站響應緩慢,存在性能問題,必須對請求經歷的各個環節進行分析,排查可能出現性能瓶頸的地方,定位問題。

【讀書筆記】如何進行web前端性能優化

排查一個網站的性能瓶頸和排查一個程序的性能瓶頸的手法基本相同,檢查請求處理的各個環節日誌,分析哪個環節相應時間不合理、超過預期;然後檢查監控數據,分析影響性能的主要因素是內存、磁盤、網絡還是CPU,是代碼問題還是架構設計不合理,或者系統資源確實不足。

【讀書筆記】如何進行web前端性能優化

根據網站分層結構,性能優化可以分為Web前端性能優化、應用服務器性能優化、存儲服務器性能優化三大類。

【讀書筆記】如何進行web前端性能優化

咱們先講講Web前端性能優化,一般來說web前端指的是網站業務邏輯之前的部分,包括瀏覽器加載、網站視圖模型、圖片服務、CDN服務等,主要的優化手段有優化瀏覽器訪問、使用反向代理,CDN等。

【讀書筆記】如何進行web前端性能優化

瀏覽器訪問優化主要通過減少HTTP請求,使用瀏覽器緩存,啟用壓縮,css放在頁面最上面、JavaScript放在頁面最下面,減少cookie傳輸等五種手段。

【讀書筆記】如何進行web前端性能優化

HTTP協議是無狀態的應用層協議,意味著每次HTTP請求都需要建立通信鏈路、進行數據傳輸,而在服務器端,每個HTTP都需要啟動獨立的線程去處理。。這些通信和服務的開銷都很昂貴,減少HTTP請求的數目可有效提高訪問性能。

減少HTTP的主要手段有合併css、合併JavaScript、合併圖片。將瀏覽器一次訪問需要的JavaScript、css合併成一個文件,這樣瀏覽器就只需要一次請求。圖片也可以合併,多張圖片合併成一張,如果每張圖片都有不同的超鏈接,可通過css偏移響應鼠標點擊操作,構造不同的URL。

【讀書筆記】如何進行web前端性能優化

對一個網站而言,css、JavaScript、logo、圖標這些靜態資源文件更新的頻率都比較低,而這些文件油幾乎是每次HTTP請求都需要的,可以將這一類的文件緩存在瀏覽器中。

【讀書筆記】如何進行web前端性能優化

在服務器端對文件進行壓縮,在瀏覽器端對文件解壓縮,可有效減少通信傳輸的數據量。文件的壓縮率可達到80%以上。

【讀書筆記】如何進行web前端性能優化

瀏覽器會在下載完全部css之後才對整個頁面進行渲染,因此最好的做法是件css放在頁面最上面,讓瀏覽器儘快下載css。JavaScript則相反,瀏覽器在加載JavaScript之後立即執行,有可能會阻塞真個頁面,造成頁面顯示緩慢。

【讀書筆記】如何進行web前端性能優化

一方面,cookie包含在每次請求和響應中,太大的cookie會嚴重影響數據傳輸,因此哪些數據需要寫入cookie需要慎重考略。

CDN的本質仍然是一個緩存,而且將數據緩存在離用戶最近的地方,使用戶以最快速度獲取數據,即所謂網絡訪問第一跳。

【讀書筆記】如何進行web前端性能優化

傳統代理服務器為數瀏覽器一側,代理瀏覽器將HTTP請求發送到互聯網上,而反向代理服務器位於網站機房一側,代理網站web服務器就收HTTP請求。

【讀書筆記】如何進行web前端性能優化

和傳統大禮服務器可以保護瀏覽器安全一樣,反向代理服務器也具有保護網站安全的作用,來自互聯網的訪問請求必須經過代理服務器,相當於在web服務和可能的網絡攻擊之間建立了一個屏障。

除了安全功能,代理服務器也可以通過配置緩存功能加速web請求。當用戶第一次訪問靜態內容的時候,靜態內容就被緩存在反向代理服務器上,這樣當其他用戶訪問訪問該靜態內容的時候,就可以直接從反向代理服務器返回。


分享到:


相關文章: