{閱讀筆記}如何優化Web前端性能

正如我們前面所說的，性能測試方法在執行性能測試后，將得到一系列性能測試數據，然后將其編譯成報表。由于大型網站的復雜結構，用戶從瀏覽器發送一個請求，知道數據庫完成了操作，如果測試或用戶被報告，中間有很多鏈接，對網站的響應是緩慢的并且存在性能問題。有必要分析請求經驗的每一個環節，找出性能瓶頸可能在哪里，并找出問題所在。

檢查一個網站的性能瓶頸并檢查一個程序的性能瓶頸基本上是相同的。檢查請求處理的各個環節的日志，分析哪些鏈接不合理，超出預期；然后檢查監控數據，分析影響內存、磁盤、網絡或CPU性能的主要因素，代碼問題不合理或不合理。

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

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

瀏覽器訪問優化主要是通過減少HTTP請求、使用瀏覽器緩存、啟用壓縮、頁面頂部的CSS、頁面底部的JavaScript、減少Cookie的傳輸等五種手段。

HTTP協議是一個無狀態的應用層協議，這意味著每個HTTP請求都需要建立一個通信鏈路并進行數據傳輸，并且在服務器端，每個HTTP都需要啟動一個單獨的線程來處理這些通信和服務的開銷。非常高，可以減少HTTP請求的數量，以提高訪問性能。

減少HTTP的主要手段包括合并CSS、合并JavaScript和合并圖片。一旦瀏覽器需要被一起訪問，JavaScript和CSS就被合并到一個文件中，這樣瀏覽器只需要一個請求。圖片也可以被合并，多個圖片被合并成。一個。如果每個圖片具有不同的超鏈接，則可以通過CSS偏移響應來構建鼠標點擊操作的不同URL。

對于網站，CSS、JavaScript、徽標、圖標和其他靜態資源文件具有較低的更新頻率，并且這些文件幾乎都是每個HTTP請求所必需的，并且可以緩存在瀏覽器中。

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

瀏覽器將在下載所有CSS之后呈現整個頁面，因此最好的方法是在頁面頂部放置CSS，并讓瀏覽器盡快下載CSS。另一方面，JavaScript在加載JavaScript后立即執行，可能阻止RESA。L頁，導致緩慢的頁面顯示。

一方面，Cookie包含在每個請求和響應中，并且太大的Cookie將嚴重影響數據傳輸，所以需要對Cookie寫入什么數據需要仔細檢查。

CDN的本質仍然是一個緩存，數據緩存最接近用戶，用戶以最快的速度獲取數據，即所謂的網絡訪問第一跳。

傳統的代理服務器是多個瀏覽器的一方，代理瀏覽器將HTTP請求發送到Internet，而反向代理服務器位于Web站點的一側，代理站點Web服務器接收HTTP請求。

由于傳統的儀式服務器可以保護瀏覽器的安全性，反向代理服務器也具有保護網站安全的作用。來自Internet的訪問請求必須通過代理服務器，這相當于在Web服務和可能的網絡攻擊之間建立障礙。

除了安全功能外，代理服務器還可以通過配置緩存功能來加快Web請求，當用戶首先訪問靜態內容時，靜態內容緩存在反向代理服務器上，這樣當其他用戶訪問靜態內容時，可以直接返回FR。OM反向代理服務器。