前端開發之性能優化

本文章對各大學習技術論壇知識點，進行總結、歸納自用學習，共勉🙏

文章目錄

1. [CDN](https://www.bootcdn.cn/)
2.懶加載
3.緩存
4.圖片壓縮
5.圖片分割
6.sprite
7.Code Splitting
8.gzip
9.GPU加速
10.Ajax
11.Tree Shaking
12.Resource Hints

1. CDN

CDN（內容分發網絡）是一種基于互聯網的分布式服務，旨在通過將網站內容分發至全球多個節點，來提高用戶訪問速度和可靠性。廣泛適用于各類靜態和動態內容，包括網頁文件、圖片、視頻、應用程序等。CDN的核心目標是減少數據傳輸距離和網絡擁堵，從而加快內容加載時間，提升用戶體驗。

內容緩存：將網站的靜態資源復制并存儲在全球各地的CDN節點上，用戶請求時，CDN會將內容從距離用戶最近的節點提供，減少延遲。
負載均衡：通過智能調度算法，CDN能夠根據網絡狀況、服務器負載等因素，將用戶請求分配給最適合的節點，平衡各服務器的訪問壓力。
故障容錯：當某個CDN節點出現問題時，系統會自動將流量導向其他健康節點，確保服務的連續性和穩定性，減少單點故障的影響。
動態內容加速：除了靜態資源，現代CDN還支持動態內容的加速，通過優化網絡路徑和減少往返時間，提高如API請求、數據庫查詢等動態內容的響應速度。、

CDN的使用場景：

使用第三方的CDN服務：使用開源一些項目、插件、組件，即用即CDN服務
靜態資源緩存加速網站性能：對于任何網站而言，將靜態資源如JavaScript、CSS、圖片等托管于CDN上，可以顯著加速頁面加載速度。由于這些資源往往不經常變化，通過CDN分發，用戶能從距離最近的節點加載數據，減少延遲，提高用戶體驗。同時，將整個項目部署在CDN上，可以實現快速、簡便的一鍵部署，便于維護和版本更新。
直播服務的流媒體傳輸：在直播場景中，CDN扮演著至關重要的角色。由于直播內容是實時、連續的數據流，傳統的靜態資源緩存策略不再適用。CDN針對流媒體設計了特殊的傳輸機制，通常采用主動推送技術，確保數據連續、低延遲地傳輸到用戶端。這種方式避免了因回源請求大流量數據造成的網絡擁塞和延遲，確保了直播畫面的流暢與即時性，提升了觀眾的觀看體驗。
大文件下載和軟件分發：對于需要提供大文件下載的場景，如游戲客戶端、軟件更新包、大型文檔等，CDN可以有效分擔主服務器壓力，提供快速下載通道，確保用戶在全球各地都能獲得高速下載體驗。
電商與廣告平臺：在電商節或促銷活動期間，網站面臨巨大流量沖擊，CDN能夠有效分散訪問壓力，保證頁面快速加載，提升轉化率。同時，廣告平臺通過CDN快速分發廣告素材，確保廣告加載迅速，提升廣告展示效率。

2.懶加載

懶加載也是一種性能優化技術，特別適合圖片或多媒體內容豐富的頁面，通過延遲加載那些暫時不在視窗內（即用戶當前屏幕看不到的內容）的資源，來減少初次加載時的請求數量和數據量，從而加快頁面的初始加載速度，提升用戶體驗。
👉圖片懶加載

3.緩存

緩存作為提升系統性能的關鍵技術之一，其核心思想在于通過存儲最近或經常訪問的數據副本，減少對原始數據源的訪問次數，從而達到加速數據讀取、降低系統響應時間和負載的目的。耳緩存原理就是更快讀寫的存儲介質+減少IO+減少CPU計算=性能優化。而性能優化的第一定律就是：優先考慮使用緩存。
緩存的主要手段有：瀏覽器緩存、CDN、反向代理、本地緩存、分布式緩存、數據庫緩存。

4.圖片壓縮

圖片壓縮對于優化網站性能、加快頁面加載速度至關重要，特別是在移動設備和有限帶寬的網絡環境下。
用工具開壓：

Squoosh：這是一個開源的在線圖片壓縮工具，支持各種格式（包括WebP、JPEG、PNG等），特點是用戶界面友好，可以實時預覽壓縮效果，并允許手動調整壓縮級別，直至達到滿意的效果。
CompressJPEG和 CompressPNG ：這兩個網站分別專注于JPEG和PNG格式的圖片壓縮，操作簡單，上傳圖片后即可快速壓縮，適合一次性處理少量圖片。
ImageOptim（Mac）/ FileOptimizer（Windows）：這兩款是桌面端的圖片優化工具，支持拖拽操作，可以批量處理圖片，自動應用最佳壓縮算法，無需用戶手動調整。
Adobe Photoshop：ps圖像處理軟件，具備強大的圖片壓縮和導出功能。您可以使用其"Save for Web"或"Export As"功能來優化圖片大小，同時保持較好的質量。
再不濟就找UI壓縮

5.圖片分割

比如一張效果圖，UI又開始亂叫不愿意壓縮，它喵的，真是小刀拉屁股，那就割。
在這里插入圖片描述

思路：

使用工具分割圖片: 首先，您需要使用像Photoshop、GIMP這樣的圖像編輯軟件，或者自動化腳本（如Python的PIL庫）將大圖切割成多個小圖。假設我們決定將圖片分割為4個部分，每個部分大小適中，建議不超過100KB
命名與組織: 分割后，確保每個圖片文件命名有序，便于后續引用，例如：image_part_1.png, image_part_2.png, image_part_3.png, image_part_4.png。

接下來，我們將使用HTML和CSS來展示如何將這些圖片按原順序拼接起來。請注意，為了防止圖片加載時導致布局錯亂，我們為每個圖片分配了固定高度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片分割示例</title>
<style>.image-container {display: flex;flex-wrap: nowrap;width: /* 原圖片總寬度 */;height: /* 原圖片總高度的一半，因為是兩行兩列布局 */;}.image-part {width: /* 原圖片寬度的一半 */;height: /* 原圖片高度的一半 */;object-fit: cover; /* 保持圖片比例并填充容器 */}
</style>
</head>
<body><div class="image-container"><img src="image_part_1.png" class="image-part" alt="圖片分割1"><img src="image_part_2.png" class="image-part" alt="圖片分割2"><img src="image_part_3.png" class="image-part" alt="圖片分割3"><img src="image_part_4.png" class="image-part" alt="圖片分割4">
</div></body>
</html>

請根據實際情況調整CSS中的寬度和高度值，以匹配原始圖片的尺寸和分割后圖片的實際大小。同時，確保所有分割圖片的路徑是正確的。

6.sprite

精靈圖（Sprite），在網頁開發中確實扮演著重要角色，尤其是在優化網站性能方面。
通過將多個小圖標合并成一張大圖，減少HTTP請求、減輕服務器負擔、加快頁面渲染、優化緩存利用及減少帶寬消耗，成為了提高網頁性能的有效手段。盡管隨著HTTP/2協議的普及和新的技術如SVG圖標、Icon Fonts以及CSS Sprites inlining的出現，精靈圖的使用場景有所減少，但在特定場景下，尤其是針對小圖標和背景圖的優化，它仍然是一個有價值的解決方案

7.Code Splitting

Webpack代碼分割是優化前端應用加載速度的關鍵技術之一。Webpack 4 及以上版本默認開啟了動態代碼拆分，它會自動將較大的代碼塊分離成不同的chunk（或稱為bundle），以實現按需加載，進而提升用戶體驗。
Webpack 4 默認分包策略 不進行任何特殊配置，Webpack 4 就能執行以下操作：

入口文件依賴：所有直接或間接由入口文件引用的模塊會被打包進main.js（或其他命名的主輸出文件）。
第三方庫分離：大于30KB的第三方庫（如echarts、xlsx等）會被單獨打包成chunk，這樣它們可以被緩存并在不同頁面間復用，減少重復下載。
異步加載組件：使用動態導入（如import()）的模塊會自動生成獨立的chunk，實現懶加載。
并發限制：初始加載時，Webpack會控制并發請求數量不超過一定限制，以避免過多請求導致的性能問題。

splitChunks示例細化分包更改配置：

splitChunks({cacheGroups: {vendors: {name: `chunk-vendors`,test: /[\\/]node_modules[\\/]/,priority: -10,chunks: 'initial',},dll: {name: `chunk-dll`,test: /[\\/]bizcharts|[\\/]\@antv[\\/]data-set/,priority: 15,chunks: 'all',reuseExistingChunk: true},common: {name: `chunk-common`,minChunks: 2,priority: -20,chunks: 'all',reuseExistingChunk: true},}
})

按需加載：
即使在未使用Webpack 4的項目中，也可以通過一些策略實現按需加載，例如使用動態導入（import()表達式）、CommonsChunkPlugin（在Webpack 4之前的版本中）或手動分割代碼到不同的entry點，以此來減小初始加載包的大小，提升應用加載速度。👉 webpack如何使用按需加載

8.gzip

gzip是一種廣泛應用于Web服務器和客戶端之間的數據壓縮傳輸技術。通過在服務器端對響應內容進行壓縮，然后由客戶端解壓，可以顯著減少通過網絡傳輸的數據量，從而加快頁面加載速度，降低帶寬消耗。

http {# 開啟gzip壓縮gzip on;# 設置用于壓縮的緩沖區數量和大小，這里是32個4K的緩沖區gzip_buffers 32 4K;# 設置壓縮級別，范圍為1-9，數字越大壓縮程度越高，消耗CPU資源也越多。這里設置為6，是比較均衡的設置。gzip_comp_level 6;# 設置最小壓縮長度，只有響應內容長度大于此值時才會進行壓縮。這里設置為100字節。gzip_min_length 100;# 指定可以進行gzip壓縮的MIME類型。這里包含了常見的文本和腳本類型。gzip_types application/javascript text/css text/xml;# 禁用特定版本的IE瀏覽器的gzip壓縮支持，避免一些老版本IE的兼容性問題。gzip_disable "MSIE [1-6]\.";# 啟用`Vary: Accept-Encoding`響應頭，讓代理服務器知道緩存需要區分是否支持gzip的請求。gzip_vary on;
}

這段配置放置在Nginx的配置文件（通常是nginx.conf）中的http塊內，它告訴Nginx對符合規則的HTTP響應啟用gzip壓縮。通過調整這些參數，可以優化壓縮效果以適應不同的服務器環境和性能需求。例如，gzip_comp_level可以根據服務器的處理能力適當調整，以平衡壓縮效率和CPU負載；gzip_types可以按需添加更多的MIME類型以覆蓋更多種類的資源。

啟用gzip壓縮后，務必確保服務器和客戶端（瀏覽器）都支持并開啟了gzip解壓功能，這樣才能充分利用這一優化措施。

9.GPU加速

利用GPU（圖形處理器）來渲染復雜的CSS動畫和其他圖形密集型任務可以顯著提升網頁性能。現代瀏覽器通過硬件加速技術，能夠將部分圖形處理工作從CPU轉移到GPU上，從而減輕CPU負擔，尤其是在處理大量像素操作和動畫時更為高效。
絕大部分主流瀏覽器都支持GPU加速，通過某些CSS屬性來提示瀏覽器對特定元素使用GPU加速，盡管直接的3D變換（如rotate3d, translate3d）會自然觸發硬件加速，但有時候即便不需要實際的3D效果，也可以“欺騙”瀏覽器開啟GPU加速，比如使用：

.element {transform: translateZ(0);/* 或者 */transform: translate3d(0,0,0);
}

這兩個屬性都能暗示瀏覽器為該元素創建一個新的復合圖層，并嘗試使用GPU進行渲染。注意，translateZ(0)實際上并沒有改變元素的位置，但它足以觸發硬件加速機制。
總之，GPU加速是提升網頁動態效果和交互流暢度的有效手段，但關鍵在于理解和合理應用，確保在提升用戶體驗的同時，保持良好的性能表現。

10.Ajax

Ajax 可以利用瀏覽器的緩存機制來提高響應速度和提升用戶體驗，但這主要取決于請求的類型（GET vs POST）以及服務器端設置的緩存控制頭信息。下面是一些關鍵點：

默認緩存行為：瀏覽器通常會對GET類型的Ajax請求進行一定程度的緩存，尤其是當請求的URL包含相同的查詢字符串時。這意味著，如果發送了一個之前已經請求過的、具有相同URL的GET請求，瀏覽器可能會直接從本地緩存中返回結果，而不是再次向服務器發起請求。這對于獲取靜態數據或很少變化的數據非常有用。
控制緩存：服務器可以通過HTTP響應頭來控制GET請求的緩存行為，比如使用Cache-Control、Expires等頭部字段來指定資源的最大緩存時間或緩存策略。開發人員也可以通過JavaScript設置Ajax請求的cache選項來覆蓋瀏覽器的默認行為。例如，在jQuery中，可以設置cache: false來強制每次請求都從服務器獲取新數據。
對于POST請求，瀏覽器默認行為一般是不進行緩存的，因為POST通常用于提交數據到服務器，這些數據應該是有狀態的，每次請求應當產生不同的結果。盡管可以通過特定的HTTP頭來指示緩存POST請求，但這并不常見，且可能違反RESTful原則和用戶的預期

使用緩存的策略：

明確緩存策略：根據數據的性質（是否經常更新，是否敏感）來決定是否啟用緩存以及緩存多久。
版本控制：為避免因緩存導致用戶無法獲取到最新數據，可以在請求的URL中加入版本號或時間戳作為查詢參數，即使內容未變，URL的變化也會促使瀏覽器重新請求。
使用ETag或Last-Modified：這些HTTP頭部可以用來驗證緩存數據的有效性，只有當服務器上的數據發生改變時，才需要重新下載。

總之Ajax確實可以通過利用瀏覽器緩存來提高頁面響應速度，但重要的是要理解不同HTTP方法的緩存特性，并根據實際應用場景合理配置緩存策略，以平衡數據的實時性與性能優化的需求。

11.Tree Shaking

搖樹（Tree Shaking）是現代前端打包工具（如Webpack、Rollup等）中的一種優化技術，旨在消除未使用的代碼，以減小最終生成的JavaScript文件體積。這個術語形象地比喻為從代碼“樹”中搖掉未被觸碰的“葉子”（即未引用的代碼），留下僅包含實際使用功能的最小化代碼。
搖樹優化主要依賴于ES模塊（ESM，ECMAScript Modules）的靜態導入導出特性。在ESM中，由于導入導出關系在編譯時就可以確定，打包工具可以分析哪些導出的模塊或函數沒有被其他模塊直接或間接引用，進而將這部分未被引用的代碼從最終的打包產物中移除。

使用ES模塊: 確保項目使用ES模塊（.mjs或在package.json中設置"type": "module"）。
明確的導出: 第三方庫或你自己的代碼需要使用明確的導出（如export）而非默認導出（export default），因為明確導出更便于工具靜態分析。
生產環境配置: 在Webpack 4及以上版本，搖樹優化默認開啟，但通常在生產環境配置中通過設置如mode: 'production'來確保最佳優化。
模塊化第三方庫: 使用支持搖樹優化的第三方庫，這些庫需要使用ES模塊且正確標記了側效應（side-effects）。未標記有副作用的庫可能會導致無效的搖樹優化。

在Webpack配置中，開啟搖樹優化通常意味著：

// webpack.config.js
module.exports = {mode: 'production', // 生產模式自動開啟搖樹優化module: {rules: [{test: /\.m?js$/,exclude: /(node_modules|bower_components)/, // 排除某些大型庫或不希望進行搖樹優化的模塊use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},},],},
};

不是所有場景都能完美實現搖樹優化。例如，使用動態導入（import()）或在代碼中存在全局副作用（如修改全局變量或執行副作用的IIFE）時，可能會影響搖樹的效果。
對于一些庫來說，即便使用了明確的導入方式，如果沒有正確的package.json配置（比如缺少"sideEffects"字段），也可能導致搖樹不徹底。

總之，搖樹是一種強大的優化手段，但它的效果依賴于代碼的編寫方式和配置的合理性。合理利用這一技術，可以顯著減小應用的體積，加快加載速度，提升用戶體驗。

12.Resource Hints

Resource Hints 是一種強大的性能優化策略，它允許開發者通過提供有關頁面加載所需資源的線索，幫助瀏覽器提前加載或建立連接，從而減少資源加載延遲，提升用戶體驗

<link rel="dns-prefetch"> ：預先解析DNS查詢，減少域名解析時間。當瀏覽器遇到這個提示時，會立即開始DNS查找，即使該資源還未被請求。適用于那些即將被使用的外部資源的域名。
<link rel="preconnect">：在實際請求資源之前，預先建立與目標服務器的連接（包括DNS查找、TCP握手、TLS協商等）。這對于需要跨域的資源尤其有用，因為它可以減少往返時間。
<link rel="prefetch">：提示瀏覽器預加載可能在未來需要的資源，但優先級低于當前頁面需要的資源。這適用于可能在用戶導航至其他頁面時用到的資源，比如預加載下一頁的內容。
<link rel="preload">：指示瀏覽器立即加載指定資源，且優先級較高，保證這些資源在頁面需要時能夠立即可用。適用于關鍵路徑資源，如首屏渲染所需的CSS和JavaScript文件。
<link rel="subresource">：與preload相似，用來指示瀏覽器提前加載對當前頁面渲染至關重要的子資源。不過，subresource已被廢棄，推薦使用preload代替。
<link rel="prerender">：預渲染整個頁面，將其加載到內存中并準備渲染，但不直接展示給用戶。當用戶導航到該頁面時，可以實現瞬間加載。適用于用戶很可能會訪問的下一個頁面。
本地存儲（如localStorage）：雖然嚴格來說不屬于Resource Hints的范疇，但通過本地存儲（如localStorage或IndexedDB）緩存資源信息或數據，可以在用戶再次訪問時快速恢復，達到類似預加載的效果。