伺服器端呈現 （SSR） 是指在伺服器上完成的呈現過程。 最終呈現的 HTML 頁面通過 HTTP 協議傳送到客戶端。 在 SEO 和首次載入速度方面，SSR 提供了顯著的好處。
vue：這可以通過 nuxt 完成JS 實現。
react：這可以通過 next 來完成JS 實現。
GZIP壓縮通過壓縮檔案顯著提高了首次載入速度。 使用 gzip，您可以將文字檔案壓縮到至少原始大小的 40%。 但是，應該注意的是，不應使用 gzip 壓縮影象檔案。
在構建過程中設定 gzip 壓縮的步驟如下：
在你的 vue 專案中安裝 gzip 壓縮所需的依賴，並將 productiongzip 設定為 true 以啟用 gzip 壓縮。
shell 複製 **npm install --s**e-dev compression-webpack-plugin --s**e-dev compression-webpack-plugin修改 build 命令以使用 gzip 壓縮。 但是，需要注意的是，這可能會遇到錯誤“ValidationError：壓縮外掛程式無效選項”。 為了解決這個問題，根據官方文件，設定從“asset”更改為“filename”。
再次執行構建命令 npm run build，您將構建 .gz 檔案，表示壓縮成功。
Brotli 是一種新型的開源壓縮演算法（由 Google 於 2015 年推出，GitHub 位址：與 GZIP 相比，啟用 Brotli 壓縮可以額外減少 20% 的 CDN 流量。 在各種情況下，Brotli 的效能比 gzip 高出 17-25%，尤其是當設定為 1 級時，超過了 gzip 9 級的壓縮效果。 （資料來自 Google 資料報告：.）大多數主流瀏覽器都支援 Brotli 壓縮，但 Internet Explorer 和 Opera Mini 除外。
要在 vite 專案中啟用 brotli 壓縮，可以使用 vite-plugin-compression 外掛程式。 修改你的。 env.生產檔案，請相應地設定 vite 壓縮全域性變數。
ini Copy** 壓縮預設禁用：壓縮預設禁用：vite compression ="none"以下配置支援在不刪除原始檔案的情況下進行壓縮： 啟用 gzip 壓縮： vite compression ="gzip"啟用 brotli 壓縮：vite compression="brotli"同時啟用 gzip 和 brotli 壓縮：vite compression="both"以下配置可以壓縮和刪除原始檔案： 啟用 gzip 壓縮： vite compression ="gzip-clear"啟用 brotli 壓縮：vite compression="brotli-clear"同時啟用 gzip 和 brotli 壓縮：vite compression="both-clear"快取是一種基本的優化技術，它通過減少 IO 操作和 CPU 計算來提高效能。 效能調優的第一條規則是確定快取的優先順序。
快取選項包括瀏覽器快取、CDN 快取、反向**、本地快取、分布式快取和資料庫快取。
AJAX 快取請求的 URL 和響應結果，以提高頁面響應能力和使用者體驗。 發出 AJAX 請求時，請嘗試使用 get 方法利用客戶端快取並提高請求速度。
例如，使用第三方元件庫時，僅匯入必要的元件。
從“vant”匯入 css copy import from 'vant'使用 import（） 在需要時動態匯入第三方庫和元件。 例如，在測試環境中，僅當主機網域名稱不是生產網域名稱時，才會啟用 vconsole 除錯。
js copy **if （location.host !== ‘production-domain’)使用 import 或 require 方法非同步載入元件：
js copy **（=> import（'@ pages xxx.vue’) resolve => require(['@/pages/xxx.vue'], resolve)延遲載入路由是一種在路由配置中應用非同步元件載入的方法：
js 複製**內容分發網路 （CDN） 將靜態檔案、音訊、指令碼資源等分發到世界各地的伺服器。 通過提供附近 CDN 伺服器的資源，您可以減少延遲並提高載入速度。
因為瀏覽器限制了每個域的活動連線數。 為了同時超過此限制，域分片將內容拆分為多個子域。 當使用多個域處理多個資源時，瀏覽器能夠同時擁有更多資源，從而縮短頁面載入時間並改善使用者體驗。
dns-prefetch 嘗試在請求資源之前解析網域名稱。當瀏覽器從（第三方）伺服器請求資源時，必須先將跨域網域名稱解析為IP位址，然後瀏覽器才能發出請求。 此過程稱為 DNS 解析。 雖然 DNS 快取可以幫助減少這種延遲，但 DNS 解析可能會大大增加請求的延遲。 對於那些與許多第三方有開放連線的人來說，這種延遲會顯著降低載入效能。
DNS-prefetch 可幫助開發人員遮蔽 DNS 解析延遲。
html 元素通過將 rel 屬性值設定為 dns-prefetch 來提供此功能。
HTML 複製**Web Workers 為 J**Ascript 建立了乙個多執行緒環境，允許任務在後台執行而不會阻塞主線程。 對於計算密集型任務，請使用 Web Worker 來優化效能。