性能優化是一個復雜的話題，涉及的技能很多，如何通過優化網頁性能提高用戶體驗？今天給大家介紹一些常見的方法。想要對網站性能優化有更深入的了解和認識，可以參加Web前端培訓，通過概念講解加實戰項目演練的方式，幫你快速掌握當下最熱門的優化技巧。

　　1. 盡可能減少要傳輸的數據量

　　首先，刪除所有未使用的部分，例如JavaScript中不可訪問的函數、帶有永遠不匹配任何元素的選擇器的樣式，以及永遠隱藏在CSS中的HTML標記。其次，刪除所有重復項。然后，我建議設置一個自動縮小過程。例如，它應該刪除后端服務的所有注釋(但不是源代碼)以及不包含其他信息的每個字符(例如JS中的空白字符)。完成后，我們剩下的可以是文本。這意味著我們可以安全地應用壓縮算法，比如GZIP(大多數瀏覽器都能理解)。最后，還有緩存。當瀏覽器第一次呈現頁面時，這不會有什么幫助，但會在以后的訪問中節省很多。但關鍵是要記住兩件事：

　　如果使用CDN，請確保支持緩存并在其中正確設置。

　　與其等待資源的過期日期，您可能希望有一種方法可以從您的角度更早地更新它。將文件的“指紋”嵌入到URL中，使本地緩存失效。

　　當然，應該為每個資源定義緩存策略。有些可能很少改變，或者根本不會改變。其他國家的變化更快。其中一些包含敏感信息，另一些可能被視為公開信息。使用“private”指令防止CDN緩存私有數據。也可以優化web圖像，盡管圖像請求不會阻止解析或呈現。在Web前端培訓中，你可以全面學習到網站性能優化相關技術，了解其優化模式和最佳實踐，最終掌握使用優化網站性能的能力。

　　2. 減少關鍵資源的總數

　　“關鍵”僅指網頁正確呈現所需的資源。因此，我們可以跳過流程中未直接涉及的所有樣式，還有所有的腳本。

　　樣式表

　　為了告訴瀏覽器不需要特定的CSS文件，我們應該為引用樣式表的所有鏈接設置媒體屬性。使用這種方法，瀏覽器將只視需要處理與當前媒體(設備類型、屏幕大小)匹配的資源，同時降低所有其他樣式表的優先級(它們將被處理，但不會作為關鍵渲染路徑的一部分)。例如，如果向引用打印頁面樣式的樣式標記添加media=“print”屬性，則當介質未打印時(即在瀏覽器中顯示頁面時)，這些樣式不會干擾關鍵呈現路徑。

　　為了進一步改進該過程，還可以將一些樣式內聯。這為我們節省了至少一次到服務器的往返，否則獲取樣式表就需要這樣做。

　　腳本

　　如上所述，腳本是解析器阻塞的，因為它們可以改變DOM和CSSOM。因此，不改變它們的腳本不應該是塊解析，從而節省我們的時間。為了實現這一點，所有腳本標記都必須標記為async或defer屬性。

　　標記為async的腳本不會阻止DOM構造或CSSOM，因為它們可以在構建CSSOM之前執行。但是請記住，內聯腳本無論如何都會阻止CSSOM，除非您將它們放在CSS之上。相比之下，標記為“延遲”的腳本將在頁面加載結束時進行評估。因此，它們不應影響文檔(否則將觸發重新呈現)。所以如果你想學習網站性能優化更多方法，不妨報名參加Web前端培訓，學習性能優化對技能提升和職業發展都有很大的幫助。

　　換句話說，使用defer，腳本直到頁面加載事件觸發后才執行，而async允許腳本在解析文檔時在后臺運行。

　　3. 縮短關鍵渲染路徑長度

　　最后，CRP長度應縮短至可能的最小值。在某種程度上，上述方法可以做到這一點。

　　作為樣式標記屬性的媒體查詢將減少必須下載的資源總數。腳本標記屬性defer和async將防止相應的腳本阻止解析。使用GZIP縮小、壓縮和歸檔資源將減少傳輸數據的大小(從而減少數據傳輸時間)。內聯某些樣式和腳本可以減少瀏覽器和服務器之間的往返次數。

　　我們還沒有討論的是在文件之間重新排列代碼的選項。根據最新的最佳性能理念，一個網站最快應該做的第一件事就是顯示ATF內容，ATF代表折疊上方，這是立即可見的區域，無需滾動。因此，最好以先加載所需樣式和腳本的方式重新安排與渲染相關的所有內容，其他所有內容都停止—既不解析也不渲染，并始終記住在進行更改之前和之后進行測量。

　　總之，網站性能優化包含了網站響應的所有方面，如緩存、設置CDN、重構、資源優化等，但所有這些都可以逐步完成。作為一名web開發人員，您應該將本文作為參考，并始終記住在實驗前后測量性能。想學習網站性能優化技能的小伙伴，可以報名參加Web前端培訓，這里有系統全面的課程，在專業老師的面授教學指導下，可以在短時間內學有所成。