性能優(yōu)化是一個復(fù)雜的話題，涉及的技能很多，如何通過優(yōu)化網(wǎng)頁性能提高用戶體驗？今天給大家介紹一些常見的方法。

　　1. 盡可能減少要傳輸?shù)臄?shù)據(jù)量

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

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

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

　　當然，應(yīng)該為每個資源定義緩存策略。有些可能很少改變，或者根本不會改變。其他國家的變化更快。其中一些包含敏感信息，另一些可能被視為公開信息。使用“private”指令防止CDN緩存私有數(shù)據(jù)。也可以優(yōu)化web圖像，盡管圖像請求不會阻止解析或呈現(xiàn)。

　　2. 減少關(guān)鍵資源的總數(shù)

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

　　樣式表

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

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

　　腳本

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

　　標記為async的腳本不會阻止DOM構(gòu)造或CSSOM，因為它們可以在構(gòu)建CSSOM之前執(zhí)行。但是請記住，內(nèi)聯(lián)腳本無論如何都會阻止CSSOM，除非您將它們放在CSS之上。相比之下，標記為“延遲”的腳本將在頁面加載結(jié)束時進行評估。因此，它們不應(yīng)影響文檔（否則將觸發(fā)重新呈現(xiàn)）。

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

　　總之，網(wǎng)站性能優(yōu)化包含了網(wǎng)站響應(yīng)的所有方面，如緩存、設(shè)置CDN、重構(gòu)、資源優(yōu)化等，但所有這些都可以逐步完成。作為一名web開發(fā)人員，您應(yīng)該將本文作為參考，并始終記住在實驗前后測量性能。