想要成為一名合格的Web前端工程師，Web前端性能優化是一個必須要掌握的知識，那么應該怎么進行Web前端性能優化呢？

前端性能優化，資源的合并與壓縮，圖片編碼的原理，以及類型的選擇，瀏覽器的渲染機制，懶加載，預加載，瀏覽器存儲，緩存機制，PWA和Vue-SSR等。

技術棧，Vue.js和Chrome，調試工具performance和layers。那么什么是前端性能優化原理的點，涉及作用以及原理，如何與真實的項目場景結合，理論結合實戰經驗，進行量化分析。

前端優化，一般是先基礎優化（圖片編碼原理等問題），高一點即為 進階優化（瀏覽器的渲染機制，瀏覽器的存儲，優化），結合服務端進行優化（首屏渲染等問題）等。

前端性能優化方案，最小化HTTP的請求，使用內容交付網絡，避免空src或是href，添加過期或者是緩存控制標頭，gzip組件，將styleSheets放在頂部，將腳本放在最下面，避免css表達式，減少dns的查找，將js和css設置為外部，避免重定向，配置etag，使用ajax緩存，減少dom元素的數量，沒有404，減少cookie的大小，不縮放HTML中的圖像，避免使用過濾器，使用favicon.icon小型且可緩存。

合并文件是一種通過將所有腳本合并為一個腳本，類似將所有css合并為一個樣式表來減少HTTP請求數量的方法。

實現性能優化，第 一，減少我們的HTTP請求的數量，以及減少請求的資源大小，第二，資源的壓縮與合并的原理是什么。壓縮與合并前是什么樣的效果，壓縮與合并后又有什么區別。

如何減少我們HTTP請求的大小，每一個HTTP請求都要走網絡環境才能達到我們的服務器，每一次請求都有網絡環境的損耗，把多次HTTP請求減少到一次，減少網絡環境中的損耗。也可以從服務器端出發，先把反映到頁面中效果進行渲染，然后直出到網頁上。

每一次請求都有網絡環境的損耗，我們可以把多次HTTP請求合并成一次，從而減少相同的環境損耗。

帶寬，一個HTTP的請求大小能夠較小的話，訪問就比較快一些，瀏覽器端的渲染過程，使用框架，就要從瀏覽器中進行渲染，框架中的模板是要在瀏覽器中進行渲染的，這個在框架中進行渲染，不利于首屏，對首屏有很大的損耗，不利于前端的性能。

服務器的渲染，將HTML渲染后直出到我們瀏覽器頁面，不是在瀏覽器中進行渲染了。

前端性能優化點，通過HTTP請求的過程，可以了解到，我們可以通過dns進行緩存從而減少dns查詢的時間，網絡請求的過程走最近的網絡環境，相同的靜態資源進行緩存，減少HTTP請求的大小，減少HTTP請求，服務器端渲染，從業務中進行前端優化點。